React脚手架配置代理解决跨域问题

前言

我在本地运行一个react项目地址为http://localhost:3000我去请求接口地址为http://localhost:5000时由于同源策略的限制，就产生了跨域问题

解决方案一

代码语言：javascript复制

在项目根目录下找到package.json文件，添加如下配置

"proxy": "http://localhost:5000"

key为proxy,value为接口地址

在进行网络请求时请求了3000端口下不存在的资源时，就会将请求转发给5000端口

这种解决方案不适用于配置多个接口地址

解决方案二

1.在src目录下创建配置文件setupProxy.js

2.文件中进行以下配置(需要使用CommonJS语法)

代码语言：javascript复制

const proxy = require('http-proxy-middleware')


module.exports = function(app) {
  app.use(
    proxy('/api1', { //api1是需要转发的请求(带有/api1前缀的请求都会转发给5000)
      target: 'http://localhost:5000', //转发目标地址
      changeOrigin: true, 
      /*
 	     changeOrigin为true时，服务器收到请求头中的host值为5000
 	     changeOrigin为false时，服务器收到请求头中的host值为3000
	  */
      pathRewrite: {
        '^/api1': '' //去除请求前缀，将请求地址重写
        /*
		   重写地址原因
		     最开始请求接口路径是写成这样的axios.get('http://localhost:3000/student')
		     由于要走代理所以需要将地址改为axios.get('http://localhost:3000/api1/student')
		     如果不重写请求地址就会报404错误，因为服务器没有/api1/student这个路径
		     所以需要重写地址将/api1转换成空字符串，这样路径就是正确的
		*/
      }
    })
  )
}

代码语言：javascript复制

这种方法可以配置多个代理app.use接收多个参数，也可以灵活的控制请求是否走代理

后言

文中如有错误，欢迎在评论区指证

http

0 人点赞