前幾天做慕課網練手項目,跨域代理問題怎么業代理不上,於是查詢了下文檔,總結下
- 如果你的前端應用和后端 API 服務器沒有運行在同一個主機上,你需要在開發環境下將 API 請求代理到 API 服務器。
- 這個問題可以通過
vue.config.js
中的devServer.proxy
選項來配置。
1 module.exports = {
2 devServer: {
3 host: '0.0.0.0',
4 port: 8000,
5 open: true,
6 overlay: {
7 warnings: false,
8 errors: true
9 },
10 proxy: {
11 '/api': {
12 target: 'http://apis.imooc.com',// 要訪問的跨域的域名
13 changeOrigin: true, // //開啟代理:在本地會創建一個虛擬服務端,然后發送請求的數據,並同時接收請求的數據,這樣客戶端端和服務端進行數據的交互就不會有跨域問題
14 pathRewrite: { //// 思路是如果是開發環境,就給所有要代理的接口統一加上前綴,然后代理請求時再統一通過rewrite去掉
15 '^api': ''
16 }
17 }
18 }
19 }
20 }
更多詳細配置可以查詢 https://github.com/chimurai/http-proxy-middleware#proxycontext-config
本質就是node服務器轉發