here is my app link https://course-s.herokuapp.com/ and here is my Github repo https://github.com/shaikafroz016/Course-S . The app work perfectly in localhost whit express, MongoDB Atlas, and node server as a backend and react-redux as a frontend but when I am trying to run this on Heroku my says's failed to fetch whats the problem.
EDIT:
I have mentioned the base url as localhost:3000 in my client so should i have to add heroku app link to base url? can you please help me what to do. And also when i am trying the app with backend localhost (localhost:3000) it work just fine as i close my local server the heroku app says faild to fetch
This must be because of CORS (Access-Control-Allow-Origin), here's a workaround :
run npm install cors
and then add this to your app.js file :
var cors = require('cors')
app.use(cors())
Be sure to add this before all your requests definition (app.get, app.post, etc...)
Now CORS is enabled.
The Access-Control-Allow-Origin header determines which origins are allowed to access server resources over CORS.
Explanation : https://medium.com/#alexishevia/using-cors-in-express-cac7e29b005b
Related
I've deployed an server-side rendering React app (bundled without CRA):
it has an express server for server-side rendering (listens to port 3000 or process.env.PORT)
it has an express server for the API that serves the frontend (listens to port 8080 or process.env.PORT)
On localhost, the frontend makes a request to http://localhost:8080/api to get the data, which works perfectly.
From my understanding, when the app is in production, the base API URL should be the app's URL (eg. https://myapp.herokuapp.com) instead of http://localhost:8080, so I added this change in my code:
if the app is in dev, the frontend calls http://localhost:8080/api
if the app is in prod, the frontend calls https://myapp.herokuapp.com/api(I added https://myapp.herokuapp.com/as a config var in Heroku)
However, it doesn't work. My app is deployed successfully to Heroku and the SSR renders correctly, but the API call fails. (I also tried https://myapp.herokuapp.com/api:3000 which fails)
What should be the API URL to call a local server when the app is in production?
thanks a lot!
Well, as far as I know Heroku doesn't allow multiple ports and you will not be able to open 3000 for web and 8080 for api.
You can serve both on the same port and route /api to the api.
I have worked on a project that uses similar approach and below is the code:
app.use('/api', router); // every api route is in the router
app.use(express.static(staticDir));
It is also deployed to heroku.
full repo if you wish to take a look - https://github.com/berkeli/breteau-dashboard/blob/main/server/utils/createServer.js
I need to deploy a simple react app just for showcase purposes. But there is a problem when I'm trying to host it on Netlify, Vercel, Firebase and I can't use heroku. I'm getting this.
Mixed Content: The page at 'https://ip-tracker-b72ffu8s0.vercel.app/' was loaded over HTTPS, but requested an insecure resource 'http://api.ipstack.com/check?access_key=3a79079d875...'. This request has been blocked; the content must be served over HTTPS.
I would like to use https://api.ipstack.com/check instead of http://api.ipstack.com/check
but free plan do not allow me to use https.
The question is where I can deploy react-app on http? I don't care about safe connections. I just want to deploy as a demo.
I have a PERN stack app using auth0 for login that is working fine on localhost but when deployed to heroku after I click to sign in I get a 404 on the callback.
The URL is exactly the same except for appname instead of localhost on all routes, i have also the env variables and callback and logout urls setup in auth0 correctly.
Is there anyone who has run into this and can help me solve this problem? Thanks.
check your port. I thought my port was 3000 (I'm using Next.js on Heroku with Auth0), but it actually isn't running on 3000, but whatever Heroku decides. I changed my auth0 Allowed Callback URLs and all is working!
The front-end app is built on ReactJs and development server is running on http://localhost:3000. The back-end API is built with Flask 2.0.2 and is running on http://localhost:5000
In app.py file, the CORS has been allowed as mentioned in the documentation like:
CORS(app, resources={r"*": {"origins": "*"}})
When I try to submit the login form I still get the following error:
if you Enables CORS on your backend api , it should work.
I don't think this is an issue with your react frontend application.
cors is a security measure put in by browsers.
You could bypass the Cross-Origin-Policy with chrome extension but it's not advisable -
Try this on your backend API:
Ensure you have flask cors installed
create a configuration dictionary like this
api_v1_cors_config = {
"origins": ["http://localhost:5000"]
}
You can then set a global cors for your app like this
CORS(app, resources={"/api/v1/*": api_v1_cors_config})
// this would allow all methods, origins
I have a node.js Server listening on 3300. It is tested okay with postman.
I have a react app created using create-react-app listening on 3000 and package.json having the statement "proxy":"http://localhost:3300". This is also tested okay.
I have another react app on the same machine, which is using webpack and listening on 8080. The package.json also has the same proxy statement "proxy":"http://localhost:3300" . In this case, when I am calling the api /api/users, my console log says
api-auth.js:5 POST http://localhost:8080/auth/signin/ 404 (Not Found)
if I directly call the api as
fetch('http://localhost:3300/api/users')
it fails with CORS error.
just to be more clear, this failing react app is actually downloaded from http://mdbootstrap.com in which I add a login form to test if it works.
Can you please help me resolve this issue?
As per my understanding just by adding the proxy line in the package.json does the trick but somehow it does not work when webpack is used.... is there something I should do in webpack as well?
Unless I'm mistaken, { proxy } from package.json is not read by webpack, webpack-dev-middleware or webpack-dev-server. It would explain the 404 response you are receiving.
You should try configuring { devServer.proxy }. If you would prefer, you can even import package.json to get the server URL.
Here's a simple example with with a web server proxying requests to an API server listening on localhost:3000.
You don't need proxy for this, you can install npm package "cors".
https://www.npmjs.com/package/cors
And use it at you node.js server. Here is how i use it at my express.js server.
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());