欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue項目中跨域問題解決方案

 更新時間：2018年06月05日 09:24:31   作者：常峻  
本文給大家介紹了vue項目中跨域問題的完美解決方案，通過更改header，使用http-proxy-middleware 代理解決（項目使用vue-cli腳手架搭建），具體內(nèi)容詳情大家跟隨腳本之家小編一起學(xué)習(xí)吧

方法

  • 后臺更改header
  • 使用http-proxy-middleware 代理解決（項目使用vue-cli腳手架搭建）
  • Jquery jsonp

后臺更改header

header('Access-Control-Allow-Origin:*');//允許所有來源訪問 
header('Access-Control-Allow-Method:POST,GET');//允許訪問的方式

使用http-proxy-middleware 代理解決（項目使用vue-cli腳手架搭建）

打開config/index.js,在proxyTable中添寫如下代碼：

proxyTable: { 
 '/api': { 
  target: '填寫請求源地址', //源地址 
  changeOrigin: true, //是否跨域
  pathRewrite: { 
   '^/api': '' //路徑重寫 
   } 
 } 
}

使用axios

 this.$axios.post("/api/地址",{
   發(fā)送的數(shù)據(jù)
  }).then(data=>{
   console.log(data);
  })

axios的配置（main.js）

axios.defaults.headers.post["Content-type"]="application/json";
Vue.prototype.$axios=axios;

使用ES6fetch請求

fetch("/api/test/testToken.php",{
   method:"post",
   headers:{
    "Content-type":"application/json",
   },
   body:JSON.stringify({發(fā)送數(shù)據(jù)})
  }).then(result=>{
   return result.json()
  }).then(data=>{
   console.log(data);
  })

使用jquery jsonp

methods: { 
 getData () { 
  var self = this 
  $.ajax({ 
   url: '地址', 
   type: 'GET', 
   dataType: 'JSONP', 
   success: function (res) { 
    self.data = res.data.slice(0, 3)
    self.opencode = res.data[0].opencode.split(',') 
   } 
  }) 
 } 
}

總結(jié)

以上所述是小編給大家介紹的Vue項目中跨域問題解決方案，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評論