如何在本地主机中获取 api，即 react js 中的 localhost/9563

Question

When I build the my react js it's not showing any fetch api and gave me error (get/playlist) When I developed the react js web I give proxy in package.json file.I know that it's work only on development side but how to fetch api when I build the website and that present to client with fetch api can I use express js?

Api that I fetch is in localhost/9563 React js run in localhost/3000

Answer 1

The easiest way is to use the proxy from react: https://create-react-app.dev/docs/proxying-api-requests-in-development/ - which you might already do based on your question.

Can you maybe share your package.json? I suspect you might have misconfigured it.

---

Alternatively if you do not wish to use the proxy:

Make sure to enable CORS in your Express application, due to different ports between frontend and backend, the same-origin policy of your browser does not apply. So the request will not be run.

You can use the CORS middleware for it: https://expressjs.com/en/resources/middleware/cors.html

Once your Express backend allows CORS, your request should run just fine.

---

As a side note: Server-side cookies will NOT be sent this way, as many browsers do not send cookies if the port is different. If you need server-side cookies to be sent along in your fetch request, you need to have 3 things in place:

1. CORS is enabled in backend
2. CORS Allow Credentials header is set in backend
3. in the frontend fetch is called using {withCredentials: true} option
4. Both backend and frontend run under the same port (especially important on localhost), so you may need nginx for proxying to backend/frontend in that case.