关于前端跨域及解决方案详解

关于前端跨域

跨域指的是一个域下的文档或脚本试图去请求另一个域下的资源。我们常说的跨域，也就是指由浏览器同源策略限制的一类请求场景。

同源指的是协议，域名和端口号相同，一旦有一个不相同，则为不同源。同源策略其实是一个安全策略，是为了保证用户信息安全，防止恶意的网站窃取数据，如CSRF(跨站请求伪造)攻击。

跨域解决方案

1、CORS：（Cross-origin resource sharing）跨域资源共享

实现：

客户端无需处理，浏览器会自动在请求头中增加一些字段。如果是需要发送跨域Cookie，请求头要设置withCredentials属性

服务端响应头需要加Access-Control-Allow-Origin、Access-Control-Allow-Headers、Access-Control-Allow-Credentials属性

CORS分为两类：简单请求和非简单请求

如果请求方法是HEAD,GET,POST其中一种，http头只有Accept，Accept-Language，Content-Language，Last-Event-ID，Content-Type这几个字段的话，则为简单请求，不满足的均为非简单请求。

这两类的跨域流程也不同。

简单请求的话，在头信息之中，服务器端根据Origin判断源是否在许可范围，再决定是否同意这次请求

非简单请求的话，

客户端会增加一次 HTTP 查询（“预检”）请求，即options请求，浏览器先询问服务器，只有得到肯定答复，浏览器才会发出正式的请求。

服务器收到预检请求后，检查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后，确认允许跨源请求，就可以做出回应。

2.代理接口跨域

在本地调试开发还可以利用webpack + webpack-dev-server代理接口跨域。

需要使用本地开发插件：webpack-dev-server

在config.js配置如下：

module.exports = {devServer: {proxy: {'/api': {target: 'http://xxx.com/',pathRewrite: {'^/api' : ''}, changeOrigin: true, // target是域名的话，需要这个参数，secure: false, // 设置支持https协议的代理}}}
}

以上是前端目前较为常用的跨域解决方案，以前也有一些比较常用的跨域解决方案，大概了解一下，就不详细展开：

websocket
JSONP(只支持get请求)
window.postMessage
document.domain
window.name+iframe
location.hash+iframe

还有一个也特别常用的跨域解决方案是nginx方向代理。只需要修改 nginx 的配置即可解决跨域问题，支持所有浏览器，支持session，不需要修改任何代码，并且不会影响服务器性能。这个具体就不展开啦。