第一步,下载依赖 http-proxy-middleware

yarn add http-proxy-middleware

第二步,在src下建立setupProxy.js

const proxy = require('http-proxy-middleware')

module.exports = function(app) {
app.use(proxy('/api', {
target: "https://h5api.zhefengle.cn",
secure: false,
changeOrigin: true,
pathRewrite: {
"^/api": "/"
},
})
);
};

注意:https://h5api.zhefengle.cn 这个是一个开源的接口,开源加入项目直接测试

第三步,在数据请求中直接请求,在真实url后添加/api即可,eg

const login=()=>{
return Api("/api/index/index_tab.html?",'GET')
}

亲测有效

reactjs中配置代理跨域的更多相关文章

  1. 关于vue-cli3中配置请求跨域的问题

    关于vue-cli3中配置请求跨域的问题 根据Vue CLI3官方文档, 需要在vue.config.js文件中配置devServer.proxy选项来解决跨域问题. 关于vue.config.js文 ...

  2. browser-sync + http-proxy-middleware 配置代理跨域

    写代理js文件下面是文件内容 /** * Module dependencies. */ var browserSync = require('browser-sync').create() var ...

  3. django中配置允许跨域请求

    对于django 安装django-cors-headers,详情请看官方文档 pip install django-cors-headers 配置settings.py文件 a.在INSTALLED ...

  4. UEditor 中配置可以跨域访问的图片路径

    文档里很清楚:http://fex.baidu.com/ueditor/#server-path 进入配置文件 当域名不是直接配置到项目根目录时,例:http://a.com/b/c  域名下有两文件 ...

  5. 第五节:SignalR大杂烩(与MVC融合、全局的几个配置、跨域的应用、C/S程序充当Client和Server)

    一. 说在前面的话 本节主要在前面章节的基础上补充了几个简单的知识点,比如:第三方调用通过 GlobalHost.ConnectionManager.GetHubContext<MySpecHu ...

  6. 并发编程概述 委托(delegate) 事件(event) .net core 2.0 event bus 一个简单的基于内存事件总线实现 .net core 基于NPOI 的excel导出类,支持自定义导出哪些字段 基于Ace Admin 的菜单栏实现 第五节:SignalR大杂烩(与MVC融合、全局的几个配置、跨域的应用、C/S程序充当Client和Server)

    并发编程概述   前言 说实话,在我软件开发的头两年几乎不考虑并发编程,请求与响应把业务逻辑尽快完成一个星期的任务能两天完成绝不拖三天(剩下时间各种浪),根本不会考虑性能问题(能接受范围内).但随着工 ...

  7. 前端笔记之Vue(五)TodoList实战&拆分store&跨域&练习代理跨域

    一.TodoList 1.1安装依赖 安装相关依赖: npm install --save-dev webpack npm install --save-dev babel-loader babel- ...

  8. nginx反向代理跨域基本配置与常见误区

    最近公司前后端分离,前端独立提供页面和静态服务很自然的就想到了用nginx去做静态服务器.同时由于跨域了,就想利用nginx的反向代理去处理一下跨域,但是在解决问题的同时,发现网上有些方案的确是存在一 ...

  9. Next.js 配置接口跨域代理转发

    使用 create-next-app 创建的 Next.js 项目配置接口跨域代理转发需要用到 custom server 功能. 先安装好 express 和 http-proxy-middlewa ...

随机推荐

  1. 【CodeForces】CodeForcesRound576 Div1 解题报告

    点此进入比赛 \(A\):MP3(点此看题面) 大致题意: 让你选择一个值域区间\([L,R]\),使得序列中满足\(L\le a_i\le R\)的数的种类数不超过\(2^{\lfloor\frac ...

  2. 内网Metasploit映射到外网

    下载frp Github项目地址:https://github.com/fatedier/frp 找到最新的releases下载,系统版本自行确认. 下载方法: wget https://github ...

  3. github上方便的小工具

    目录 python中的fire模块 Install Reference python中的fire模块 它可以对所有Python 对象,包括functions, classes, modules, ob ...

  4. mysql mysqldump 命令导出指定表的数据

    .导出指定表的数据 mysqldump -t database -u username -ppassword --tables table_name1 table_name2 table_name3  ...

  5. dedecms5.7的获取本文章的TAG

    tag调用标签如下: {dede:tag row='10' getall='1' sort='month'} <li><a href='[field:link/]'>[fiel ...

  6. WebGIS之MapBox篇

    前面在Arcgis的基础上玩了玩,这不最近又去摸索了一下Web上开源的GIS;这次选择了基于MapBox来实现一些效果: 1.加载自己发布的本地瓦片效果 2.加载热力图.Echarts.三位建筑.路况 ...

  7. 2、Ext.NET 1.7 官方示例笔记-按钮

    这一节应该比较简单,因为按钮相对其他控件还是比较简单的,但按钮是最常用的控件,先从简单的开始,才能循序渐进的学下去不是吗? 从上面的图片可以看出,可分基本&按钮组,先看下基本的Overview ...

  8. Java问题记录——IllegalMonitorStateException

    Java问题记录——IllegalMonitorStateException 摘要:本文主要分析了IllegalMonitorStateException的产生原因. 部分内容来自以下博客: http ...

  9. Linux kali信息探测以及 Nmap 初体验

    Nmap是一个开源的网络连接端口扫描软件(内置于kali中) 打开Nmap: > nmap 打开桌面化Nmap——zenmap: > zenmap Nmap支持多种扫描方式,用法简单,参数 ...

  10. python中lambda

    lambda_expr ::= "lambda" [parameter_list]: expression python中lambda可以理解为一个匿名函数,它的要求是函数的运算部 ...