I'm facing proxy issue in react using axios communcation package - reactjs

I am trying to connect my frontend to my backend using Axios.
It currently is throwing this error:
Proxy error: Could not proxy request /logo192.png from localhost:3000
to http://localhost:6000/. See
https://nodejs.org/api/errors.html#errors_common_system_errors for
more information (ECONNREFUSED).

Related

Getting the Fetch API error with GoogleLogin OAuth

I'm using GoogleLogin in the #react-oauth/google package in my React app running on port 3000. When I'm fetching http://localhost:30001/auth/google I'm getting the error in the Chrome dev tools:
POST http://localhost:3001/auth/google net::ERR_CONNECTION_REFUSED
TypeError: Failed to fetch
And in the Safari dev tools:
Fetch API cannot load http://localhost:3001/auth/google due to access control checks.
I suspect the error is due to the CORS policy. How can I be absolutely sure of that?
I don't have access to the server, so I can't update the CORS policy from there. Is there anything at this point that I can do?
Note: The Response in the Network tab in the Chrome dev tools is empty & the Headers has Referrer Policy: strict-origin-when-cross-origin

AWS API fetch "Type Error: failed to fetch" but working for postman and browser

I am trying to make a call to an API endpoint on AWS Gateway which works totally fine in browser and postman, but in my code it is failing with "Type Error: failed to fetch".
What is the likely cause of this?

Is there a way to send an HTTP request using Vercel?

I just deployed my React app to Vercel, but it's not being able to send HTTP requests, I'm getting this error:
This request has been blocked; the content must be served over HTTPS
My backend is deployed on ECS with an HTTP endpoint, what could I do to solve this? I already tried to set a meta tag, but it didn't work.

tried to access the data via axios but Response to preflight request doesn't pass access control check

I was working over react and made a request using axios but in the browser it shows "Response to preflight request doesn't pass access control check" i had installed the corx extension but still getting the same error
Assuming you are using create-react-app you can try defining a proxy property in your package.json file and give the url to your api server, something like
"proxy": "http://localhost:8000".
This will proxy your api calls through the express server provided within create-react-app without the need for any CORS configuration in your browser
Note : This can be only used in your local environment and for production setup, you should try alternate approaches by configuring CORS setting in the API server or hosting the UI and API applications under the same hostname

How to fix "net::ERR_CERT_AUTHORITY_INVALID" when sending a request to an https:// API?

I have a React application (create-react-app) running on http://localhost:3000/ and I need to send a request to an API (Java with Spring Boot) that is available on "https://review-feature-...api/partner".
However, when I send the request, I get the following error on my Chrome console:
POST https://review-feature-...api/partner net::ERR_CERT_AUTHORITY_INVALID
I've tried to change my React application to run on https://localhost:3000, but it doesn't work because I have a Keycloak authorization server running behind my React app, so I have to find a way to send the request using http://localhost:3000/ anyway.
I've also tried to use the following environment variables (How can I provide a SSL certificate with create-react-app?) but it doens't work.
SSL_CRT_FILE=.cert/server.crt
SSL_KEY_FILE=.cert/server.key
Thanks in advance.

Resources