javascript - Why is the proxy inside package.json not working in my React application? - Stack Overflow

admin管理员组

文章数量:1332395

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:

1. How to get my React proxy to work?
2. 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!

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:

1. How to get my React proxy to work?
2. 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!

• javascript
• reactjs
• proxy
• create-react-app

Share Improve this question Follow edited Feb 4, 2023 at 16:31 Youssouf Oumar 46.3k1616 gold badges101101 silver badges104104 bronze badges asked Feb 3, 2023 at 18:13 PlegeusPlegeus 26011 gold badge33 silver badges1616 bronze badges 2

• Did you use create-react-app to set up your application? Also, are you using React Router Dom? – Youssouf Oumar Commented Feb 3, 2023 at 19:00
• I innitialised the project like so: npx create-react-app <name>, and I am indeed using the react router dom, does that mess things up? – Plegeus Commented Feb 3, 2023 at 19:47

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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('/'), which is the endpoint that sends your React index.html file, your API should be at something like fetch('/api/').

Like the doc says:

To tell the development server to proxy any unknown requests to your API server in development, add a proxy field to your package.json, for example: "proxy": "http://localhost:8080".

This way, when you fetch('/api/todos') in development, the development server will recognize that it’s not a static asset, and will proxy your request to http://localhost:8080/api/todos as a fallback. The development server will only attempt to send requests without text/html in its Accept header to the proxy.

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(
    '/api', // 

                本文标签：
                javascriptWhy is the proxy inside packagejson not working in my React applicationStack Overflow

                        版权声明：本文标题：javascript - Why is the proxy inside package.json not working in my React application? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人，
                        转载请联系作者并注明出处：http://www.betaflare.com/web/1742283185a2446471.html，
                        本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。