vue實作跨域

在請求的資源上沒有“通路控制允許源”标頭。是以，“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

重新開機一下