create-react-app的dev环境跨域请求代理转发-环境变量配置

冬懂懂动

已于 2022-07-29 19:00:43 修改

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：工作项目经验汇总文章标签： react.js javascript 前端 vue 前端框架

于 2022-07-28 14:34:54 首次发布

本文链接：https://blog.csdn.net/q649780593/article/details/126033888

本文介绍了在create-react-app(CRA)的开发环境中解决跨域问题的方法，通过创建src/setupProxy.js文件并配置代理，将所有/api开头的请求转发到指定域名。同时，文章讲解了如何使用环境变量进行配置，包括在启动命令中添加环境变量，并利用cross-env设置运行环境，以适应不同环境的baseURL需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

请求代理

为了方便调试，通常在dev环境下调用服务端接口会有跨域问题，cra提供了比较方便的拓展方案
cra默认会读取src/setupProxy.js的导出对象作为拓展proxy的配置方案，要拓展的话需要：

src目录下新建setupProxy.js
安装http-proxy-middleware依赖，并在setupProxy.js插入下面内容

const {
   
   createProxyMiddleware} = require("http-proxy-middleware");

module.exports = function (app)

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

冬懂懂动

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

create-react-app源码解析之proxy代理设置

蛐蛐的博客

02-13

590

源码：create-react-app/WebpackDevServerUtils.js at main · facebook/create-react-app · GitHub 文档：Proxying API Requests in Development | Create React App 1.简介在开发时，如果要开发服务器将任何未知请求代理到开发中的 API 服务器请在package.json中添加一个proxy字段 "proxy": "http://localhost:

前端开发避坑指南：React 代理配置常见问题与解决方案

weixin_46560512的博客

05-13

1088

前端开发避坑指南：React 代理配置常见问题与解决方案一、为什么需要配置代理？二、使用 create-react-app 默认配置代理三、使用 http-proxy-middleware 配置复杂代理四、高级代理配置五、生产环境中的代理配置

参与评论您还未登录，请先登录后发表或查看评论

create-react-app配置环境变量

博哥的二进制世界

10-14

2111

