react使用webpack配置跨域

环境：node 18.19.0 、webpack：5.64.4

运行 npm run eject 导出所有配置

找到 webpackDevServer.config.js 文件添加代码

重新启动项目 npm start

proxy:{
  '/api':{ 
    target: 'http://localhost:7001/api',
    ws:true,
    changeOrigin: true,
    pathRewrite: {'^/api':''}
  }
},

• '/api':

  • 这是一个路径前缀，表示所有以 /api 开头的请求都将被代理。
  • 例如，如果你的前端代码中有一个请求 fetch('/api/users')，那么这个请求会被代理到目标服务器。

• target: 'http://localhost:7001/api':

  • target 指定了代理的目标服务器地址。
  • 在这个例子中，所有以 /api 开头的请求将被转发到 http://localhost:7001/api。
  • 例如，fetch('/api/users') 会被代理到 http://localhost:7001/api/users。

• ws: true:

  • ws 选项用于启用 WebSocket 代理。
  • 如果你的应用需要使用 WebSocket，这个选项设置为 true 将允许代理 WebSocket 请求。

• changeOrigin: true:

  • changeOrigin 选项用于更改请求的源头（Origin）。
  • 当 true 时，代理服务器会将请求头中的 Host 字段更改为目标地址。
  • 这在某些情况下（如目标服务器要求特定的来源）非常有用。

• pathRewrite: {'^/api': ''}:

  • pathRewrite 选项用于重写请求路径。
  • 在这个例子中，所有以 /api 开头的路径将被重写为空字符串（即去掉 /api 前缀）。
  • 例如，fetch('/api/users') 会被重写为请求 http://localhost:7001/api/users。