跨域几种方案的前后台代码演示

原创 Luminary丶 随笔 前端 733阅读 2018-05-09 10:33:41 举报

跨域问题是日常中必须要面对的,每次面试必考跨域也体现了跨域技术的重要性,跨域的文章也多的数不过来,今天这篇文章主要是用来总结自己每种跨域技术的尝试,如果有幸能帮到别人那就再好不过了

自己用 node 搭了两个服务器,前台设置的端口为 3002,模拟的服务端设置的端口为 3001

跨域问题的出现是由于「同源策略」引起的,「同源」就指的是三个相同,即「协议相同」、「域名相同」、「端口相同」,「同源策略」使得以下三种行为受到限制

  • Cookie、LocalStorage 和 IndexDB 无法获取
  • DOM 无法获取
  • Ajax 请求无法发送

具体情况还请移步浏览器同源政策及其规避方法

自己在这还是稍微总(jie)结(jian)一下,写一遍加深一下印象

对于 Cookie 和 iframe

对于 Cookie 和 iframe ,如果两个网页一级域名相同,只是二级域名不同,比如 a.hutchins.comb.hutchins.com ,浏览器可通过设置相同的 document.domain

服务器也可以在设置 Cookie 的时候,指定 Cookie 的所属域名为一级域名,比如

这样的话二级域名和三级域名不做任何设置就可以读取这个 Cookie

window.postMessage

H5 引入了全新的 API :「跨文档通信 API」

  • otherWindow 窗口
  • message 要发送的信息
  • targetOrigin 指定哪些窗口可以接受到信息,* 表示无限制

接收窗口通过 message 方法接收

message 的事件对象有以下三个属性

  • event.source 发送消息的窗口
  • event.origin 消息发向的网址
  • event.data 发送的消息

AJAX 跨域

jsonp 跨域

jsonp 的原理就是动态创建 script 标签,然后用 scriptsrc 属性引用外部跨域链接,通过回调函数参数接受后台传递的信息

但是 jsonp 只能支持 Get 请求

跨域资源共享 「CORS」

请求分为「简单请求」和「非简单请求」,而处理这两种请求的方式很不同,这里只说一下「简单请求」

请求方式为以下几种

  • HEAD
  • GET
  • POST

HTTP 的消息头不超出以下几种字段

  • Accept
  • Accept-Language
  • Content-Language
  • Last-Event-ID
  • Content-Type 只限于 application/x-www-form-ulrencoded、multipart/form-data、text/plain

最新文章都会在 github 中去更新

https://github.com/MLuminary/Blog/issues

给个 star 鼓励一下吧~

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复