react跨域

最新推荐文章于 2024-04-19 15:44:49 发布

置顶 helloworld963

最新推荐文章于 2024-04-19 15:44:49 发布

阅读量198

点赞数

分类专栏：工作相关文章标签： javascript node.js reactjs

本文链接：https://blog.csdn.net/helloworld963/article/details/117923102

版权

工作相关专栏收录该内容

4 篇文章

订阅专栏

本文详细讲解了如何在React项目中通过设置setupProxy.js来配置代理，避免CORS问题，包括安装http-proxy-middleware、配置target、验证代理、URL处理及后端接口测试等关键步骤。

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

一.react跨域

官网链接：https://create-react-app.dev/docs/proxying-api-requests-in-development/

现在市面上的文档都是配置src/setupProxy.js，来源就是官网。

1.npm或cnpm install http-proxy-middleware --save

2.src/setupProxy.js配置

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

module.exports = function (app) {
    app.use(
        '/api',
        createProxyMiddleware({target: 'https://www.baidu.com/abc/def/', changeOrigin: true,pathRewrite: {'^/api': ''}}))
}

解释：将localhost:3000（或其他端口）/api/xxx的请求代理为https://www.baidu.com/abc/def/xxx

这样域名和端口与请求的url一致就不存在cors问题。

注意1.检验代理配置成功没有，可以将/api换成/，代理所有请求。

2.请求的url前不加baseUrl，这样会默认加localhost：3000，然后走代理流程。