react配置代理

土生土长的IU

已于 2023-02-23 14:11:24 修改

阅读量640

点赞数

分类专栏： React系列文章标签： react.js 前端

于 2023-02-23 13:55:18 首次发布

本文链接：https://blog.csdn.net/AIB_Kasic/article/details/129180169

版权

React系列专栏收录该内容

13 篇文章 1 订阅

订阅专栏

文章介绍了在React项目中处理跨域问题的两种方法：一种是在package.json中设置全局代理，另一种是创建setupProxy.js文件进行更灵活的多代理配置。通过http-proxy-middleware库，可以指定代理路径和目标URL，实现API请求的转发。

摘要由CSDN通过智能技术生成

react配置代理

react 配置代理有两种不同的方式

在 package.json 中配置全局代理，但是只能有一个代理
在src中新建一个 setupProxy.js 文件，脚手架会自动识别并代理，可以配置多个代理。

相关文件配置例子如下：

在package.json中配置

"proxy": "需要代理的域名",

在 setupProxy.js 中配置

const { createProxyMiddleware } = require('http-proxy-middleware')
module.exports = function (app) {
  app.use(
    createProxyMiddleware('/api', {// 使用 /api 前缀代理配置
      target: '需要代理的域名',// 跨域地址
      changeOrigin: true,//是否允许跨域
      pathRewrite: {
        '^/api': ''
      }
    }),
  )
}