create-react-app跨域代理

最新推荐文章于 2023-10-17 11:13:29 发布
最新推荐文章于 2023-10-17 11:13:29 发布
阅读量435 收藏 2
点赞数
分类专栏： react 文章标签： reactjs javascript chrome npm postman
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41056833/article/details/113608142
版权

在用create-react-app创建react脚手架时经常需要跨域像服务端发送请求，这篇文章介绍一下怎么通过代理的方式实现跨域。

在src文件夹下创建一个文件setupProxy.js，配置以下代码：

createProxyMiddleware的第一个参数是/api，这里应用运行在localhost:3000，那么localhost:3000/api/xxxxxxxx这样的url就会匹配到代理规则，如果想把请求发送到4000端口，target就是localhost:4000（目标服务器），pathRewrite配置url重写规则，这里把'^/api'替换为空字符串，那么localhost:3000/api/xxxxxxxx就被代理为localhost:4000/xxxxxxxx，最终实现跨域

Gavell
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
create-react-app-esbuild:在您的create-react-app中使用esbuild进行更快的编译，开发和测试
05-13
:rocket: create-react-app-esbuild :rocket: 在您的使用可以更快地进行编译，开发和测试。特征在开发过程中用esbuild替换babel-loader 用esbuild替换babel-loader以加快构建时间用esbuild替换terser，以加快构建...
create-react-app脚手架配置代理跨域请求接口
骑着代码去流浪
01-28 1736
React配置代理跨域访问 React版本：17.0.2 例如后端接口地址为：http://localhost:4000/manager/register 那么前端react配置如下： 1，配置setupProxy.js 在src目录下新建setupProxy.js文件，注意不能用其他文件名字，如果需要配置多个服务器接口地址，多写几个createProxyMiddleware即可 const { createProxyMiddleware } = require("http-proxy-mid
React中配置代理服务器(两种方法)
m0_60237095的博客
11-14 3337
Vue 如果没有vue脚手架需先在终端中运行安装脚手架 npm i @vue/cli -g 使用vue脚手架创建项目 vue created vue_dome(项目名) 手动在项目根目录创建vue.config.js文件 # vue.config.js module.exports = { devServer: { host: 'localhost', port: 8080, proxy: { '/api': { target..
create-react-app跨域配置
WFL804203164的博客
12-22 1107
跨域配置 1.package.json配置 // 新版本中只能写这种 "proxy": "http://172.16.136.249:8080" // 新版本的react不支持这种写法 "proxy": { "/api/**": { "target": "http://172.16.136.249:8080", "changeOrigin": true } } 2.通过middleware中间件的方式设置proxy 需要使用middleware，通常来说cre
react-create-app创建的react项目跨域问题
weixin_43661375的博客
07-21 124
react项目跨域问题。
【react】创建启动react项目和跨域代理：
SunPeng的博客
07-06 630
【react】创建启动react项目和跨域代理：
create-react-redux-app：基于create-react-app的React样板
02-05
创建React Redux应用 该项目是通过。 该项目包括额外的redux软件包和改进的文件结构。...git clone [email protected]:YUzhva/create-react-redux-app.git NEW_PROJECT_NAME # with HTTPS git clone https://g
create-react-app安装出错问题解决方法
01-19
create-react-app慢的解决方法 在操作官方实例Create React App时,需要执行指令： create-react-app my-app 来创建一个新的React应用。由于某原因,在拉取各种资源时,往往会巨慢,一直卡在 fetchMetadata: sill ...
create-react-app构建项目慢的解决方法
01-19
create-react-app慢的解决方法 在操作官方实例Create React App时,需要执行指令： create-react-app my-app 来创建一个新的React应用。由于某原因,在拉取各种资源时,往往会巨慢,一直卡在 fetchMetadata: sill ...
详解使用create-react-app快速构建React开发环境
12-10
最近在折腾react开发，总结一个react环境...create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境。 create-react-app 自动创建的项目是基于 Webpack + ES6 。 执行以下命令创建项
http-proxy-middleware
热门推荐
weixin_42719656的博客
02-04 1万+
1、定义： 是一个代理中间件，用于转发请求，将客户端发送的请求数据转发到目标服务器，再将响应输送到客户端。 2、核心概念 如何配置一个代理中间件 1、createProxyMiddleware（[context，] config） context：匹配请求的路径 options：中间件配置 2、option 属性 代理事件 1、常用属性： target ：用于设定目标服务器的 host router： 根据客户端请求重新设定目标服务器的 host（这样，根据不同的请求，可以设定多个目标服务器）
React create-react-app 里配置代理（解决跨域）
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
10-17 2044
其实 cra里给了个简单的配置代理 就是在package.json里加上proxy就行了。修改时需要 npm start重新运行一下，要不然可能不生效。proxy只能以 http:// 或https://开头 否则会报：示例：比如后端给的完整地址如下：这一段是相同的地址（也就是所有接口都是这个前缀），根据你的接口来定。然后使用即可 比如 axios url直接请求就行代码如下：request就是axios 只是我又封装了一层。
React配置代理的5种方法
一步一个脚印，踏实努力，向着目标前进
08-26 2971
使用场景：适用于使用create-react-app创建的React项目，特别是小型项目或快速原型开发。优点：配置简单，无需额外安装依赖，适合快速开发和简单项目。缺点：功能相对较少，只能配置一个代理。使用场景：适用于需要更灵活的代理配置，可以根据需求配置多个代理的中等规模项目。优点：配置灵活，可以根据需求配置多个代理，支持更多的选项和自定义功能。缺点：需要额外安装依赖，相对于create-react-app的代理配置略复杂。
react开发环境代理配置
qq_35728142的博客
10-18 291
【代码】react开发环境代理配置。
create-react-app脚手架 - 跨域、反向代理
hahahhahahahha123456的博客
12-09 471
在做前后端分离的项目的时候，调用接口我们都会遇到跨域的问题。解决跨域问题可以后台设置cros(跨域资源共享)，如果前端解决的话可以使用代理，接下来一起来看一下create-react-app脚手架下如果配置 一、只代理一个 在package.json文件中增加如下配置： "proxy": "http://www.wyunfei.com" // 配置你要请求的服务器地址 结果...
create-react-app 配置代理
如故的博客
08-27 1204
create-react-app 配置代理 1、安装插件 http-proxy-middleware npm i http-proxy-middleware 2、在 src 目录下新建文件 setupProxy.js 文件 // 配置代理 - 用于联调 const { createProxyMiddleware } = require('http-proxy-middleware') console.log('PROXY: ', process.env.PROXY_ENV) module.exports
create-react-app配置代理
我不写文章，我只是文章的搬运工
02-28 1104
用create-react-app搭建最基本的脚手架，如果想配置代理，可以在src下面创建setupProxy.js ( 默认这个名字，可以打开webpack配置能看到 ) const { createProxyMiddleware } = require("http-proxy-middleware"); module.exports = function (app) { app.use( "/api", createProxyMiddleware({ target: "服
React 使用 Proxy 代理（create-react-app）
m0_64697285的博客
10-12 2367
proxy，默认为NULL，类型为URL，一个为了发送http请求的代理 在平时开发时，尤其前后端分离时，需要假数据来进行模拟请求，这个时候就需要。所以，可以在 /src/setupProxy.js 中配置。在新版本大于等于 1.0.0 时使用会出现如下问题。package.json 中配置（不推荐）文件中使用，也就是说只在开发时使用。package.json 中配置。所以需要使用新版本的写法才可以。则经过代理后可以转为。则经过代理后可以转为。
create-react-app的dev环境跨域请求代理转发-环境变量配置
07-28 1008
create-react-app 请求代理 请求转发 环境变量控制 根据不同环境区分变量
create-react-app 安装vconsole
最新发布
01-13
根据提供的引用内容，可以通过以下步骤来演示如何在create-react-app项目中安装vconsole： 1. 首先，确保你已经在项目中安装了create-react-app。如果没有安装，可以使用以下命令进行全局安装： ```shell $ yarn ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值