React配置代理proxy解决跨域问题

一、在package.json中直接设置proxy

和Vue不同，React是在package.json文件中使用proxy配置

注意：

create-react-app脚手架低于2.0版本时候，可以使用对象类型

"proxy":{"/api/**":{"target":"http://192.168.8.134:8080","changeOrigin": true}
}

2.0版本以上只能配置string类型，否则会报错，如下图：

正确应该这样：

"proxy": "http://192.168.8.134:8080"

由于package.json中，只能给proxy设置字符串；这样导致代理只能配置一个，想要配置多个代理就不行了。

二、利用middleware中间件的方式设置proxy

首先，安装 middleware

npm install http-proxy-middleware --save
//或
yarn add http-proxy-middleware --save

然后，src下新建一个setupProxy.js文件，加入以下代码：

原来版本配置：

const proxy = require("http-proxy-middleware");module.exports = function(app) {app.use(proxy("/api/**", {target: "http://192.168.8.134:8080",//跨域地址changeOrigin: true}));
};

新版本会报错：proxy is not a function

解决：

const { createProxyMiddleware } = require('http-proxy-middleware')module.exports = function (app) {app.use(createProxyMiddleware('/api', {target: 'http://192.168.8.134:8080',//跨域地址secure: false,changeOrigin: true,pathRewrite: {"^/api": "/api"}}))
}

最后运行项目就ok了

React配置代理proxy解决跨域问题相关推荐

uniapp配置代理，解决跨域问题
1. 在根目录下的manifest.json中,选择源码视图 2. 最底下找到h5部分配置,在devServer中加入proxy配置 "proxy": { "/api&q ...
proxy解决跨域问题
本文基于对王红元老师的学习,很荣幸是他的一名学生 1.proxy介绍 proxy是我们开发中非常常用的一个配置选项,它的目的设置代理来解决跨域访问的问题: p比如我们的一个api请求是 http:// ...
微服务架构（5）：nginx反向代理cors解决跨域
微服务架构(5):nginx反向代理&&cors解决跨域学习目标 1.使用域名访问本地项目 1.1.统一环境 1.2.域名解析 1.3.解决域名解析问题 1.4.nginx解决端口问 ...
proxy跨域不生效_配置proxy解决跨域问题
用一个最简单的方法解决API资源请求跨域问题:http-proxy-middleware http-proxy-middleware不需要自己安装,在安装webpack过程中,会自动依赖安装到你的no ...
vue cli3.3 以上版本配置vue.config.js 及反向代理操作解决跨域操作
const webpack = require('webpack') module.exports = { configureWebpack: { plugins: [ new webpack.Pro ...
【Node】node.js实现服务器的反向代理，解决跨域问题
跨域对于前端来说是一个老大难的问题,许多方法如jsonp.document.domain + iframe...都有或多或少的问题,一个最佳实践就是通过服务器nginx做反向代理,但奈何不懂相关知识, ...
服务器端代理proxy实现跨域访问
在koa中使用代理proxy 我们知道浏览器有个"同源策略"的限制,再回忆一下,同源是什么?所谓同源,即同协议.同域名.同端口.如果不满足同源三者条件任意一个,即是非同源,也就是 ...
本地开发代理、解决跨域、虚拟域名
概述虚拟本地域名: 1.host 做map映射,注意端口号 2.charles.fiddler代理虚拟域名常见本地开发解决代理方案三种: 1.chrome extensions 扩展程序(cors ...
前端使用 Nginx 反向代理彻底解决跨域问题
引入网址https://blog.csdn.net/larger5/article/details/81286324 1.请求后端数据失败代码: <!DOCTYPE html> < ...

React配置代理proxy解决跨域问题

一、在package.json中直接设置proxy

二、利用middleware中间件的方式设置proxy

React配置代理proxy解决跨域问题相关推荐

最新文章

热门文章

React配置代理proxy解决跨域问题

一、在package.json中直接设置proxy

二、 利用middleware中间件的方式设置proxy

React配置代理proxy解决跨域问题相关推荐

最新文章

热门文章

二、利用middleware中间件的方式设置proxy