create-react-app配置环境变量安装cross-env配置package.json命令创建.env ，.env.development ，.env.production ，.env.uat ，.env.sit，项目中获取当前环境变量 安装cross-env npm i cross-env -D 配置package.json命令 "scripts": { "serve": "cross-env REACT_APP_ENV=development node scripts/start.j

create-react-app环境变量配置 && vue-cli4

weixin_44892714的博客

10-16

707

create-react-app 主要：yarn add cross-env ，使用cross-env这个包官方文档 https://create-react-app.dev/docs/adding-custom-environment-variables/ 其他： https://segmentfault.com/a/1190000022871495 vue-cli 官方文档 https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC

为create-react-app项目搭建环境变量，适应不同环境需求

janyxh的博客

12-24

2794

一.对create-react-app 的默认配置进行自定义 1.选择安装 react-app-rewired $ yarn add react-app-rewired customize-cra 2.修改package.json文件 /* package.json */ "scripts": { - "start": "react-scripts start", + "start": ...

react多个网络请求_前端react：在create-react-app构建的工程中配置网络请求代理

weixin_39665787的博客

12-19

202

1、在终端terminal执行以下命令，进行react工程自动构建：npx create-react-app my-app2、在终端terminal执行以下命令,暴露项目的配置文件npm run eject注：若已有用create-react-app构建的react工程，无需执行步骤1和2；3、在scripts/start.js中有这么一句从package.json获取proxy配置的代码；图 1...

前端系列总结-框架篇（1）Create-React-App

a1v0id的博客

07-12

440

前端系列总结-框架篇（1）Create-React-Appcreate-react-app的介绍、安装和使用安装和使用项目的目录结构项目的个性化配置添加项目路径别名接口代理转发在HTML模板中动态插入js文件利用public静态目录插入项目中添加动态的js文件 create-react-app的介绍、安装和使用 create-react-app是React团队推出的一款用于生成react项目的脚手架工具，可以实现零配置开发react的单页面应用。安装和使用一般来说都是使用npm全局安装，前提条件是已经配

React基础-webpack+creact-react-app创建项目

weixin_41166682的博客

02-22

724

react-scripts: 脚手架为了让项目目录看起来干净一些，把webpack打包的规则及相关的插件/LOADER等都隐藏到了node_modules目录下，react-sctipts就是。安装脚手架：npm跑项目改为yarn跑项目：把node_modules和package-lock.json删掉，用yarn跑就行了。+脚手架：基于它创建项目，默认就把webpack的打包规则已经处理好了，把一些项目需要的基本文件也都创建好了。基于脚手架创建React工程化的项目。react: React框架的核心。

craco 配置 create-react-app 的开发环境以及部分webpack环境

m0_48164934的博客

04-07

1326

小景UU 使用 craco 配置 create-react-app 的开发环境,开放部分webpack配置 antd组件按需加载，支持less，支持类装饰器语法，支持webpack 别名并支持vscode 支持路径补全依赖版本可以根据自己配置修改或查阅相关文档配置步骤创建新项目使用 create-react-app 创建一个项目，这里我们命名为 my-project-name create-react-app my-project-name 进入项目，安装依赖 npm inst

create-react-app 迁移至vite

最新发布

07-03

迁移到Vite后，如何配置代理（proxy）来解决开发环境跨域问题？2.Vite在生产环境构建时有哪些优化？3.在Vite中如何配置别名（alias）？</think>### 将 Create React App 项目迁移到 Vite 的完整步骤 #### 1. **更新...

create-react-app 构建的项目中配置proxy

zlq_CSDN的博客

05-29

980

前言：目前项目开发中大都采用的是完全前后端分离开发模式，各自独立进行开发，虽然最后前后端都会部署到同一台服务器上，但在开发过程中前后需要进行联调，这个过程难免会遇到跨域问题。解决跨域问题：使用 react 脚手架 create-react-app 搭建react基础项目。运行 npm run eject 展开项目中的详细配置注意：项目中只能执行一次，展开后不可恢复；如果项目需要相关配置文件，建议刚开始执行。 create-react-app 版本低于 2.0 时，可以直接在 packa

cra配置代理

Suk__的博客

07-27

873

在package.json中配置一个字段: "proxy":"服务器接口的地址+端口" 以上配置会先走本地的public文件夹,本地没有找到才会找服务器接口复杂配置: 在src下创建一个setupProxy.js编写代理规则信息 const proxy = require('http-proxy-middleware') module.exports = function(app) { app.use( proxy('/api1', { //api1是需要转发的请求(所有带有

create-react-app 脚手架同源跨域配置proxy的方法

hy313161875的博客

04-20

351

1. 安装插件： yarn add http-proxy-middleware -g 2. 在'src'目录下新建'setupProxy.js'并写入：报错“proxy is not a function”，是因为版本问题 //http-proxy-middleware版本是1.*.* 上如下调用 const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function (app) {

create-react-app不暴露配置设置proxy代理

weixin_30596735的博客

08-09

185

此方法可以在不暴露配置的情况下直接设置代理，非常便捷在package.json里添加 "proxy":"http://institute.dljy.lzdev" 请求时，例如请求地址为http://institute.dljy.lzdev/api/activity_auth/join 转载于:https://www.cnblogs.com/maopixin/p/944964...

React 使用 Proxy 代理（create-react-app）

m0_64697285的博客

10-12

2724

proxy，默认为NULL，类型为URL，一个为了发送http请求的代理在平时开发时，尤其前后端分离时，需要假数据来进行模拟请求，这个时候就需要。所以，可以在 /src/setupProxy.js 中配置。在新版本大于等于 1.0.0 时使用会出现如下问题。package.json 中配置（不推荐）文件中使用，也就是说只在开发时使用。package.json 中配置。所以需要使用新版本的写法才可以。则经过代理后可以转为。则经过代理后可以转为。

【React】react-app-env.d.ts 文件

小秀的博客

11-01

730

提供的全局类型定义，这些类型定义扩展了 TypeScript 编译器对 React 项目的支持，使得项目能够识别和使用 React 的一些特有全局变量。：默认情况下，TypeScript 对导入的静态资源（例如图片、CSS 文件等）并没有类型支持。：该文件确保 TypeScript 了解当前项目的 JSX 运行环境，并为。文件包含静态资源的类型声明，允许项目中直接导入这些资源，例如。文件的作用是为 React 应用中的全局变量和类型进行声明。生成的 TypeScript 项目模板中，

create-react-app配置代理方法

sikies的博客

05-29

1486

creat-react-app下配置代理的方法：安装http-proxy-middleware $ npm install http-proxy-middleware --save 在根目录的src下创建src/setupProxy.js文件，然后写入下边内容。 const proxy = require('http-proxy-middleware'); module.exports = function (app) { app.use( proxy('/api',{

create-react-app 创建react应用环境变量（env）配置

weixin_30600197的博客

06-20

3244

参考：https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables What other.envfiles can be used? Note: this feature isavailable withreact-scripts@1.0.0and higher...

使用react-create-app createProxy创建后端代理一直提示404的解决办法

anbang_li的博客

04-07

1273

使用文件名注意代理路径问题，可以联合后端响应一起调试。