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

一、问题描述：

控制台报错，出现跨域问题

二、解决方案

配置代理：
第一种配置方式：

在package.json中追加如下配置

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

说明：

优点：配置简单，前端请求资源时可以不加任何前缀。
缺点：不能配置多个代理。
工作方式：上述方式配置代理，当请求了3000不存在的资源时，那么该请求会转发给5000 （优先匹配前端资源）

第二种配置方式：

第一步：创建代理配置文件

在src下创建配置文件：src/setupProxy.js

编写setupProxy.js配置具体代理规则：

const proxy = require('http-proxy-middleware')module.exports = function(app) {app.use(proxy('/api1', {  //api1是需要转发的请求(所有带有/api1前缀的请求都会转发给5000)target: 'http://localhost:5000', //配置转发目标地址(能返回数据的服务器地址)changeOrigin: true, //控制服务器接收到的请求头中host字段的值/*changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:3000changeOrigin默认值为false，但我们一般将changeOrigin值设为true*/pathRewrite: {'^/api1': ''} //去除请求前缀，保证交给后台服务器的是正常请求地址(必须配置)}),proxy('/api2', { target: 'http://localhost:5001',changeOrigin: true,pathRewrite: {'^/api2': ''}}))
}

说明：

优点：可以配置多个代理，可以灵活的控制请求是否走代理。
缺点：配置繁琐，前端请求资源时必须加前缀。

changeOrigin：控制服务器收到的请求头中Host字段的值

pathRewrite：重写请求路径

react脚手架配置代理解决跨域问题相关推荐

【react】使用代理解决跨域问题
[react]使用代理解决跨域问题参考文章: (1)[react]使用代理解决跨域问题 (2)https://www.cnblogs.com/guanpingping/p/10344197.html ...
No ‘Access-Control-Allow-Origin‘ header is present on the requested resource Vue配置代理解决跨域问题
前言在进行web开发进行数据请求的时候常常会遇到跨域问题导致无法请求数据. 如果采用如下方法向http://localhost:4000服务器发送getStudents进行接口数据请求,在后端没有处 ...
vue cli配置代理解决跨域问题
内容跨域问题解决跨域问题 vue cli配置代理跨域问题是由于违背了同源策略,同源策略规定了协议名.主机名.端口号必须一致我们目前所处的位置是http localhost 8080,我们想向 ...
nginx 代理解决跨域问题
前言可能在某些时候我们的前端项目需要访问一些外部的接口,比如Apollo等,而直接使用axios发送请求的话,会报跨域的错误,具体什么是跨域这里就不啰嗦了,如下图. 这个接口地址当然是正确的,可以放 ...
reactjs脚手架配置http-proxy-middleware代理解决跨域问题
reactjs脚手架配置http-proxy-middleware代理解决跨域问题
通过nginx反向代理解决跨域
先写一个发送跨域请求的页面index.html <html> <head><title></title> </head> <body& ...
Nginx反向代理解决跨域问题（个人学习总结）
一.理解Nginx Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,在BSD-like 协议下发行.其特点是占有内存少,并发能力强,事实上nginx的并 ...
Nginx 方向代理解决跨域问题-2
概述在浏览器端进行 Ajax 请求时会出现跨域问题,那么什么是跨域,如何解决跨域呢?先看浏览器端出现跨域问题的现象,如下图所示什么是跨域问题? 跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览 ...
nginx正向代理解决跨域问题
原理为了更好的理解nginx解决跨域的原理,首先来了解一下跨域是怎么样产生的. 因为浏览器的同源政策,就会产生跨域.比如说发送的异步请求是不同的两个源,就比如是不同的的两个端口或者不同的两个协议或者 ...

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

一、问题描述：

二、解决方案

react脚手架配置代理解决跨域问题相关推荐

最新文章

热门文章