配置proxy解決跨域問題

用一個最簡單的方法解決API資源請求跨域問題：http-proxy-middleware

http-proxy-middleware不需要自己安裝，在安裝webpack過程中，會自動依賴安裝到你的node_modules文件夾下，如果你發現沒有，那么請自行安裝

npm install --save-dev http-proxy-middleware

1、前端部署了nodejs服務器，采用app.listen()啟動前端服務器，那么你只需要在你的js中添加下面幾行代碼即可

假設你的前端服務器js文件叫做server.js

//導入proxy
var proxy = require('http-proxy-middleware')
 
//context可以是單個字符串，也可以是多個字符串數組，分別對應你需要代理的api,星號（*）表示匹配當前路徑下面的所有api
const context = [`/login`, `/admin/*`]
 
//options可選的配置參數請自行看readme.md文檔，通常只需要配置target，也就是你的api所屬的域名。
const options = {
    target: 'http://www.xxx.com',
    changeOrigin: true
}
 
//將options對象用proxy封裝起來，作為參數傳遞
const apiProxy = proxy(options)
 
//現在你只需要執行這一行代碼，當你訪問需要跨域的api資源時，就可以成功訪問到了。
app.use(context, apiProxy)

2、你可能沒有前端node服務器，但是你用來webpack的devServer來啟動前端項目，這個時候的配置跟上面類似。

(1)、在你的webpack.config.js里面添加proxy配置。

//導入proxy
    var proxy = require('http-proxy-middleware')
    
    //context可以是單個字符串，也可以是多個字符串數組，分別對應你需要代理的api,星號（*）表示匹配當前路徑下面的所有api
    const context = [`/login`, `/admin/*`]
    
    module.exports = {
        devServer: {
           host: 'localhost',
           port: '3011',
           proxy: [
               {
                    context: context,
                    target: 'https://www.xxx.com',
                    secure: false
              }
           ]
        }
    }

 

 

（2）、Umi配置

配置文檔:https://umijs.org/zh/guide/config.html

解決跨域需要在webpack配置proxy，而umi沒有weppack.config.js

是因為umi將webpack配置保存在.umirc.js的配置文件中。
所以我們需要在.umirc.js文件加上（或者修改target路徑）

在.umirc.js文件加上：

"proxy": {
        "/api": {   //代理的api，要和nginx配置的一直
            "target": "http://192.168.1.100:5000"
            "changeOrigin": true,
            "pathRewrite": function (path, req) {
                // 實用其他ip打開下面
                //  path = path.split('/');
                //  path[2] = 'default';
                //  return path.join('/');
                //   支線代碼

                //  if (IS_DEBUG)
                //      path = path.replace('urrm', 'default');
                return path;
            }
        }

    },

或者如果創建多個域

 "proxy": {
    "/api/RoomApi": {
      "target": "http://open.douyucdn.cn",
      "changeOrigin":true
    },
    "/api/v1":{
      "target":"http://capi.douyucdn.cn",
      "changeOrigin":true
    }
  }