持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第28天，点击查看活动详情
关于前端跨域
跨域指的是一个域下的文档或脚本试图去请求另一个域下的资源。我们常说的跨域，也就是指由浏览器同源策略限制的一类请求场景。
同源指的是协议，域名和端口号相同，一旦有一个不相同，则为不同源。同源策略其实是一个安全策略，是为了保证用户信息安全，防止恶意的网站窃取数据，如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，不需要修改任何代码，并且不会影响服务器性能。这个具体就不展开啦。
