跨域产生的原因和解决方案

浏览器的同源策略

协议、域名、端口号相同为同源，否则不允许跨域，最初是指cookie不能共享，由于浏览器的表单提交时不受同源策略限制的，所以为了安全性，同源策略是必要的。
现在的同源策略限制的内容包括
1.cookie、localStorage、indexDB无法读取
2.DOM无法获取
3.AJAX不能发送
解决思路有比如：jsonp绕过浏览器的同源策略，通过websocket/cors，正反代理来告诉服务端发起请求的源，由服务端来判断是否同意该请求。

解决方案：

1.一级域名相同，二级域名不同的情况下，可以设置document.domain相同，就可以共享cookie
2.以iframe和window.open方法打开的窗口为例，有三种方法可以跨域
（1.url后#片段识别符携带传递参数 通过hashchange方法进行通知
（2.window.name 不论同源只要在同一个窗口设置了这个属性就可以传参，容量大，但是需要额外监听
（3.window.postMessage 是H5引入的新的API，window.postMessage(data，target地址)
（4.通过上面的方法也可以读写其他窗口的localStorage
3.AJAX跨域
（1.JSONP通过script（该标签无同源限制）向服务器发起请求，需要指定一个回调函数，服务端会将该数据放在回调函数里。只能发送get请求，优点是简单适用、支持所有的浏览器，对服务端改动非常小
而必须设置回调函数是因为作为一个scripts标签获取的js脚本是需要被执行的，如果是纯数据的话无法执行会报错
（2.webSocket 是一种通信协议，不实行同源策略，在请求头中有origin属性标记了请求源，缺点是需要支持webscoket的服务器才支持。
（3.CORS 整个通信过程 都是浏览器自动完成的，不需要用户进行参与，当浏览器发现XMLHTTPRequest或原生fetch请求，会自动附加一些头信息，有时会进行一次附件的预检请求。（简单请求和非简单请求）
(https://www.jianshu.com/p/c68d404a3ab9)

什么是简单请求？将会带有origin字段（协议 域名 端口号）

请求方法为head get post
请求头信息在这五个之内
accept, accept-language,content-language,last-event-id, content-type(为浏览器默认提交application/ x-www-form-urlencoded，表单数据multipart/form-data, 纯文本text/plain)
非简单请求如发出的方法是put delete 或者content-type是application/json，则需要预检options请求，返回正常通过将带有access-control-allow-origin，之后将和简单请求一致
4.搭建中间层转发，通过java或者node，转化成同源请求
例如现在我们要发送一个到2019端口号的请求，现在是80端口，那这肯定产生了跨域，需要在vue项目中进行webpack.config.js配置代理，当我们发出请求的时候是发出了80/api/student请求，是同源的，而发出真正的请求的时候正向代理会给我们发送真实的2019/student。
浏览器是禁止跨域的，但是服务端不禁止，在本地运行npm run dev等命令时实际上是用node运行了一个服务器，因此proxyTable实际上是将请求发给自己的服务器，再由服务器转发给后台服务器，做了正向代理，所以不会出现跨域问题。

proxyTable: {
    '/api': {
        target: 'http://192.168.20.1:8080/', // 接口的域名
        secure: false,      // 如果是 https 接口，需要配置这个参数
        changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
        pathRewrite: {
            '^/api': ''  // 真正的请求中将api替换为target
        }
    },
},

5.Nginx反向代理，通过Nginx解析URL地址的时候进行判断，将请求转发到具体的服务器上，这里发出的请求和真正的请求有映射关系。由于服务器之间是没有跨域的，所以我们先向Nginx发起同源请求，再由Nginx转发给真正的服务器。
更多：http://www.sohu.com/a/302468181_505803

// Nginx配置文件config
server {
# 监听80端口号
listen 80;
# 监听访问的域名
server_name a.com;
# 根据访问路径配置
location /{
# 把请求转发到 http://127.0.0.1:9999
proxy_pass http://127.0.0.1:9999;
# 兼容websocket
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
# 监听根目录下的 /api 路径
location /api/{
# 把请求转发到 http://127.0.0.1:8888
proxy_pass http://localhost:8888;
}
}

CORS跨域的配置

客户端关键字Access-Control-Request-Method和 Access-Control-Access-Headers和 origin标识了请求的资源
origin只能设置*或者单一的来源，不支持正则过滤所以设置跨域的时候可以通过拦截白名单校验，通过后将origin设置成相应的来源即可
服务端关键字Access-Control-Allow-Methods和Access-Control-Allow-Headers和Access-Control-Allow-Origin标识了服务端对跨域请求的白名单校验。在响应options请求和响应真实请求时都是有作用的。还有一个关键字"Access-Control-Allow-Credentials"表明它允许cookies

服务器设置OPTIONS响应一般要同时满足这些条件，一是跨域，二是复杂请求，三是服务器对OPTIONS响应默认值不符合要求，如果是不存在跨域情况，就不需要在服务器手动设置OPTIONS响应。

//以node-koa框架为例
const Koa = require('koa');
const app = new Koa();
const _cors=(ctx,next)=>{
    //指定服务器端允许进行跨域资源访问的来源域。可以用通配符*表示允许任何域的JavaScript访问资源，但是在响应一个携带身份信息(Credential)的HTTP请求时，必需指定具体的域，不能用通配符
    ctx.set("Access-Control-Allow-Origin", "http://127.0.0.1:8080");
 
    //指定服务器允许进行跨域资源访问的请求方法列表，一般用在响应预检请求上
    ctx.set("Access-Control-Allow-Methods", "OPTIONS,POST,GET,HEAD,DELETE,PUT");
    
    //必需。指定服务器允许进行跨域资源访问的请求头列表，一般用在响应预检请求上
    ctx.set("Access-Control-Allow-Headers", "x-requested-with, accept, origin, content-type");
    
    //告诉客户端返回数据的MIME的类型，这只是一个标识信息,并不是真正的数据文件的一部分
    ctx.set("Content-Type", "application/json;charset=utf-8");
    
    //可选，单位为秒，指定浏览器在本次预检请求的有效期内，无需再发送预检请求进行协商，直接用本次协商结果即可。当请求方法是PUT或DELETE等特殊方法或者Content-Type字段的类型是application/json时，服务器会提前发送一次请求进行验证
    ctx.set("Access-Control-Max-Age", 300);
 
    //可选。它的值是一个布尔值，表示是否允许客户端跨域请求时携带身份信息(Cookie或者HTTP认证信息)。默认情况下，Cookie不包括在CORS请求之中。当设置成允许请求携带cookie时，需要保证"Access-Control-Allow-Origin"是服务器有的域名，而不能是"*";如果没有设置这个值，浏览器会忽略此次响应。
    ctx.set("Access-Control-Allow-Credentials", true);
 
    //可选。跨域请求时，客户端xhr对象的getResponseHeader()方法只能拿到6个基本字段，Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。要获取其他字段时，使用Access-Control-Expose-Headers，xhr.getResponseHeader('myData')可以返回我们所需的值
    ctx.set("Access-Control-Expose-Headers", "myData");
 
    next()
}
const main = function (ctx) {
    const _method=ctx.request.method;
    ctx.response.body={"请求方式":_method};
};
 
app.use(_cors)
app.use(main)
 
app.listen(5000, function () {
    console.log('koa start at port 5000')
})
// 前端axios
 const axios_request=(method)=>{
    axios({
      method: method,
      url: url,
      headers: {
        'Content-Type':contentType,
      },
 
      responseType: 'json',
    }).then(res => {
      console.log(res.data)
    }).catch(error => {
      console.log(error);
    });
  }

参考：https://juejin.im/post/5816158e2e958a00549e80f6
http://www.ruanyifeng.com/blog/2016/04/cors.html