什么是跨域

不同域名之间相互请求资源，就是跨域。常说的跨域问题，指的是浏览器不允许跨域请求。这是由于浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。
其中同源指的是，域名、协议、端口号都相同。例如对于 http://abc.123.com:8080/index/asddf 这样一个网址来说，http/https是协议，abc.123.com是域名，8080是端口号。而第一个单独的反斜杠'/'后的内容，并不影响是否是同源判断。
浏览器之所以要限制跨域访问，是因为这种方式存在巨大的安全隐患。会造成CSRF（Cross-site request forgery）攻击，也就是跨站请求伪造。攻击者可以盗用你的身份，发送恶意请求，威胁隐私和财产安全。

跨域方案解决

1.反向代理

因为这是浏览器对于js的限制。所以在获取其他域名下的内容时，在自己的域名下架设一个Web服务器（ASP、PHP、JAVA等）来获取其他域名下的内容，再将内容返回前端。这样通过js请求的内容在同一域名下，就不会出现跨域的问题。这也是跨网站请求数据常用的一种方法。

2.JSONP（只支持get）

JSONP是最初用来解决跨域问题的方式。它的原理是跨域的“资源嵌入”是被浏览器允许的，用<script>标签没有跨域限制的“漏洞”来达到与第三方通讯的目的。这是一种非正式传输协议，通过一个script标签来指向一个来自其他服务器的API，并提供一个回调函数来接收数据。被请求的服务器将需要返回的json数据，放在回调函数位置返回。JSONP的缺点是它只能支持GET操作，没法支持POST等操作。

3.CORS （Access-Control-Allow-Origin只能配置 一个域名或者* || 根据头来动态判断更改）

CORS的原理是基于服务方授权的模式，也就是说提供服务的程序要主动通过CORS回应头来声明自己信任哪些源（协议+域名+端口）。 由于得到了服务方的授权，浏览器就可以放行来自这些域的请求了。
浏览器在发送请求时，会在 Header 中加上一个 origin(protocal + host + path + port) 字段，来标明这个请求是来自哪里。在服务端拿到这个请求之后，会对 origin 进行判断，如果是在允许范围内的请求，将会在 respones 返回的 Header 中加上：

Access-Control-Allow-Origin: origin
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: something

（1）Access-Control-Allow-Origin
该字段是必须的。它的值要么是请求时Origin字段的值，要么是一个，表示接受任意域名的请求。
（2）Access-Control-Allow-Credentials
该字段可选。它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。这个值也只能设为true，如果服务器不要浏览器发送Cookie，删除该字段即可。
（3）Access-Control-Expose-Headers
该字段可选。CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。上面的例子指定，getResponseHeader('FooBar')可以返回FooBar字段的值。
所以，在服务端可以通过设置“Access-Control-Allow-Origin”来指定允许跨域访问的域名。这里有一个问题就是设置Access-Control-Allow-Origin只能配置 一个域名或者 。那么有多个域名允许访问但并不是允许所有访问怎么办呢。这个时候可以在获取到请求时，判断其域名是否允许访问，如果允许访问，动态的将Access-Control-Allow-Origin允许的域名设置为网络请求的域名。

4.浏览器配置跨域 （针对某一浏览器，禁止其跨域的检查）

前面说到，跨域问题实际上是浏览器对js的限制，那么我们只要把这个功能关掉就可以了。但是这种方法适用性比较小，首先这种设置只针对某一浏览器，不同的浏览器设置是不同的；其次这个设置是跟浏览器绑定的，A电脑的浏览器关闭了功能，可以跨域访问，但是其他电脑没有设置过的浏览器还是不可以跨域访问；最后这种设置是不安全的。所以这种方式一般只会在项目开发时使用，特别是前后端分离开发但是线上代码在同一域名下时。这里提供chrome浏览器的设置方式

5.Vue-cli proxyTable 开发环境跨域问题

这里针对于Vue开发项目前后端分离开发，实际线上代码在同一域名下，即仅需要在开发环境时设置跨域的情况。这里用到的是vue-cli中config文件的proxyTable设置。
这个参数主要是一个地址映射表，你可以通过设置将复杂的url简化，例如我们要请求的地址是abc.sample.com/user/list，可以按照如下设置：

proxyTable: {
 '/user': {
  target: 'http://abc.sample.com',
  changeOrigin: true,//解决跨域设置，本地会虚拟一个服务端接收你的请求并代你发送该请求
  pathRewrite: {
    '^/user': '/user'
  }
 }
}

这样之后，这样我们在写url的时候，只用写成/user/list就可以代表abc.sample.com/user/list。我们还可以这样写，将需要跨域的请求写成/api/***，以上面为例就是/api/list/user，然后设置如下

proxyTable: {
 '/api': {
  target: 'http://abc.sample.com',
  changeOrigin: true,//解决跨域设置，本地会虚拟一个服务端接收你的请求并代你发送该请求
  pathRewrite: {
    '^/api': '/' //实际请求是没有api的，为了方便区分和匹配才加的，所以这里将请求的/api重写为/
  }
 }
}