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

冬懂懂动

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

阅读量1k

点赞数 1

分类专栏：工作项目经验汇总文章标签： 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需求。

摘要由CSDN通过智能技术生成

请求代理

为了方便调试，通常在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元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

冬懂懂动

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

react代理的几种方案

zlzbt

03-13

422

更改proxy文件发现不生效的话一定要重启

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

weixin_44892714的博客

10-16

661

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配置环境变量

博哥的二进制世界

10-14

2014

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项目搭建环境变量，适应不同环境需求

janyxh的博客

12-24

2704

一.对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

180

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...

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

zlq_CSDN的博客

05-29

916

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

create-react-app项目配置

kmz的博客

02-26

414

【React】—create-react-app项目配置一、react-app-rewired && customize-cra react-app-rewired是react社区开源的一个修改CRA配置的工具，例如扩展Create React App的Webpack配置，而customize-cra提供了一组用于自定义利用react-app-rewired核心功能的Create...

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

a1v0id的博客

07-12

366

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

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

m0_48164934的博客

04-07

1258

小景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 的Webpack4配置高级进阶

我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。

12-10

1474

React 框架搭建 Creact React App(CRA)是创建React应用的一个构建脚本，并不处理后端逻辑及数据库，它与其他构建脚本不同的一点就是，它使用了 Babel 和 Webpack 这样的构建工具，使开发者不用单独去配置这些工具，从而降低了开发人员的学习难度。但对于一些高阶的开发人员，想要对Webpack做一些修改，包括对less、跨域访问的支持以及antd的配置等，下面就是我...

cra配置代理

Suk__的博客

07-27

804

在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

294

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代理设置

蛐蛐的博客

02-13

539

源码：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:

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

weixin_30596735的博客

08-09

164

此方法可以在不暴露配置的情况下直接设置代理，非常便捷在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

2540

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

create-react-app配置代理方法

sikies的博客

05-29

1429

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

3199

参考：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的解决办法