第一步,下载依赖 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. 使用Qiniu-JavaScript-SDK上传文件至七牛云存储

    一.Qiniu-JavaScript-SDK介绍 基于 JS-SDK 可以方便的从浏览器端上传文件至七牛云存储,并对上传成功后的图片进行丰富的数据处理操作. JS-SDK 兼容支持 H5 File A ...

  2. 【cf比赛记录】Codeforces Round #606 (Div. 2, based on Technocup 2020 Elimination Round 4)

    比赛传送门 只能说当晚状态不佳吧,有点头疼感冒的症状.也跟脑子没转过来有关系,A题最后一步爆搜没能立即想出来,B题搜索没有用好STL,C题也因为前面两题弄崩了心态,最后,果然掉分了. A:简单数学 B ...

  3. 我是如何理解并使用maven的

    前言 一直想写一篇关于Maven的文章,但是不知如何下笔,如果说能使用,会使用Maven的话,一.两个小时足矣,不需要搞懂各种概念.那么给大家来分享下我是如何理解并使用maven的. 什么是Maven ...

  4. CentOS 下安装 Cmake 步骤

    最近在虚拟机中的 CentOS 中安装 Cmake.把安装步骤记录在此. 什么是 Cmake CMake 是一个跨平台的安装(编译)工具,可以用简单的语句来描述所有平台的安装(编译过程).他能够输出各 ...

  5. 手风琴效果 animate

    animate的手风琴效果 <style type="text/css"> * { margin: 0; padding: 0; } ul{ list-style: n ...

  6. conda基本知识

    卸载anaconda: rm -rf anaconda3 (anaconda文件夹名称) conda删除虚拟环境 在终端执行:conda remove -n your_env_name(虚拟环境名称) ...

  7. spring的一些概念及优点

    Spring是一个轻量级的DI和AOP容器框架.说它轻量级有一大部分原因是相对于EJB的(虽然本人从来没有接触过EJB的应用),但重要的是Spring是非侵入式的,基于Spring开发应用一般不依赖于 ...

  8. 爬虫常用正则、re.findall 使用

    爬虫常用正则 爬虫经常用到的一些正则,这可以帮助我们更好地处理字符. 正则符 单字符 . : 除换行以外所有字符 [] :[aoe] [a-w] 匹配集合中任意一个字符 \d :数字 [0-9] \D ...

  9. linux部署java命令

    启动: #!/bin/bash source /etc/profile log() { echo `date +[%Y-%m-%d" "%H:%M:%S]` $1 } log &q ...

  10. C# - VS2019调用ZXing.NET实现条码、二维码和带有Logo的二维码生成

    前言 C# WinFrm程序调用ZXing.NET实现条码.二维码和带有Logo的二维码生成. ZXing.NET导入 GitHub开源库 ZXing.NET开源库githib下载地址:https:/ ...