[英]How to get React setupProxy to work correctly with express.js
I am currently having an issue with trying to serve images from express over to react.我目前在尝试从快递中提供图像以做出反应时遇到问题。 I have my express.static set up correctly so when I visit
localhost:5000/public/images/me.jpeg
I receive the image in my browser.我的 express.static 设置正确,所以当我访问
localhost:5000/public/images/me.jpeg
,我会在浏览器中收到图像。 However, when I am in react and I try to use <img src="/public/images/me.jpeg"
I receive nothing.但是,当我做出反应并尝试使用
<img src="/public/images/me.jpeg"
,我什么也没收到。 I figure this has to do with setting up proxies for react but I am not too sure.我认为这与设置代理进行反应有关,但我不太确定。 Any help would be awesome!
任何帮助都是极好的! Thanks!
谢谢!
Express folder structure for assets:资产的快速文件夹结构:
public --
images --
me.jpeg
app.js in express:快递中的 app.js:
const express = require('express');
const path = require('path');
const bodyParser = require('body-parser');
const app = express();
const contactRouter = require('./routes/contact');
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use('/public', express.static(__dirname + "/public"));
app.use(express.static(path.join(__dirname, 'client/build')));
//route handlers
app.use('/contact', contactRouter);
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname + '/client/build/index.html'));
});
module.exports = app;
my setupProxy.js file in src (react)我在 src 中的 setupProxy.js 文件(反应)
const proxy = require('http-proxy-middleware')
module.exports = function (app) {
app.use(proxy('/public', {target: 'http:localhost:5000'}));
}
Thanks for the help guys!谢谢你们的帮助!
Also forgot to mention** All code works in production and I receive my images, this is only for development也忘了提及**所有代码都在生产中工作,我收到了我的图片,这仅用于开发
将此行添加到 react package.json 文件中 script 标签之后或最后。
"proxy": "http://localhost:4000"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.