1.项目安装http-proxy-middleware

npm install http-proxy-middleware

2.src下新建setupProxy.js文件

const {createProxyMiddleware} = require('http-proxy-middleware');module.exports = function(app) {app.use(createProxyMiddleware('/api1',{  //api1是需要转发的请求(所有带有/api1前缀的请求都会转发给5000)target: 'http://0.0.0.0:8000', //配置转发目标地址(能返回数据的服务器地址)changeOrigin: true, //控制服务器接收到的请求头中host字段的值/*changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:3000changeOrigin默认值为false，但我们一般将changeOrigin值设为true*/pathRewrite: {'^/api1': ''} //去除请求前缀，保证交给后台服务器的是正常请求地址(必须配置)}),);app.use(createProxyMiddleware('/api2',{  //api2是需要转发的请求(所有带有/api2前缀的请求都会转发给5000)target: 'http://0.0.0.2:32154', //配置转发目标地址(能返回数据的服务器地址)changeOrigin: true, //控制服务器接收到的请求头中host字段的值pathRewrite: {'^/api2': ''} //去除请求前缀，保证交给后台服务器的是正常请求地址(必须配置)}),);
}

3.暴露项目配置文件

项目文件夹下执行

npm run eject

若报错Remove untracked files, stash or commit any changes, and try again.

需要先添加git环境

git add .
git commit -m "show ejecting"

然后再执行npm run eject后会多出config以及scripts文件夹

4.修改start.js文件

// We attempt to use the default port but if it is busy, we offer the user to
// run on a different port. `choosePort()` Promise resolves to the next free port.
choosePort(HOST, DEFAULT_PORT).then(port => {if (port == null) {// We have not found a port.return;}const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';const appName = require(paths.appPackageJson).name;const urls = prepareUrls(protocol, HOST, port);// Create a webpack compiler that is configured with custom messages.const compiler = createCompiler(webpack, config, appName, urls, useYarn);// Load proxy configconst proxySetting = require(paths.appPackageJson).proxy;const proxyConfig = prepareProxy(proxySetting, paths.appPublic);// Serve webpack assets generated by the compiler over a web sever.const serverConfig = createDevServerConfig(proxyConfig,urls.lanUrlForConfig);const devServer = new WebpackDevServer(compiler, serverConfig);require('../src/setupProxy')(devServer); ##新增这句// Launch WebpackDevServer.devServer.listen(port, HOST, err => {if (err) {return console.log(err);}if (isInteractive) {clearConsole();}console.log(chalk.cyan('Starting the development server...\n'));openBrowser(urls.localUrlForBrowser);});['SIGINT', 'SIGTERM'].forEach(function(sig) {process.on(sig, function() {devServer.close();process.exit();});});}).catch(err => {if (err && err.message) {console.log(err.message);}process.exit(1);});

6.每次更新过setupProxy.js文件后需要重新npm start项目改动才会生效

React解决跨域问题相关推荐

React Axios 请求解决跨域问题
网上看了很多的方案,但是不知道为什么,作为初学者,对react不太清楚的话,解决跨域还是有很多的问题.这篇博客针对小白,第一次调试react 跨域问题,甚至第一次使用Axios ,第一次... 废话就 ...
【react】使用代理解决跨域问题
[react]使用代理解决跨域问题参考文章: (1)[react]使用代理解决跨域问题 (2)https://www.cnblogs.com/guanpingping/p/10344197.html ...
React+fetch通过修改配置文件解决跨域问题
fetch("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&am ...
服务端转发html页面,html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
说起来挺简单的,可以直接去查询postMessage推送和window.addEventListener接收使用方式,能自己搞明白是最好的,本文章也只是记录一下自己的使用方式使用postMessag ...
前后端分离，如何解决跨域（代理模式）、路由拦截（进入页面需要登录）以及请求拦截（登录TOKEN失效）等问题（初学者）
前端时间项目需要发布一个较大的版本,工作比较忙,加了好多个晚上的班,感觉自己有点缺氧了.最近稍微闲下来了,顺便调休了三天,刚刚给家里来了个大扫除,看着这干干净净的小家,心里顿时舒服了很多. 下面进入正 ...
【一文带你解决跨域问题】
唠嗑部分在前后端分离项目中,ajax是数据交互中不可缺少的一个js库,它能够实现局部刷新,替代原生全局刷新对用户的冲击感,提升了用户体验,目前像jQuery-ajax, 基于Promise风格的ax ...
什么是跨域及如何解决跨域问题
什么是跨域 web 领域开发中,经常采用前后端分离模式.这种模式下,前端和后端分别是独立的 web 应用程序,例如:后端是 Java 程序,前端是 React 或 Vue 应用. 各自独立的 web ...
解决跨域问题（详解9种方法）
同源策略:端口号.协议.域名相同 . 一.为什么会出现跨域问题出于浏览器的同源策略限制.同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如 ...
react-17.x版本，解决跨域问题的多种方式
react最新版本解决跨域问题废话少说,直接上答案: react测试版本:17.x 后端接口:http://127.0.0.1:9092/user 前端端口:http://127.0.0.1:300 ...

React解决跨域问题

1.项目安装http-proxy-middleware

2.src下新建setupProxy.js文件

3.暴露项目配置文件

4.修改start.js文件

6.每次更新过setupProxy.js文件后需要重新npm start项目改动才会生效

React解决跨域问题相关推荐

最新文章

热门文章