浏览器

[moyahuang]

• 跨域及其解决策略

[moyahuang]

跨域及其解决策略

跨域(Cross-Origin)问题是指浏览器在请求非同源URL时浏览器对访问的限制，这种限制叫做浏览器的同源策略。同源是指请求的协议(protocol)，主机(host)和端口(port)都要相同。

⭐注意：同源策略限制的其实是跨域读（例如ajax请求）操作，而不包括跨域写操作(链接，表单提交）以及跨域嵌入（图片，外部脚本等）

因为现在前后端分离的开发模式，前后端可能部署在不同的域上，以及自己在本地开发调试接口时前端页面和接口也不在同一个域上等情况。所以跨域问题非常常见。

目前最常见的解决方案：

1. JSONP

这个解决方案实际上是个小trick，即是利用同源策略不限制跨域嵌入操作的特性。具体步骤如下：

• 在文档中定义处理数据的回调函数
• 然后文档中嵌入外部脚本，将其src属性设置为GET请求的url，并将回调函数名作为参数拼接在url中
• 服务器端接收到请求后，取下回调函数名将数据作为函数参数，并返回前端

前端

<script>
function jsonpCallback(obj){
    console.log(obj);
}
</script>
<script src="http://example.com?callback=jsonpCallback"></script>

服务器端

    ...
    var callback=...//获取回调函数名
    var script=`${callback}(${data})`; //形式 jsonpCallback
    res.send(script);
    ...

jQuery中也封装了jsonp的跨域解决方式

    $.ajax({
        url: "http://example.com",
        dataType: "jsonp",
        jsonp: "jsonpCallback"
    }).done(function(res){
        console.log(res);
    })

JSONP方式的优缺点：

• 可兼容性好
• 只适用于GET请求，需要服务器端配合

2. CORS（Cross Origin Resource Sharing，跨域资源共享）

在服务器端的响应中设置头部Access-Control-Allow-Origin，即允许来源域的白名单，可以为通配符（wildcard*)，具体涉及的请求头和响应头见计算机网络部分CORS。

CORS解决方案需要分为两种情况：

1. 简单请求
2. 非简单请求
   详见阮一峰博客

3. 服务器端设置代理（server proxy)

//todo;