How to get React setupProxy to work correctly with express.js

Question

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. However, when I am in react and I try to use <img src="/public/images/me.jpeg" I receive nothing. 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:

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)

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

Answer 1

将此行添加到 react package.json 文件中 script 标签之后或最后。

"proxy": "http://localhost:4000"