Just a quick question:
I'm building a React/Electron app and inside the React app I've got a few async/await calls to an API. These calls are made with axios and work fine when in development.
When the app is wrapped in Electron, the requests return with a "400 Headers required" error. When running a dev version of React it call the api correctly.
Any idea why this is happening?
I came across the WebRequest Electron method https://electronjs.org/docs/api/web-request. It looks like I could intercept the requests and change the headers, but it seems strange to have to do that.
Thank you for the help! 🙌
It looks like the issue was my CORS proxy https://cors-anywhere.herokuapp.com/.
The 3rd party API I'm calling hasn't got CORS enabled and when I'm developing locally in React, I had to use the CORS proxy.
That being said when I bundle the app inside Electron, the call to https://cors-anywhere.herokuapp.com/ return '400 Header required' since that's how that proxy handles non-CORS related call. If it didn't respond like this you could use it as a general proxy.
So removing the CORS proxy url from my links made the app work inside Electron. By that logic I guess it means that by default the render API calls (coming from React) from inside Electron are not affected by CORS.
Related
I am developing a React app using freetogame API and it works perfectly on localhost, but I deployed it on Netlify and it's not working because it's making the API call to a different adress.
Here is the API call on localhost: localhost API Call
and here is the API call on the deployed site: Deployed Site API Call
As you can see in the deployed site API call, the Request URL is completely different and there is an /undefined/ part in the API call. I don't know what's causing this problem.
Here is the Github link to the project: Project Github Link
Please help me find the solution. Thanks in advance
Edit: I did some more research and figured that the problem may be caused by the axios call. There is baseURL, headers, and params in my axios call and I didn't defined them in the Netlify deploy. Here is my axios call: Axios Call and here is my package.json file: package.json
. How can I define them in netlify?
Have you added your environment variables to Netlify?
api_key = process.env.REACT_APP_API_KEY
api_host = process.env.REACT_APP_API_HOST
api_base_url = process.env.REACT_APP_API_BASE_URL
If you don't declare the above variables in your Netlify project it won't know what values to insert, which is why they are currently undefined. Visit this link for more information: Netlify Environment Variables
I found a solution and wanted to post it here so it can help others. I tried deploying my build file to Netlify manuelly and the site is working now.
TLDR: React app interfaces properly with Flask API on PythonAnywhere when hosted locally but not when a static build is hosted on Netlify. Perhaps the proxy information is missing from the build?
EDIT 1:
Here are the errors in the browser console:
I've created a Flask API that pulls machine learning models from Amazon S3 and returns predictions on data input from POST requests. I've put this API on PythonAnywhere.
I've also created a React frontend which allows me to input data, submit it, and then receive the prediction. When I host this app locally, it behaves appropriately (i.e. connecting to the Flask app on PythonAnywhere, loading the models properly, and returning the predictions).
I've tried deploying a static build of the React app on Netlify. It behaves as expected, except for anything that requires interacting with the Flask App. I have a button for testing that simply calls the Flask app in a GET request, and even this is throwing a 404 error.
I checked the error and server logs on PythonAnywhere and see nothing. The only thing I can thik of is that my proxy which lists the domain of the PythonAnywhere app in my package.json file is for some reason unincluded in the build, but I don't know why this would be the case.
Has anyone else run into a similar issue or know how I can check to see if the proxy information is included in the static build? Thanks in advance!
Thanks to #Glenn for the help.
Solution:
I realized (embarrassingly late) that the requests were not going to the right address, as can be seen in the browser console error above. I was using a proxy during development, so the netlify app was calling itself rather than the pythonanywhere API. I simply went into my react code and edited the paths to pythonanywhere. E.g.
onClick={ async () => {
const response = await fetch("/get", {...}}
became
onClick={ async () => {
const response = await fetch("https://username.pythonanywhere.com/get", {...}}
As #Glenn mentioned, there may have been a CORS issue as well, so in my flask application I utilized flask_cors. I can't say for sure that this was necessary given that I didn't test removing it after the fetch addresses had changed, but I suspect that it is necessary.
Hopefully this can help someone else
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
I have recently developed an React app in which I made HTTP request to external API using Axios library. Then I used gh-pages to deploy it. But it doesn't even show up (it's a blank page). I know GitHub only hosts static pages. The React app is running perfectly fine on localhost.
When I host React App on Localhost using npm start and request data using HTTP GET request using Axios Library. I receive a JSON format data from the API. And I use this data to show on front end of the React App.
But when I host the react app on git hub pages and request for data using the same way. It does not send HTTP requests to the API. And hence webpage is static in nature
have you tried to change http:// to https://?
because browsers nowadays don't let http requests to happen
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.