react中如何使用反向代理

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react中如何使用反向代理相关的知识,希望对你有一定的参考价值。

参考技术A 反向代理多用于跨域请求,一般本地浏览器的本地域名例如localhost:3000 像其他服务器的域名,例如 Request URL: https://www.meipinshu.com/api/officialarticle/list 发出请求,但是会出现跨域问题,请求数据无法返回,如果解决这一问题,
可以通过服务端的请求,然后让本地域名请求本地服务,返回相应数据,理解如图下所示

反向代理的步骤分为

具体参考文章,可以参考 https://create-react-app.dev/docs/fetching-data-with-ajax-requests

text 反向代理使用后端NodeJS Express创建React App Build

const express = require('express');
const proxy = require('http-proxy-middleware');

const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, '../build')));

const backendURL = process.env.REACT_APP_BACKEND_HOST;

const options = {
	target: backendURL, // target host
	changeOrigin: true,
	pathRewrite: {
		'^/api': '/'
	}
};

const customProxy = proxy(options);

app.use('/api', customProxy);

app.get('/*', function(request, response, next) {
	response.sendFile(path.join(__dirname, '../build', 'index.html'));
});

const port = process.env.PORT || 3000;

app.listen({ port }, () =>
	console.log(`

以上是关于react中如何使用反向代理的主要内容,如果未能解决你的问题,请参考以下文章

使用 Apache 反向代理的 React-router url 不匹配

text 反向代理使用后端NodeJS Express创建React App Build

如何开启apache虚拟目录反向代理

Nginx 如何设置反向代理

如何使用nginx设定反向代理

golang如何创建反向代理