react 項目中在開發時跨域問題的解決

一、方案一

1. 在使用 create-react-app 腳手架創建 react 項目的時候，在開發時進行接口訪問的時候，會出現跨域問題。
2. 解決方法是在 package.json 文件中增加如下配置，如下所示：

   "proxy": "http://localhost:5000"  // 配置你要請求的服務器地址
   

3. 這一種方法只針對於低版本的，create-react-app 的版本低於 2.0 的時候可以在 package.json 增加 proxy 配置，proxy 可以是 object 類型。

二、方案二

1. 在使用 create-react-app 腳手架創建 react 項目的時候，在開發時進行接口訪問的時候，會出現跨域問題。
2. 解決方法是在 package.json 文件中增加如下配置，配置多個代理。target 是目標服務器；changeOrigin 是默認 false ，是否需要改變原始主機頭爲目標 URL；secure 是如果是 https 接口 需要配置這個參數爲 true；pathRewrite 是重寫請求，比如我們源訪問的是 api，那麼請求會被解析爲 /，如下所示：

  "proxy": {
    "/data": {
      "target": "http://localhost",
      "changeOrigin": true,
      "pathRewrite": {"^/api" : "/"}
    },
    "/rest": {
      "target": "http://localhost/rest",
      "changeOrigin": true,
      "pathRewrite": {"^/api" : "/"}
    }
  }

3. 在運行後，會報錯，提示只支持 string 類型，不支持 object，也同意是隻支持低版本的。
4. 對此，解決辦法是降級，需要刪除 node_module/react-scripts，然後執行 npm i [email protected] --save， 最後重啓服務即可由前端解決跨域問題。

三、方案三

1. 先下載 http-proxy-middleware，使用 http-proxy-middleware 解決跨域問題，通過 npm i http-proxy-middleware --save 命令下載 http-proxy-middleware。

2. 創建 src/setupProxy.js，代碼如下所示：

   const proxy = require("http-proxy-middleware");
   
   module.exports = function (app) {
   	// proxy第一個參數爲要代理的路由
       app.use(proxy("/data", {
           target: "http://localhost", //配置你要請求的服務器地址，代理後的請求網址
           pathRewrite: {'^/data': ''}, //路徑重寫
           changeOrigin: true, // 是否改變請求頭
       }))
       app.use(proxy("/rest", {
           target: "http://localhost/rest",
           pathRewrite: {'^/data': ''},
           changeOrigin: true,
       }))
   };
   

3. 通過 npm run eject 或者是 yarn eject 命令，讓 react 項目中的配置文件暴露出來。

4. 在暴露後的配置文件中，start.js 裏面做一下配置，如下所示：

     require('../src/setupProxy')(devServer);
   

5. 在 webpack.dev.conf.js 中的 devServer 項進行配置，webpack 文件是自己配置的， 沒有暴露 create-react-app 的 eject 文件，代碼如下所示：

     devServer: { // 配置webpack-dev-server， 在本地啓動一個服務器運行
       host: 'localhost', // 服務器的ip地址 希望服務器外可以訪問就設置 0.0.0.0
       port: 8088, // 端口
       open: true, // 自動打開頁面
       historyApiFallback: true,
       proxy: {
         "/v1": {
           "target": "https://www.google.com/",
           "changeOrigin": true
           }
       }
     },