create react app: setupProxy keeps returning 401 blocked by CORS policy, not working for remote urls?

Question

this is my setupProxy code:

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

function proxy(app) {
  app.use(
    "/3.0/lists",
    createProxyMiddleware({
      target: "https://us19.api.mailchimp.com",
      changeOrigin: true,
    })
  );
 ...
}

my post request is depending on user input. e.g.:

https://us19.api.mailchimp.com/3.0/lists/123/members/432/tags 

but i keep getting this error: Access to XMLHttpRequest at

'https://us19.api.mailchimp.com/3.0/lists/7667u7/members/23er23ewe233/tags' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

but i already have it in setupProxy?

Answer 1

Your client doesn't know about the proxy middleware you have set up on your server. It can't automatically replace the original URL with the URL to the proxy. You have to do that yourself.

Change the client-side JS so it makes the request to /3.0/lists.