React配置代理proxy解决跨域问题

最新推荐文章于 2024-07-22 22:06:07 发布

重名8080

最新推荐文章于 2024-07-22 22:06:07 发布

阅读量730

点赞数

文章标签： vue js python java javascript

本文链接：https://blog.csdn.net/weixin_55560445/article/details/114419984

版权

一、在package.json中直接设置proxy

和Vue不同，React是在package.json文件中使用proxy配置

注意：

create-react-app脚手架低于2.0版本时候，可以使用对象类型

"proxy":{
   "/api/**":{
      "target":"http://192.168.8.134:8080",
      "changeOrigin": true
    }
}

2.0版本以上只能配置string类型，否则会报错，如下图：

正确应该这样：

"proxy": "http://192.168.8.134:8080"

由于package.json中，只能给proxy设置字符串；这样导致代理只能配置一个，想要配置多个代理就不行了。

二、利用middleware中间件的方式设置proxy

首先，安装 middleware

npm install http-proxy-middleware --save
//或
yarn add http-proxy-middleware --save

然后，src下新建一个setupProxy.js文件，加入以下代码：

原来版本配置：

const proxy = require("http-proxy-middleware");
 
module.exports = function(app) {
  app.use(
    proxy("/api/**", {
      target: "http://192.168.8.134:8080",//跨域地址
      changeOrigin: true
    })
  );
};

新版本会报错：proxy is not a function

解决：

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

module.exports = function (app) {
  app.use(createProxyMiddleware('/api', {
    target: 'http://192.168.8.134:8080',//跨域地址
    secure: false,
    changeOrigin: true,
    pathRewrite: {
      "^/api": "/api"
    }
  }))
}

最后运行项目就ok了