Vue 本地跨域处理(包含cookie)

方式一（推荐）：

proxyTable 设置(config --> index)

 proxyTable: {
   '/api': { // api 自定义标识,用来识别带api的请求
     target: 'http://xxxxxx.com', // 实际需要访问的接口域名
     // secure: false,            // 如果是https接口，需要配置这个参数
     changeOrigin: true,          // 如果接口跨域，需要进行这个参数配置
     pathRewrite: {
       '^/api': '' // api 用来替换 target
     }
   }
 },

说明：实际需要访问接口： http://114.67.109.107/hc/test.php(跨域)
axios 内配置请求地址为：api/hc/test.php
真实效果：http://本机Ip:3000/api/hc/test.php --> http://114.67.109.107/hc/test.php

方式二：

1、前端设置

main.js
import axios from 'axios'
axios.defaults.withCredentials = true;  //允许axios请求携带cookie等凭证

2、后端设置
说明： 以下设置对同域情况下没影响

  //当**Credentials为true时，**Origin不能为星号，需为具体的ip地址【如果接口不带cookie,ip无需设成具体ip】
  response.setHeader("Access-Control-Allow-Origin", "http://IPv4:端口");
  response.setHeader("Access-Control-Allow-Credentials", "true");
  response.setHeader("Access-Control-Allow-Methods", "GET,POST,PATCH,PUT,OPTIONS,DELETE");
  response.setHeader("Access-Control-Allow-Headers", "Origin,Content-Type,Cookie,Accept,Token");

3、cors 跨域请求【参考：cors 跨域请求】
　CORS(Cross Origin Resource Sharing) ：跨域请求。众所周知，在以前，跨域可以采用代理、JSONP等方式，而在Modern浏览器面前，这些终将成为过去式，因为有了CORS。
cors：简单请求
HTTP方法是以下之一： HEAD GET POST
HTTP头信息不超出以下几种字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type，但仅能是下列之一
　application/x-www-form-urlencoded
　multipart/form-data
　text/plain
简单请求的发送从代码上来看和普通的XHR没太大区别，但是HTTP头当中要求总是包含一个域（Origin）的信息。该域包含协议名、地址以及一个可选的端口。不过这一项实际上由浏览器代为发送，并不是开发者代码可以触及到的
简单请求的部分响应头及解释如下：

如果仅仅是简单请求，那么即便不用CORS也没有什么大不了，但CORS的复杂请求就令CORS显得更加有用了。简单来说，任何不满足上述简单请求要求的请求，都属于复杂请求。比如说你需要发送PUT、DELETE等HTTP动作，或者发送Content-Type: application/json的内容。

复杂请求表面上看起来和简单请求使用上差不多，但实际上浏览器发送了不止一个请求。其中最先发送的是一种"预请求"，此时作为服务端，也需要返回"预回应"作为响应。预请求实际上是对服务端的一种权限请求，只有当预请求成功返回，实际请求才开始执行。

预请求以OPTIONS形式发送，当中同样包含域，并且还包含了两项CORS特有的内容：

显而易见，这个预请求实际上就是在为之后的实际请求发送一个权限请求，在预回应返回的内容当中，服务端应当对这两项进行回复，以让浏览器确定请求是否能够成功完成。
复杂请求的部分响应头及解释如下：

一旦预回应如期而至，所请求的权限也都已满足，则实际请求开始发送。

通caniuse.com得知，目前大部分Modern浏览器已经支持完整的CORS，但IE直到IE11才完美支持，所以对于PC网站，还是建议采用其他解决方案，如果仅仅是移动端网站，大可放心使用。