react脚手架配置代理的实现

目录
  • 方法一
  • 方法二

方法一

在package.json 中追加如下配置

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

说明：

优点： 配置简单，前端请求资源时可以不加任何前缀。

缺点：不能配置多个代理

工作方式： 当请求了 3000 不存在的资源时，那么该请求会转发给5000（优先匹配前端资源）

方法二

创建代理配置文件，文件名为 setupProxy.js 名字不能改

在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:5000;
                changeOrigin 为 false 时，服务器收到的请求头中的 host 为; localhost:3000;
                changeOrigin默认为false,但是一般将 changeOrigin 值设置为 true
            */
            pathRewrite:{
                '^/api1':'' // 去除请求前缀，保证交给后台服务器的是正常的请求地址（必须配置）
            }
        }),
        proxy('/api2',{
            target: 'http://localhost:5001',
            changeOrigin: true,
            pathRewrite:{
                '^/api2':''
            }
        })
    ）
}

说明：

优点：可以配置多个代理，可以灵活的控制请求是否走代理，

缺点： 配置繁琐，前端请求资源时必须加前缀

到此这篇关于react脚手架配置代理的实现的文章就介绍到这了,更多相关react脚手架配置代理内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • React大屏可视化脚手架教程示例

    目录 使用 create-react-app 初始化 引入 antd UI库 使用 craco 插件来自定义配置 自定义 antd 主题,使用 less 作为 css 预处理器 修改 craco.config.js 文件 craco-less .module.less 模拟vue组件中style的scope 功能 配置 craco.config.js 文件 以上操作版本记录 使用 create-react-app 初始化 # 使用了 create-react-app 的 typescript 模

  • 从零开始学习搭建React脚手架项目

    写在前面 准备学习一下react和webpack相关的东西,官方的脚手架看起来太繁琐,所以打算自己来搭建一个,参考了这个文档从零搭建React全家桶框架教程;步骤上都差不多 react和vue,angular一样也有脚手架.这大大方便了我们的开发.react的脚手架是create-react-app. 脚手架下载 使用npm下载create-react-app运行如下命令: npm install -g create-react-app 国内npm一般下载比较慢或者是常出现下载失败的情况,我们可

  • React脚手架搭建的学习

    React脚手架搭建的学习

    一.前端工程的复杂化 如果我们只是开发几个小的demo程序,那么永远不需要考虑一些复杂的问题: 比如目录结构如何组织划分:比如如何管理文件之间的相互依赖:比如如何管理第三方模块的依赖:比如项目发布前如何压缩.打包项目:等等- 现代的前端项目已经越来越复杂了: 不会再是在HTML中引入几个css文件,引入几个编写的js文件或者第三方的js文件这么简单: 比如css可能是使用less.sass等预处理器进行编写,我们需要将它们转成普通的css才能被浏览器解析: 比如JavaScript代码不再只是编

  • React Native 脚手架的基本使用详解

    React Native 脚手架的基本使用详解

    构建项目 在相应的路径下执行命令行:react-native init 项目名 (名称不可使用连接符等特殊字符,命名可以参考APP应用名称 比如 FaceBook) react-native --v //查看版本 react-native init demo --version 0.48.0//安装指定的版本 react-native init demo --verbose --version 0.48.0 //verbose是初始化的时候显示安装详情的,安装什么模块以及进度 npm view

  • react脚手架配置路径别名的方法

    文章写时react版本16.13.1 1输入命令 npm run eject 在项目根目录下生成config目录 2在confilg下打开webpack.config.js文件找到如下位置 alias: { // Support React Native Web // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/ 'react-native': 'reac

  • react脚手架配置代理的实现

    目录 方法一 方法二 方法一 在package.json 中追加如下配置 "proxy":"http://localhost:5000" 说明: 优点: 配置简单,前端请求资源时可以不加任何前缀. 缺点:不能配置多个代理 工作方式: 当请求了 3000 不存在的资源时,那么该请求会转发给5000(优先匹配前端资源) 方法二 创建代理配置文件,文件名为 setupProxy.js 名字不能改 在src下创建配置文件: src/setupProxy.js 编写setup

  • Vue 配置代理详情

    Vue 配置代理详情

    目录 方式一 方式二 vue 脚手架配置代理总结 方式一 首先安装 axios:npm i axios 修改 App.vue <template>   <div>     <button @click="getBookInfo">获取书籍信息</button>   </div> </template> <script> import axios from "axios" export

  • react脚手架如何配置less和ant按需加载的方法步骤

    前言 create-react-app是由React官方提供并推荐使用构建新的React单页面应用程序的最佳方式,其构建的项目默认是不支持less的,需要我们手动集成 一.react脚手架搭建 1.先全局安装create-react-app(提前需要安装node) npm install -g create-react-app 2.然后通过create-react-app创建项目my-app create-react-app my-app 3.最后通过cd进入项目文件夹并启动 cd my-app

  • webpack5搭建一个简易的react脚手架项目实践

    webpack5搭建一个简易的react脚手架项目实践

    目录 项目初始化 安装webpack 搭建脚手架目录结构 开启本地服务 配置css&sass 安装react的相关依赖 项目添加热更新 生产环境打包 总结 项目初始化 首先我们创建一个目录,初始化 npm,得到一个package.json文件. mkdir react-cli cd react-cli npm init -y 安装webpack 安装webpack和相关依赖.webpack-dev-server是开启开发环境的服务,webpack-merge是合并公共配置文件. npm inst

  • 详解基于angular-cli配置代理解决跨域请求问题

    详解基于angular-cli配置代理解决跨域请求问题

    1.跨域请求产生 随着不同终端(Pad/Mobile/PC)的兴起,对开发人员的要求越来越高,纯浏览器端的响应式已经不能满足用户体验的高要求,我们往往需要针对不同的终端开发定制的版本.为了提升开发效率,前后端分离的需求越来越被重视,后端负责业务/数据接口,前端负责展现/交互逻辑,同一份数据接口,我们可以定制开发多个版本. 而前后端分离带来的一个问题就是前端web部署的服务器和后端提供服务的服务器大概率不在同一个域名下,进而会产生跨域问题. 2.通用解决方案 如果浏览器支持HTML5,那么就可以一

  • react路由配置方式详解

    react路由配置方式详解

    本文介绍了react路由配置,最近刚开始学,分享给大家,顺便给自己留个笔记. 包含了LInk跳转以及js触发跳转并传参. 这是项目的目录结构,主要的代码都在src目录下,src下面新建一个containers文件夹放我们的一些组件,router文件夹是配置路由用的. 按照顺序来写:detail文件夹下的代码 import React from 'react' class Detail extends React.Component { render() { return ( <p>Detail

  • React降级配置及Ant Design配置详解

    React降级配置及Ant Design配置详解

    React降级配置 1.使用create-react-app创建一个目录 2.查看当前目录下的package.json文件中的配置 注意: 可以看到当前的react-scripts是2.1.2版本,且只兼容IE11以上,所以为了更好地兼容IE浏览器,我们需要做降级配置 3.进入目录,在master分支下进行配置(如果创建好的目录中没有.git文件,使用git init初始化目录) 注意: 之所以要在master分支下进行配置,是为了在下文中运行 npm run eject 4.将原来的react

  • Jmeter配置代理实现录制过程图解

    1.谷歌浏览器配置管理 在代理服务器中,按上图进行设置,可以把localhost换成 127.0.0.1 ,端口换成你想设置的,但是不要与别的端口进行冲突,一般四位数的端口冲突比较少 2.Jmeter中配置代理 (1)添加线程组,在线程组里面添加HTTP Cookie管理器如下图所示 添加路径是:[线程组]右键--[添加]--[配置元件]-[HTTP Cookie管理器] (2)在线程组里面添加http请求默认值 添加路径:[线程组]右键--[添加]--[配置元件]-[HTTP请求默认值] 3.

随机推荐