第一步,下载依赖 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. Java连载7-变量&数据类型

    一.变量 1.注意点: 在同一个“作用域”中,变量名不能重名,但是变量可以重新赋值. 2.什么是作用域? 答:描述的是变量的有效范围,在范围之内是可以被访问的,只要出了作用域就无法访问(也就是在大括号 ...

  2. LeetCode 189:旋转数组 Rotate Array

    公众号:爱写bug(ID:icodebugs) 给定一个数组,将数组中的元素向右移动 k 个位置,其中 k 是非负数. Given an array, rotate the array to the ...

  3. SpringMVC_处理器方法的返回值

    一.返回ModelAndView    若处理器方法处理完后,需要跳转到其他资源,且又要在跳转的资源间传递数据,此时处理器方法返回ModelAndView比较好.当然,若要返回ModelAndView ...

  4. 你需要知道的8个CSS带@的规则

    1:@charset(用来设置html文档字符编码的格式,比如我们常用的,charset='utf-8') 注:建议CSS文件最顶部都加上@charset "utf-8";,避免出 ...

  5. Vue.js 源码分析(三十) 高级应用 函数式组件 详解

    函数式组件比较特殊,也非常的灵活,它可以根据传入该组件的内容动态的渲染成任意想要的节点,在一些比较复杂的高级组件里用到,比如Vue-router里的<router-view>组件就是一个函 ...

  6. Windows 上安装 Rust 出错及其解决办法

    首先去 https://www.rust-lang.org/tools/install Rust 官网上下载相应的安装包. 直接运行 rustup-init.exe,这一步 会把 rustc, car ...

  7. 【MySQL配置参数】sync_binlog和innodb_flush_log_at_trx_commit

    sync_binlog和innodb_flush_log_at_trx_commit这2个参数都是MySQL中,配置日志持久化时机的,但有很大不同,做下对比分析总结. 1.MySQL服务器配置参数:s ...

  8. AES加解密异常java.security.InvalidKeyException: Illegal key size

    AES加解密异常 Java后台AES解密,抛出异常如下:java.security.InvalidKeyException: Illegal key size Illegal key size or ...

  9. Java中级—转发和重定向的区别

    在设计Web应用程序的时候,经常需要把一个系统进行结构化设计,即按照模块进行划分,让不同的Servlet来实现不同的功能,例如可以让其中一个Servlet接收用户的请求,另外一个Servlet来处理用 ...

  10. SVG撑满页面

    当viewBox属性固定,默认修改svg标签的宽高,svg都会按比例缩放 我们现在不想按比例缩放,需要svg撑满整个画面 这里只需为svg标签添加一个关键属性:preserveAspectRatio ...