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
           }
       }
     },