0

I added "proxy": "http://localhost:3006/api" to my package.json and now I'm unable to route to my images. The proxy is being applied to the <img> tag. Is there a way to disable the proxy on certain calls? If I wanted to use s3 I would run into the same problem. If I remove the proxy then I run into all kind of CORs and header issues.

enter image description here

This is the same error but I don't find the solution.

<ListItemAvatar>
    <Avatar alt={otherUser.username} src={otherUser.avatar} component={Link} to={`/messages/${chat._id}`} />
</ListItemAvatar>

UPDATE: I've updated the proxy as shown here.

Images are coming through the same as before. Can I fix the issue in setupProxy.js?

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:3001',
      changeOrigin: true,
    })
  );
};
Mint
  • 1,013
  • 1
  • 12
  • 29

1 Answers1

1

You did not mention why you wanted the proxy, but I'm assuming your api calls are under the mentioned proxy url, but your images are in your frontend repo.

This is not what the proxy is meant for, it is very simple in the sense that all the fetches are then routed to the url provided. Images are also fetched.

I suggest looking at your dev server and doing the proxying via there.

In case you use webpack check: their proxy for the webpack-dev-server.

Phil
  • 307
  • 3
  • 12