react 项目中在开发时跨域问题的解决

Dear 丶 2023-02-20 12:30 14阅读 0赞

#### 一、方案一 ####

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" : "/"}
        }
      }

1.  在运行后，会报错，提示只支持 `string` 类型，不支持 `object`，也同意是只支持低版本的。
2.  对此，解决办法是降级，需要删除 `node_module/react-scripts`，然后执行 `npm i react-scripts@1.1.1 --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
                }
            }
          },