跨域方法汇总

一、跨域的理解

什么是跨域？

一个域下的文档或脚本试图访问另一个域下的资源。

ajax发送http请求就会有跨域问题？那为什么在浏览器地址栏输入同样的url没有跨域问题？

ajax文件所在的位置是一个域，而服务器的文件相当于一个域，显然你不能从一个域直接拿到另一个域的数据，如果这样，那多不安全。而你在浏览器输入url，只是向服务器里发送请求，把相关的html，js全部加载下来，而这些东西是保存在同一个服务器这个域里面的（后台、前端文件是放在一起的），所以不存在跨域说法了。

为什么会有跨域？

这个是由于浏览器的同源策略。即同协议、同域名、同端口。

二、什么才叫同源？

例如： http://www.baidu.com/index.html的同源检测

http://www.baidu.com/dirr/index.html 同源
https://www.baidu.com/index.html 不同源（不同协议）
http://www.qq.com/index.html 不同源（不同域名）
http://www.baidu.com:8080/index.html 不同源（端口不同）

同源策略限制不同源的3种行为：

cookie、IndexDB、localStorage 无法读取
DOM无法读取
AJAX请求不能发送

三、项目当中遇到的跨域解决方法

1，jsonp

　　实现原理：通过script标签不受同源策略的限制，在本站点动态创建一个script标签，指定src属性为跨域的地址，并且提供一个回调函数来接受返回的数据，第三方产生的数据是一个json数据的包装，比如：onBack({'params':11})，然后再调用本站点的回调函数。这样就拿到了不同源的数据。

//前端代码实现

let script = document.createElement('div') 
script.type = 'text/javascript' 
script.src = 'http://192.168.0.0:8080?user=shao&callback=onBack' 
function onBack(res){ 
    console.log(JSON.stringify(res)) 
} 

//后端代码实现 
onBack({'status':true,user:'admin'})

jsonp的缺点是：只能实现get方式请求。

2，CORS

　　CORS是W3C标准，允许浏览器跨域发送AJAX请求，需要浏览器和服务器同时支持。CROS通信过程中，如果AJAX跨域请求，则会自动添加一些附件的请求头信息，有时还会多一次附加请求，但用户是无感知的。CORS支持所有类型的HTTP请求。

服务端设置Access-Control-Allow-Origin

let xhr = new XMLHttpRequest(); 
xhr.withCredentials = true; //前端设置是否携带cookie 

//后端代码实现 
// 允许跨域访问的域名：若有端口需写全（协议+域名+端口），若没有端口末尾不用加'/' 
response.setHeader("Access-Control-Allow-Origin", "http://www.domain1.com"); 

// 允许前端带认证cookie：启用此项后，上面的域名不能为'*'，必须指定具体的域名，否则浏览器会提示 
response.setHeader("Access-Control-Allow-Credentials", "true"); 

// 提示OPTIONS预检时，后端需要设置的两个常用自定义头 
response.setHeader("Access-Control-Allow-Headers", "Content-Type,X-Requested-With");

3，使用nginx服务代理

　　由于项目中需要调用众多不同源的接口，前端需要处理不同环境不同源的接口地址切换，所以统一使用nginx代理转发，前端只需要处理当前源下的请求，跨域代理的配置主要在nginx的http配置项。

　　假设服务器域名为example.com,需要跨域请求example.com:8099的短信服务和example2.com下的网关服务，那么我们在本站点上配置/message下的请求转发到example.com:8099服务器上，配置/gateway转发到example2.com的服务器上。

http {   # 虚拟主机配置   
    server {    
    #监听80端口        
    listen       80;      
    #使用example.com 访问         
    server_name  example.com;         
    #开启gzip压缩         
    gzip  on;         
    gzip_disable "MSIE [1-6].";         
    #默认请求        
    location / {             
        root   html;             
        index  index.html index.htm;         
    } 
    # 将http://example.com/message/下的请求转发到http://example.com:8099/message/        
     location /message/ { 
        proxy_pass http://example.com:8099/message/         
    } 
    # 将http://example.com/gateway/下的请求转发到http://example2.com/gateway/         
    location /gateway/ { 
    proxy_pass http://example2.com/gateway/         
　　　　} 
　　　} 
}

4，webpack跨域配置

... 
dev:{ 
    ... proxyTable: {
     '/project-manage': { 
        target: 'http://192.168.2.67:7999/', 
        changeOrigin: true, //是否跨域 
        pathRewrite: { 
            '^/project-manage': '' 
            } 
        } 
    }, 
}

总结：除了上面列举的跨域方法外，还有postMessage，window.name等。

参考： https://segmentfault.com/a/1190000011145364