前端跨域总结

跨域

（1）跨域存在的意义：

• 前后端分离
• 服务器分离，数据服务，图片服务，web服务。
• 云信息共享，第三方接口。
• 跨域是浏览器对ajax安全的限制。

（2）、解决跨域方法

• 修改本地host，本地默认是127.0.0.1：8080。如果，修改为和后端地址相同则，将会欺骗浏览器，越过拦截。dns预解析会先找本地，然后，才找线上dns服务器，因此，可以本地配置host，就是本地的dns。

http://www.baidu.com/api:8081 127.0.0.1:3000

随着项目越来越大，分离服务器做并发处理，图片，web，数据。因此，修改host不再可取。

• jsonp，利用script不存在跨域，但是，只能跨域get请求方式，post不支持，并且需要后端支持。

<script src="http://www.xxxx.com:8081/api/getData?callback=myFunc"></script>

服务端返回必须是

'myFunc(JSON.stringify(data))'

• cors跨域，不建议使用。如果需求简单可以使用。

需要后端配置，以node为例。

app.use((req, res, next)=>{
    res.header("Access-control-allow-origin", '值');
})

问题： 因为一个cors只能携带一个Access-control-allow-origin，要是许多个不同源同时访问一个服务器，就会出问题，如果设置为*，虽然所有源都可以访问，但是不能携带cookie，因此，携带cookie操作都无效。

• proxy建议使用，react和vue都是使用webpack，webpack-dev-server起一个web服务。在webpack中配置devServer。根据这个原理也可以自己写一个node作为中转，你的数据发给node，再有node发给服务器，返回类似。

服务端proxy，nginx中可以反向代理配置跨域。

location / {
    proxy_pass http://xxxx.com:6060/api
}

• postMessage用在h5和app之间跨域。
• webScoket