vue 使用axios 出现跨域请求的两种解决方法

最近在使用vue axios发送请求，结果出现跨域问题，网上查了好多，发现有好几种结局方案。
1：服务器端设置跨域
header(“Access-Control-Allow-Origin:*”);
header(“Access-Control-Allow-Headers:content-type”);
header(“Access-Control-Request-Method:GET,POST”);
2：可以自己设置一个代理服务器，使用proxyTable 我比较推荐这种方法。
首先在config/index.js 里面找到proxyTable ：{} ，然后在里面加入

"/api":{

            target: 'http://192.168.3.6:7777',

            changeOrigin: true,

            pathRewrite:{

            '^/api':''

            }

        }

 
注意这里面 /api是你自定义的，写成什么都可以。

target 设置你调用的接口域名和端口号。

这里理解成用‘^/api’代替target里面的地址，后面组件中我们调接口时直接用api代替 。

比如我要调用’http://47.104.218.122:8087/dictionaryType‘，直接写‘/api/dictionaryType’即可。
然后我们可以在main.js设置一个基础路径，这样你调用接口的时候可以不写api,直接写/接口名称即可。

在main.js 设置 axios.defaults.baseURL=”/api”;
然后掉接口的时候可以直接写let _url4=”/dictionaryTypes”;这样就比较省事。

this.$http.get("/goods/home").then((res) => {

         console.log(res);

 })

################修改了配置文件一定要重启项目###########

 

问题：Firebug: 已拦截跨源请求：同源策略禁止读取位于XXX的远程资源。（原因：CORS 头缺少 'Access-Control-Allow-

 

第一种，就是在被请求的程序中添加HTTP头，即CORS跨域（跨域资源共享，Cross-Origin Resource Sharing）

如： Response.Headers.Add("Access-Control-Allow-Origin", "*");
// JSON
{
  'Access-Control-Allow-Origin': '*', 
}
// HTML
<meta http-equiv="Access-Control-Allow-Origin" content="*">
// PHP
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");

添加此段代码的目的很简单，也就是告诉浏览器，这个资源是运行远程所有域名访问的。当然，此处的也可以替换为指定的域名，出于安全考虑，建议将替换成指定的域名。 
由于IE10以下浏览器不支持CORS，所以目前在国内CORS并不是主流的跨域解决方案，但是随着windows 10的发布，IE的逐渐衰落，可以预见，在不远的将来CORS将成为跨域的标准解决方案。

第二种，就是在被请求的服务器上，添加HTTP响应头。在这里，我们就以IIS6.0为例：

 

//在被请求的网站上，设置HTTP头，添加
"Access-Control-Allow-Origin:*" //值为*或指定的域名。