1. 开发环境跨域 正向代理

打开 node_modules/react-scripts/config/webpackDevServe.config.js，配置 proxy 属性

proxy: {
    "/api": {
      // 访问时遇到 /api开头的路径，代理到此服务下
      target: "http://localhost:3000", // 服务器跨域路径
      ws: true, // 允许 websockets协议
      changeOrigin: true, // 开启代理服务器，就会给你代理转发
      pathRewrite: {
        "^/api": "", // 将请求地址中的 /api 前缀替换成空的
        // 如果涉及很多微服务的情况，可以通过定义重写的路径来进行区分微服务
        // 有时我们需要连接本地相同路由下后端电脑的本地服务，
        //需要重写路径来指定访问后端的微服务,否则会影响到其他微服务
      },
    },
    "/dev-api": {
      target: "http://localhost:4000",
      ws: true,
      changeOrigin: true,
      pathRewrite: {
        "^/dev-api": "",
      },
    },
  },

2. 生产环境 nginx 反向代理 和 项目部署

1. 项目打包

开始打包

npm run build

如果出现空白页

在 package.json 中添加 "homepage": ".",

如果路由页面不正常显示

检查路由模式是否是 hash 模式，如果不是则需要配合后端进行相应处理

2. 启动本地服务

安装 serve 环境

npm install -g serve

启动服务，指定端口号

// 如果当前终端为当前项目，则执行
serve -s build -l 9001

// 如果当前终端为打包生成的 build 文件夹，则执行
serve -l 9001

测试

浏览器输入 http://localhost:9001

3. nginx 反向代理，解决跨域

1. 下载 nginx
   https://nginx.org/en/download.html （下载速度很快，压缩包）
   解压到指定位置，比如 C 盘根目录，并重命名为 nginx

2. 假如我们在此服务器上同时启动了后端服务是http://localhost:9000，那么 nginx 里我们需要进行如下配置
   使用 vscode或记事本 打开 nginx 下的 conf\nginx.conf 文件，增加一个 server 块，关闭 vscode或记事本

server {
        listen       9090;
        server_name  localhost;
        location / {
            proxy_pass http://localhost:9001;
        }
        location /api/ {
            proxy_pass http://localhost:9000;
            proxy_set_header Host $host;
        }
        error_page   500 502 503 504  /err.html;
    }

3. cmd 打开 nginx 根目录，输入 start nginx 启动 nginx 服务
4. 测试：在浏览器输入 http://localhost:9090 (注意：此端口是 listen 端口，非前端端口)
   如果页面接口信息可正常获取说明 nginx 反向代理成功