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如何创建反向代理