My frontend is deployed on Netlify. all the get request working well but POST, PULL, DELETE request is not working.
My backend is on Heroku..
Is it CORS problem or else?
Thank you very much.
this is my console after post request
From your linked screenshot, it appears that you're connecting to your API using relative URLs, for example: /api/something. Locally, this would most likely work as you'd most likely have your backend running too.
However, on production this would not work, because browsers will resolve /api/something relative to the domain which is now on Netlify. Since Netlify doesn't have your backend app running, and there is no asset at /api/something, Netlify sends back a 404.
The solution would be to use Netlify Rewrites: https://docs.netlify.com/routing/redirects/rewrites-proxies/. You could add something like:
/api/* https://your-heroku-url.com/:splat 200!
... in a file named _redirects which should be added to the publish folder on Netlify.
This would resolve /api/something to https://your-heroku-url.com/something. You might have to change the redirects based on your configuration.
Related
I have a Rails 7.x application deployed to Heroku, with an embedded React front end. When I build for deployment, everything React based ends up in /public, including the React entry point index.html file. Everything works great locally via Rails / Vite.
However, when I deploy to Heroku, all of my calls to the root path, i.e. https://xyz.abc.com/, return 304's from the Heroku router, bypassing Rails and its routes entirely. Other routes work fine, it's only the root.
I've disabled caching across the board in my Rails codebase, but that hasn't worked since from what I can see Heroku is stopping the request and not even passing it off to my Rails dyno.
Here's an example from the Heroku logs, by passing my dyno entirely:
Log request for "/"
And here's an example from the exact same setup for a different route:
Log request for "/api/auth"
So I know the Rails backend is up and accepting requests, but just not for "/"
Any ideas what I could be doing wrong?
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 have made a simple hacker-news project. It has simple functionalities like search ,redirect to next page etc.
It works perfectly fine on loacalhost but after I deployed it none of the functionalities work what should I do.
This is my github repo: https://github.com/yashkr18/Hacker-News.
This is the deployed version: https://6131026147f71d1505e11cb8--naughty-lewin-cc520d.netlify.app/
Looks like you are trying to call http from an HTTPS:
Table.js:40 Mixed Content: The page at
'https://6131026147f71d1505e11cb8--naughty-lewin-cc520d.netlify.app/'
was loaded over HTTPS, but requested an insecure resource
'http://hn.algolia.com/api/v1/search?query=a'. This request has been
blocked; the content must be served over HTTPS.
Change your urls to https and it will work just fine. I put it in a sandbox and tested: https://codesandbox.io/s/heuristic-paper-bdy7j?file=/components/Table.js
I did basic movie database type app with React and then deployed it to Heroku. App contains input field and it returns results after pressing Enter, and this works just fine locally. My problem is when I deployed my app to Heroku nothing happens anymore when I hit Enter and trying to search something. I belive app works correctly but for some reason it doest't get data from API when app is deployed to Heroku. Any ideas what causing this problem and how to fix this?
Source code
Live demo
Mixed Content: The page at 'https://reactmoviedb.herokuapp.com/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://www.omdbapi.com/?apikey=bf410ecf&s=dfvdf'. This request has been blocked; the content must be served over HTTPS.
The error your are getting
ReactJS API Data Fetching CORS error
Current state: Depending on the npm start script, my web app is accessible by at the http:// address, or the https:// address, but not both.
Goal: I'd like the app to run on https://, and for any http:// requests to be redirected to https://.
App info: The web app is created with Sails for the server, and create-react-app for the UI. To run locally, I use two terminals to start each up (server on :1337, UI on :3000). To run in prod, I build the UI and copy the build into the server folder, then start the server on :84 (:80 already taken).
What I've tried:
I've tried adding redirection on the Sails server by adding middleware and policies.
I've tried adding redirection on the UI by adding a script in the HTML header, checking for window.location.protocol in index.js, adding to the http-proxy-middleware, and using react-https-redirect.
In all cases, I'm able to access the app if I go to the https:// address, but get err_empty_response from the http:// one. None of my http:// requests seem to even reach the app or server.
I've heard that using NGINX as a load-balancer may solve this, but I'm hoping for a solution that doesn't require as much set up. Any suggestions?