reactjs中配置代理跨域

第一步,下载依赖 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‘)
}

亲测有效

原文地址:https://www.cnblogs.com/ldlx-mars/p/11164598.html

时间: 2024-10-08 09:08:42

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

django中配置允许跨域请求

对于django 安装django-cors-headers,详情请看官方文档 pip install django-cors-headers 配置settings.py文件 a.在INSTALLED_APPS里添加"corsheaders" INSTALLED_APPS = [ ... 'corsheaders', ... ] b.在MIDDLEWARE_CLASSES添加 'corsheaders.middleware.CorsMiddleware', 'django.middle

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

一. 说在前面的话 本节主要在前面章节的基础上补充了几个简单的知识点,比如:第三方调用通过 GlobalHost.ConnectionManager.GetHubContext<MySpecHub1>();来获取Hub对象,那么能不能封装一下不必每次都这么获取呢?再比如SignalR传输是否有大小限制,一下传输10w个字能否传输成功?最后着重整理一下跨域的各种使用情况,结合C/S程序充当客户端和服务器端. 本节内容包括: ①. SignalR与MVC或者WebApi简单的整合. ②. 全局的几

node.js配置允许跨域请求,设置允许携带的请求头参数

最近在用node.js写自己的后台时遇见了跨域问题,之前处理跨域都是在前端配置代理解决的,这次打算在后台解决,中途也遇到了一些坑,比如我在请求头里加了一个自定义的参数token,结果后台配置的时候没有允许请求能够携带该参数,造成预检请求发出后,就没任何响应了.为此折腾了半天才发现问题...还是对它不够了解,所以查阅了相关资料,下面做出自己的理解: 都知道跨域是因为浏览器的同源策略造成的,当客户端访问服务端时,如果两端的ip.端口.协议任意一个不同就会产生跨域.下面介绍node.js后台如何配置允

CORS跨域与Nginx反向代理跨域优劣对比

最近写了一些关于前后端分离项目之后,跨域相关方案的基本原理和常见误区的帖子,主要包括CORS和Nginx反向代理.这两种方案项目中都有在用,各有优缺,关于具体使用哪种方案,大家的观点也不大一致,本文主要就此展开一下,从前后端及服务器配置.安全性.移植灵活性.扩展性等方面详细对比一下两种方案的优缺,以便于后期在方案选型上对大家有所帮助. 前端配置 CORS方案:跨域时部分浏览器默认不携带cookie,因此为了携带cookie需要设置一下xmlhttprequest的withCrendetails属

Nginx配置springboot-vue跨域

nginx-springboot-vue前后端分离跨域配置 引言 接着上篇--简单的springboot-vue前后端分离登录Session拦截的demo,其中跨域是通过springboot后端全局设置的,但是碰到了奇怪的问题,用了个不优雅的方式解决. 于是想到使用Nginx跨域应该就不会如此了. windows下载安装 http://nginx.org/ 下载稳定版,解压缩. 查看配置文件 /nginx-1.16.0/conf/nginx.conf : #gzip on; server { l

WCF配置问题(配置WCF跨域)

其它的先放一边.今天先来分享一下前段时间给公司做网站WCF服务接口的心得. 配置文件的配置问题 这里既然讨论WCF配置文件的问题,那么怎么创建的就不一一讲解了.好多博主都有提过的.所以直接分享自己开发时的收获,这里感谢好多给我启发的人,@好多人.... 我这里就拿登录接口来分享下吧. 先贴出代码. 这是服务端代码 因为ASP的兼容性问题,这里的AspNetCompatibilityRequirementsMode用Allowed(这里说一下,因为前段用Ajax调的接口,所以用了callback)

阿里云服务器ECS Apache、Nginx 配置支持跨域访问

问题描述 如何让 Apache.Nginx支持跨域访问. 处理办法 配置 Apache 跨域访问 步骤: 修改 httpd.conf. 把 LoadModule headers_module modules/mod_headers.so 前面的注释删除 修改  改为:  即: AllowOverride none Require all granted Header set Access-Control-Allow-Origin * 说明: 首先使用图形界面开启headers_module模块功

Nginx服务器中处理AJAX跨域请求的配置方法讲解

Nginx 实现AJAX跨域请求AJAX从一个域请求另一个域会有跨域的问题.那么如何在nginx上实现ajax跨域请求呢?要在nginx上启用跨域请求,需要添加add_header Access-Control*指令.如下所示: ? 1 2 3 4 5 6 7 8 9 10 11 12 location /{ add_header 'Access-Control-Allow-Origin' 'http://other.subdomain.com'; add_header 'Access-Cont

React里配置接口跨域代理【亲测完美实现~】

这种问题当然离不了官网妈妈的支持:传送门 官网给了三种解决方案.前两种我就不赘述了(主要是因为我没用) 而官网的第三种推荐的方式: 1.安装依赖: $ npm install http-proxy-middleware --save $ # or $ yarn add http-proxy-middleware 2.在“src”文件夹下新建“setupProxy.js”文件.并做官网推荐的配置- 理论上,在正确的路径下新建setupProxy.js完毕,你只需要把下边这段官网的代码抄过来就可以了