React项目中请求跨域解决方法_postman 不跨域 react 跨域-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44071181/article/details/125080305

本文介绍了在React项目中遇到跨域问题的解决方法，通过使用http-proxy-middleware插件设置代理，避免前端请求跨域。详细步骤包括安装插件、创建setupProxy.js文件以及修改请求接口地址。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React项目中请求跨域解决方法

今天经理给我了一个React项目地址，让我拉下来并跑起来，拉下来运行起来后，发现所有的请求都失败了，并且都是由于跨域问题导致的。花了点时间，解决了这个问题，在这里记录一下解决方法。

我的情况

使用postman，对这些跨域的接口进行请求，是能够请求到数据的；
但是项目中请求就跨域了；
和后端同事确认后知道：后端服务是部署在线上了的（确认了服务IP地址和端口号是正确的）；
我这是为了将项目正常的跑起来看效果，所以不需要后端来解决跨域问题，前端临时解决就好；

解决方法

使用插件 http-proxy-middleware 来解决这个问题，yarn add http-proxy-middleware（我这里下载的是2.0.6版本，似乎版本不同会导致写法不同，建议使用我这个版本）；
在src目录下，新建一个名为 setupProxy.js 的文件。文件内容为(由于我是内网开发，无法粘贴复制出来，纯手敲，如果敲错了，还望指正)：

假设我项目中跨域报错的接口是(这是请求方式为 get 的接口)：http://192.xxx.x.xx:8000/product/attachment/fetch-all-list

const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
   app.use(createProxyMiddleware('/praduct', {
   	target: "http://192.xxx.x.xx:8000",  // 就是上面示例接口的 ip地址和端口号
   	changeOrign: true,
   	pathRewrite: { "^/praduct": "" }
   }))
}

修改你发起请求的那块代码，将请求的接口从上述的：http://192.xxx.x.xx:8000/product/attachment/fetch-all-list，改为：http://你前端项目启动的IP地址以及端口号/product/product/attachment/fetch-all-list（例如：http://192.168.0.60:3000/product/product/attachment/fetch-all-list）
注意：多了一个/product 这是我们上面代码中配置了的，不要漏掉了。
重启你的前端服务，重启后依然跨域，是因为，启动后是通过：http://loaclhost:3000访问的。改为：http://192.168.0.60:3000 就ok了