webpack+vue-cil中proxyTable處理跨域的方法

更新時(shí)間：2018年07月20日 09:35:48 作者：筱月

這篇文章主要介紹了webpack+vue-cil中proxyTable處理跨域的方法,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

跨域

了解同源政策：所謂"同源"指的是"三個(gè)相同"。

協(xié)議相同
域名相同
端口相同

解決跨域

1.jsonp 缺點(diǎn)：只能get請(qǐng)求，需要修改B網(wǎng)站的代碼
2.cors 這個(gè)方案缺點(diǎn) 是 ie6 7 兼容不好（倒是不見得要兼容）。需要B網(wǎng)站在響應(yīng)中加頭
3.postMessage 缺點(diǎn)也是 ie6 7 兼容不好（倒是不見得要兼容）。需要修改B網(wǎng)站的代碼
4.iframe window.name 傳值得方式很巧妙，兼容性也很好。但是也是需要你能修改B網(wǎng)站代碼
5.服務(wù)端主動(dòng)請(qǐng)求B網(wǎng)站，兼容性好而且你客戶端的代碼還是原來的ajax，缺點(diǎn)是感覺不好。（服務(wù)器端是不存在跨域安全限制的）
6.類似5 用nginx把B網(wǎng)站的數(shù)據(jù)url反向代理。

node， express 解決跨域

加上請(qǐng)求頭：

app.all('*', (req, res, next)=>{
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
  res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
  res.header("X-Powered-By",' 3.2.1')

  if(req.method=="OPTIONS") res.send(200);/*讓options請(qǐng)求快速返回*/
  else next();
});

重點(diǎn)說一下vue-cli處理跨域

前后端分離的項(xiàng)目，常常開發(fā)的時(shí)候，請(qǐng)求的接口地址存在跨域問題
webpack 前后端分離開發(fā)接口調(diào)試解決方案，proxyTable解決方案
首先要在項(xiàng)目目錄中找到根目錄下config文件夾下的index.js文件。由于我們是在開發(fā)環(huán)境下使用，自然而然是要配置在dev里面：

port: 8080,
proxyTable: {
 '/api': {
  target: 'http://www.ainyi.com', // 目標(biāo)接口域名
  changeOrigin: true, // 是否跨域
  // secure: false, // 如果是https接口，需要配置這個(gè)參數(shù)
  pathRewrite: {
   '^/api': ''  // 重寫接口，一般不更改
  }
 },
},

'/api' 為匹配項(xiàng)，target 為被請(qǐng)求的地址

以上代碼表示：只要是http://www.ainyi.com/api的接口，都將被本地8080端口的請(qǐng)求代理：

http://localhost:8080/api ===> http://www.ainyi.com/api

也就是說，想請(qǐng)求接口http://www.ainyi.com/api，就是通過http://localhost:8080/api代理訪問，就不會(huì)產(chǎn)生跨域。

這樣就不需要在axios配置axios.defaults.baseURL，所有接口都由本地代理了

GitHub：https://github.com/Krryxa

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: