第一步,下载依赖 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. 数据仓库004 - 复习Linux shell命令 - vi 进程 端口号 系统命令 高危命令 wget yum rpm压缩

    一.复习 1.vi的使用方法: 1.1 .正常编辑一个文件,保存退出 1.2. 粘贴的坑:必须在i键 编辑模式 2.找error cat xxx.log | grep -C 10 ERROR > ...

  2. telnet: Unable to connect to remote host: No route to host

    用iptables -F这个命令来关闭防火墙,但是使用这个命令前,千万记得用iptables -L查看一下你的系统中所有链的默认target,iptables -F这个命令只是清除所有规则,只不会真正 ...

  3. 普通的行专列;oracle行专列;更新中。。。

    题记 本来想写一个完整的表创建,但是其他人都写过啦,要不这样,你们有什么行转列的问题给我留言,我直接回答如何 Oracle的行转列 这篇文章不错:https://blog.csdn.net/huay_ ...

  4. Leetcode练习题 7. Reverse Integer

    7. Reverse Integer 题目描述: Given a 32-bit signed integer, reverse digits of an integer. Example 1: Inp ...

  5. pycharm的安装与破解

    一.首先去Pycharm官网,或者直接输入网址:http://www.jetbrains.com/pycharm/download/#section=windows,下载PyCharm安装包,根据自己 ...

  6. 明解C语言 入门篇 第十一章答案

    练习11-1 /* 用指针实现的字符串的改写 */ #include <stdio.h> int main(void) { "; printf("p = \" ...

  7. influxdb安装和学习

    安装 https://docs.docker.com/samples/library/influxdb/ 先启动,创建admin用户 docker run -d --name influxdb -p ...

  8. 机器学习(九)-------- 聚类(Clustering) K-均值算法 K-Means

    无监督学习 没有标签 聚类(Clustering) 图上的数据看起来可以分成两个分开的点集(称为簇),这就是为聚类算法. 此后我们还将提到其他类型的非监督学习算法,它们可以为我们找到其他类型的结构或者 ...

  9. 【redis】redis异常-MISCONF Redis is configured to save RDB snapshots

    使用redis报错: MISCONF Redis is configured to save RDB snapshots, but it is currently not able to persis ...

  10. vsdbg 下载方法 使用下载工具下载后手动安装

    vsdbg国内下载太慢了,这里提供一个使用下载工具下载后,手动安装的处理方法 查看vs build控制台输出: 1>C:\WINDOWS\System32\WindowsPowerShell\v ...