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

一、在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了

发表评论

电子邮件地址不会被公开。 必填项已用*标注