一.同源策略（造成跨域的原因）

首先，MDN上的关于同源策略解释如下：

同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。

 

定义：

如果两个URL的protocol（协议）、host（主机地址) 、port（端口）都相同，则这两个URL同源

 

示例（来自MDN）：

http://store.company.com/dir/page.html

mpls跨域 A配置 跨域 mdn_Access

 

简单点说：同源策略限制了从同一个源加载的文档或脚本与另一个源的资源进行交互

 

不受同源策略限制的：

1.页面中的链接，重定向及表单提交是不会受到限制的

2.跨域资源的引入是可以的，如<script src="..."></script>，这种引入js是不能对齐进行读写操作的

 

二.解决方案

1.JSONP

这种方案是看跨域解决方案的技术贴必提的一种方案，但是这种方案需要前后端都作出修改才可以，因此不是本文重点。简单讲述一下原理：

由于js不受同源策略的限制，因此前端可以把要传输的数据放进<script>标签中传输给后端，并且告诉后端需要回调的函数名，后端将需要返回的数据拼接好回调你指定的函数，并将返回的数据作为参数传入，前端就可以在定义的回调函数中对数据进行处理和展示

 

jsonp的回调函数如何执行：

服务器会根据这个callback组成callback(json)这种格式返回，ajax拿到后使用<script>标签插入html就会执行里面的函数

 

jq实现JSONP的一个小demo如下：

$(function(){
    $.ajax({
        url:'http://www.oop.im/data.php',
        type:'GET',   //JSONP只支持get请求
        dataType:'jsonp',   //必须设置成jsonp
        jsonp:'callback',
        success:function(res){
            console.log(res);
        }
    });
})

 

2.CORS

跨域配置：

//该字段表明可供那个源跨域，公共资源可以直接填*
Access-Control-Allow-Origin: http://xxx.xxx:xxx  //资源路径  
// 该字段表明服务端支持的请求方法
Access-Control-Allow-Methods: GET, POST, PUT, DELETE  
 // 实际请求将携带的自定义请求首部字段     
Access-Control-Allow-Headers: Content-Type

3.nginx 配置 CORS

场景：为了分流，让部分资源请求一个单独的域名

server{
    listen 8089;
    server_name  localhost;
    root   html
    #cors
    add_header Access-Control-Allow-Origin $http_origin always;
    add_header Access-Control-Allow-Credentials true always;   
    add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE' always;
    add_header Access-Control-Allow-Headers: DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type always;
		
    #将请求http://localhost:8089/api 转发到 http://localhost:3000/api 
    location /api{
        proxy_pass http://localhost:3000/api
    }
}