vue实现跨域

error.png
在请求的资源上没有“访问控制允许源”标头。因此，“http://LoalHoal:8081”是不允许访问的。
出现这个报错就说明，浏览器限制了跨域，需要设置跨域

一、后台更改header

header('Access-Control-Allow-Origin:*');//允许所有来源访问 
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式 

二、使用JQuery提供的jsonp需要vue中引入jquery，不是今天讲的重点

methods: { 
  getData () { 
    var that = this 
    $.ajax({ 
      url: 'yoururl', 
      type: 'GET', 
      dataType: 'JSONP', 
      success: function (res) { 
        that.data = res.data;
      } 
    }) 
  } 
}  

三、使用vue-cli脚手架搭建项目时候的proxyTable解决跨域

在config目录下的index.js的proxyTable配置：
第一种：

proxyTable: {
        '/api': {  //使用"/api"来代替"http://v.juhe.cn/toutiao/index" 
            target: 'http://v.juhe.cn/toutiao/index', //源地址 
            changeOrigin: true, //改变源 
            pathRewrite: { 
              '^/api': '' //路径重写 
              } 
          }
    },

this.axios.post("/api?type=keji&key=yourkey").then(res => {
    console.log("api:"+res);
    this.kjnews = res.data.result.data;
});

注意：路径重写后面是空的不然请求不成功，最后配置完之后还要npm run dev重启一下