React的跨域解决问题

约定不等于承诺〃 2022-10-27 15:58 8阅读 0赞

## React的跨域解决问题 ##

**第一种方法**  
在`package.json`中的  
![代理配置][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODI1NTkxNw_size_16_color_FFFFFF_t_70]

> 本来的端口号在自己本身没有的路径请求全部都发送给了你代理的端口号,比如说你请求index.html 首页你自己是有的所以返回的是是自己的,当你请求index2.html 自己没有,所以还是发送给代理

**第二种方法**

> 不在package.json里面配置,在src 下面新建一个文件setupProxy.js 文件名不能改,因为React会自动查找配置

#### setupProxy.js ####

const proxy = require('http-proxy-middleware') //引入这个库这个库React里面有所以不用下,直接饮用
    
    module.exports = function(app){ 
    	app.use(
    		//上下两个代理对比
    		proxy('/api1',{  //遇见/api1前缀的请求，就会触发该代理配置 
    			//axios的url应该是"http://localhost:3000/api1/某某地址 通过3000端口转向5000 
    			//同理输入http://localhost:3000/api1/某某地址 通过3000转向5001
    			target:'http://localhost:5000', //请求转发给谁
    			changeOrigin:true,
    			//控制服务器收到的请求头中Host的值,默认是false,输出的Host请求头是localhost:3000,true的话就是localhost:5000
    			pathRewrite:{ '^/api1':''} //重写请求路径(必须)
    			//如果不写就变成 http://localhost:5000/api1/某某地址 ,因此把api1换成空
    		}),
    		proxy('/api2',{ 
    			target:'http://localhost:5001',
    			changeOrigin:true,
    			pathRewrite:{ '^/api2':''}
    		}),
    	)
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODI1NTkxNw_size_16_color_FFFFFF_t_70]: /images/20221024/95eed95644d94133916ef9ce7314342f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，8人围观）

还没有评论，来说两句吧...

相关阅读

相关【跨域】如何解决跨域问题

同源策略同源相同协议+相同域名+相同端口内容 [浏览器的同源策略 - Web 安全 | MDN (mozilla.org)][- Web _ _

超、凢脫俗/ 2024年03月16日 13:32/ 0 赞/ 124 阅读

相关 React 开发模式解决跨域问题

package.json 文件下新增 ![2020072817414341.png][] Fetch请求接口时不需要添加接口域名。 [2020072817414341.

比眉伴天荒/ 2023年03月02日 10:17/ 0 赞/ 9 阅读

相关 React的跨域解决问题

React的跨域解决问题第一种方法在`package.json`中的 ![代理配置][watermark_type_ZmFuZ3poZW5naGVpdGk_s

约定不等于承诺〃/ 2022年10月27日 15:58/ 0 赞/ 9 阅读

相关 react+spring 记录跨域问题的解决方法

react+spring 记录跨域问题的解决方法参考文章： [（1）react+spring 记录跨域问题的解决方法][1_react_spring] （2）https

小灰灰/ 2022年09月10日 05:11/ 0 赞/ 32 阅读

相关 React Axios 请求解决跨域问题

网上看了很多的方案，但是不知道为什么，作为初学者，对react不太清楚的话，解决跨域还是有很多的问题。这篇博客针对小白，第一次调试react 跨域问题，甚至第一次使用Axios

秒速五厘米/ 2022年09月10日 02:29/ 0 赞/ 341 阅读

相关解决跨域问题

解决跨域问题这个问题面试经常问，可是每次看完只会就不太记得，因此在这里记录一下，方便以后工（跳）作（槽）查看。 -------------------- 什么是跨域

比眉伴天荒/ 2022年09月08日 11:46/ 0 赞/ 350 阅读

相关解决跨域问题

解决跨域问题一、跨域问题的产生的原因浏览器安全问题：浏览器的同源策略是浏览器为安全性考虑实施的非常重要的安全策略。从一个域上加载的脚本不允许访问另外一个域的文档

「爱情、让人受尽委屈。」/ 2022年09月04日 01:45/ 0 赞/ 314 阅读

相关 React代理请求解决跨域问题

假设下面的常量存放的地址是我们请求的地址 const endPointURI = ‘[https://08ad1pao69.execute-api.us-east-1.am

绝地灬酷狼/ 2022年04月24日 16:30/ 0 赞/ 348 阅读

相关跨域问题解决

springboot启动类添加 private CorsConfiguration buildConfig() { CorsConfigura

男娘i/ 2021年12月11日 12:57/ 0 赞/ 507 阅读

相关 React跨域

React跨域一.使用`http-proxy-middleware`中间件解决跨域问题 1.安装包： npm install http-proxy-middle

╰+哭是因爲堅強的太久メ/ 2021年12月03日 07:49/ 0 赞/ 135 阅读