跨域 webpack + vue-cil 中 proxyTable 處理跨域

博客地址：https://ainyi.com/27

 

跨域

瞭解同源政策：所謂"同源"指的是"三個相同"。

• 協議相同
• 域名相同
• 端口相同

解決跨域

1. jsonp 缺點：只能get請求 ，須要修改B網站的代碼
2. cors 這個方案缺點 是 ie6 7 兼容很差（卻是不見得要兼容）。須要B網站在響應中加頭
3. postMessage 缺點也是 ie6 7 兼容很差（卻是不見得要兼容）。須要修改B網站的代碼
4. iframe window.name 傳值得方式很巧妙，兼容性也很好。可是也是須要你能修改B網站代碼
5. 服務端主動請求B網站，兼容性好並且你客戶端的代碼仍是原來的ajax，缺點是感受很差。（服務器端是不存在跨域安全限制的）
6. 相似5 用nginx把B網站的數據url反向代理。

node， express 解決跨域

• 加上請求頭：

1 app.all('*', (req, res, next)=>{
2     res.header("Access-Control-Allow-Origin", "*");
3     res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
4     res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
5     res.header("X-Powered-By",' 3.2.1')
6 
7     if(req.method=="OPTIONS") res.send(200);/*讓options請求快速返回*/
8     else next();
9 });

 

重點說一下vue-cli處理跨域

• 先後端分離的項目，經常開發的時候，請求的接口地址存在跨域問題
• webpack 先後端分離開發接口調試解決方案，proxyTable解決方案
• 首先要在項目目錄中找到根目錄下config文件夾下的index.js文件。因爲咱們是在開發環境下使用，天然而然是要配置在dev裏面：

 1 port: 8080,
 2 proxyTable: {
 3   '/api': {
 4     target: 'http://www.ainyi.com',  // 目標接口域名
 5     changeOrigin: true,  // 是否跨域
 6     // secure: false,  // 若是是https接口，須要配置這個參數
 7     pathRewrite: {
 8       '^/api': ''   // 重寫接口，通常不更改
 9     }
10   },
11 },

 

• '/api' 爲匹配項，target 爲被請求的地址
• 以上代碼表示：只要是http://www.ainyi.com/api的接口，都將被本地8080端口的請求代理：

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

• 也就是說，想請求接口http://www.ainyi.com/api，就是經過http://localhost:8080/api代理訪問，就不會產生跨域。
• 這樣就不須要在axios配置axios.defaults.baseURL，全部接口都由本地代理了

 

博客地址：https://ainyi.com/27