React proxy not working with fetch, throwing CORS error when full url used-CodePudding

I am currently trying to perform a simple fetch instruction in my React application, though, the actual url always ends up being that of the React application itself.

The React app is hosted at localhost:3000, and the server I am trying to connect to is at localhost:8080.

In the package.json I have a proxy field like so:

"proxy": "http://localhost:8080"

Then I have a fetch somewhere like so:

fetch('/', { /* stuff... */ })

But when I check in my browser it says a fetch request happened to http://localhost:3000; in another application, it used to be that if you had a proxy, this would just go to localhost:8080, but not this time.

I tried stuff like deleting the node_modules folder and package-lock.json, but that did not do anything (also did a npm install afterward). If I do this:

fetch('http://localhost:8080', { /* stuff... */ })

The url seems to be the correct one, though I get all sorts of random errors which I just do not understand:

Access to fetch at 'http://localhost:8080/' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I have never heard of CORS, perhaps this is new? So I have two questions really:

How to get my React proxy to work?
How do I get rid of this CORS stuff? I am running both servers myself so "access control checks" is a whole load of bogus...

Cheers!

CodePudding user response：

No bro, that's how it's supposed to work. Add a route listener, say "/api", to your server and then call fetch('/api') from the client.

In the browser it will show up as http://localhost:3000/api even though your server is running on 8080.

CodePudding user response：

First, for the proxy to handle a request, the endpoint you are calling shouldn't be handled by your React development server. For example, instead of fetch('/'), your API should be at something like fetch('/api/').

If it's still not working, you can switch to configuring the proxy manually, which is the second way to set up a proxy that Create React App talks about.

For that, first, remove the proxy you have in package.json, keep it as it's the rule for the endpoint I talked about above, then:

npm install http-proxy-middleware --save-dev

And finally, create a src/setupProxy.js file:

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

module.exports = function(app) {
  app.use(
    'http://localhost:8080', // your back end endpoint
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
    })
  );
};

With that, you should be good to go. And about CORS, it's not new. You can read about it on mdn if you like.