I'm having issues with the proxy I set up.
This is my root package.json file:
"scripts": {
"client": "cd client && yarn dev-server",
"server": "nodemon server.js",
"dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""
}
My client package.json file:
"scripts": {
"serve": "live-server public/",
"build": "webpack",
"dev-server": "webpack-dev-server"
},
"proxy": "http://localhost:5000/"
I've set up express on my server side to run on port 5000. Whenever I make a request to the server, ie :
callApi = async () => {
const response = await fetch('/api/hello');
const body = await response.json();
// ... more stuff
}
The request always goes to
Can someone point out what i have to do to fix this issue so that the request actually goes to port 5000?
I experienced this issue quite a few times, and I figured it's because of the cache. To solve the issue, do the following
Edit: #mkoe said that he was able to solve this issue simply by deleting the package-lock.json file, and restarting the app, so give that a try first. If that doesn't resolve it, then do the following.
Stop your React app
Delete package-lock.json file and the node_modules directory by doing rm -r package-lock.json node_modules in the app directory.
Then do npm install in the app directory.
Hopefully this fixed your proxy issue.
The reason the react application is still pointing at localhost:8080 is because of cache. To clear it , follow the steps below.
Delete package-lock.json and node_modules in React app
Turn off React Terminal and npm install all dependencies again on React App
Turn back on React App and the proxy should now be working
This problem has been haunting me for a long time; but if you follow the steps above it should get your React application pointing at the server correctly.
This is how I achieved the proxy calls.
Do not rely on the browser's network tab. Put consoles in your server controllers to really check whether the call is being made or not. For me I was able to see logs at the server-side. My node server is running on 5000 and client is running on 3000.
Network tab -
Server logs -
Check if your server is really running on the same path /api/hello through postman or browser. For me it was /api/user/register and I was trying to hit /api/user
Use cors package to disable cross-origin access issues.
Is your client being loaded from http://localhost:8080?
By default the fetch api, when used without an absolute URL, will mirror the host of the client page (that is, the hostname and port). So calling fetch('/api/hello'); from a page running at http://localhost:8080 will cause the fetch api to infer that you want the request to be made to the absolute url of http://localhost:8080/api/hello.
You will need to specify an absolute URL if you want to change the port like that. In your case that would be fetch('http://localhost:5000/api/hello');, although you probably want to dynamically build it since eventually you won't be running on localhost for production.
For me "proxy" = "http://localhost:5000 did not work because I was listening on 0.0.0.0 changing it to "proxy" = "http://0.0.0.0:5000 did work.
Make sure you put it on package.json in client side (react) instead of on package.json in server-side(node).
This solution worked for me, specially if you're using webpack.
Go to your webpack.config.js > devServer > add the below
proxy: {
'/api': 'http://localhost:3000/',
},
This should work out.
Read more about webpack devSever proxy: https://webpack.js.org/configuration/dev-server/#devserver-proxy
I have tried to solve this problem by using so many solutions but nothing worked for me. After a lot of research, I have found this solution which is given below that solved my proxy issues and helped me to connect my frontend with my node server. Those steps are,
killed all the terminals so that I can stop frontend and backend servers both.
Installed Cors on My Node server.js file.
npm install cors
And added these lines into server.js file
var cors = require('cors')
app.use(cors())
Into package.json file of frontend or client folder, I added this line,
"proxy" : "http://127.0.0.1:my_servers_port_address_"
Now everything working fine.
Yours might not be the case but I was having a problem because my server was running on localhost 5500 while I proxied it to 5000.
I changed my package.json file to change that to 5500 and used this script:
npm config set proxy http://proxy.company.com:8080
npm config set https-proxy http://proxy.company.com:8080
I am pretty sure just changing it on the package.json worked but I just wanted to let you know what I did.
you should set the proxy address to your backend server, not react client address.
you should restart the client after changing package.json
you should use fetch('/api/...') (instead of fetch('http://localhost:8080/api/'))
Make sure you check your .env variables too if you use them. It's because of that if I was looking for a solution on that page.
I tried all the solutions, proposed here, but it didn't work. Then I found out, that I tried to fetch from root directory (i.e. fetch('/')) and it's not correct for some reason. Using fetch('/something') helped me.
Your backend data or files and react build files should be inside the same server folder.
you must give proxy after the name.{"name":"Project Name", "proxy":"http://localhost:5000"}
port should match with your backend's port.
If you are seeing your static react app HTML page being served rather than 404 for paths you want to proxy, see this related question and answer:
https://stackoverflow.com/a/51051360/345648
(This doesn't answer the original question, but searching Google for that question took me here so maybe this will help others like me.)
In my specific case, I had a both Node backend, and an inner folder with a React project. I tried #Harshit's answer, which didn't work, until I had two package.json files in my project, one in the outer folder, and one in my client (React) folder. I needed to set up the proxy in the inner package.json, and I needed to clear the cache in the inner folder.
I was having this issue for hours, and I'm sure some of the things above could be the cause in some other cases. However, in my case, I am using Vite and I had been trying to add my proxy to the package.json file, whereas it should be added to the vite.config.js file. You can click here to read about it in Vite's docs.
In the end, my code looks like this:
export default defineConfig({
server: {
proxy: {
"/api": {
target: "http://localhost:8000",
secure: false,
},
},
},
plugins: [react()],
});
My problem was actually the "localhost" part in the proxy route. My computer does not recognize "localhost", so I swapped it with http://127.0.0.1:<PORT_HERE> instead of http://localhost:<PORT_HERE>.
Something like this:
app.use('/', proxy(
'http://localhost:3000', // replace this with 'http://127.0.0.1:3000'
{ proxyReqPathResolver: (req) => `http://localhost:3000${req.url}` }
));`
For me, I solved this by just stopping both the servers i.e. frontend and backend, and restarting them back again.
Here is an opinion
Don't use proxies, use fetch directly
not working
fetch("/signup", {
method:"post",
headers:{
"Content-Type":"application/json"
},
body:JSON.stringify(
{
name:"",
email:"",
password:"",
}
)
Actually worked after wasting 6hours
fetch("http://localhost:5000/signup", { // https -> http
// fetch("/signup", {
method:"post",
headers:{
"Content-Type":"application/json" },
body:JSON.stringify(
{
name:"",
email:"",
password:"",
}
)
In my case the problem was that the proxy suddenly stopped to work.
after investigating I found that I've moved the setupProxy from the src folder and that cause the problem.
Moving it back to the src folder have solved the problem.
The problematic structure:
The solution:
faced similar issue. my proxy was not connecting restarting the react app fixed my issue
In my case it was because of typo. I wrote "Content-type": "application/json", (with small t) instead of "Content-Type": "application/json",
you should install this package:
npm install http-proxy-middleware --save
refrense: this link
Make sure your end point match with the backend.
Related
So I tried to implement Facebook Login feature in my nodejs backend server. For testing purpose, I am trying client side to check the login and get access token. For that, I followed the docs and it says to use Javascript SDK and I followed the procedure, but there is a problem.
window.fbAsyncInit = function() {
FB.init({
appId : '##############',
autoLogAppEvents : true,
xfbml : true,
version : 'v4.0'
})
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
This is the code where I want to get the user login status, but I get an error saying:
The method FB.getLoginStatus can no longer be called from http pages
I am very much aware about the production rules, but this is development mode I am working on and still getting the error. Anything I am missing? Anything I have to do? I am running it on localhost and getting the error.
If your server runs on localhost (aka on your machine): Use devcert for https on localhost
alternatively, use a self signed certificate manually
...or use ngrok, if you want to expose your local server
If not on localhost, use a free certificate of Let's Encrypt with certbot: https://letsencrypt.org/docs/client-options/
There's an easier fix if using create-react-app: set environment variable HTTPS to true. Cange your start script in package.json:
"scripts": {
"start": "HTTPS=true react-scripts start",
...
}
If already using a custom script, you can also add it there:
process.env.HTTPS = true;
The main advantage of the latter method is that you can add a comment to explain it.
More info on configuration in CRA: https://create-react-app.dev/docs/advanced-configuration
To solve this problem "The method FB.getLoginStatus can no longer be called from http pages" i used application https://ngrok.com/
and its make https in my browser on localserver via tunneling or sth like that
Windows 10 +wsl(Debian)
Download ngrok
Unzip it to folder
Run cmd and navigate to folder with ngrok
Now You can run :"ngrok http:80" <-assuming that You have apache2 service working
I have my project in different/sub folder of DocumentRoot and i need also do this:
https://stackoverflow.com/a/51114684
For those running NextJS, there is a detailed discussion here:
https://github.com/vercel/next.js/discussions/10935
I think the simplest solution among the comments is this:
yarn add --dev local-ssl-proxy
next dev -p 3001 & local-ssl-proxy --source 3000 --target 3001
If you're using Chrome, navigate to chrome://flags/#allow-insecure-localhost and enable the setting.
The down side of this solution is that local-ssl-proxy is a very old package. But it serves the purpose if you only need to test some HTTPS only features.
If you're using the Vue CLI to develop your website or app, then in package.json you can use this:
"serve": "vue-cli-service serve --https true",
Instead of:
"serve": "vue-cli-service serve",
And it worked fine.
It works on local machines but there is something you need to do first.
Change your machine URI from the X.X.X.X to localhost.
Ex: Change http://127.0.0.0 ---> http://localhost
I'm new to vue and kind of confuse here.
I'm using vue-cli to build a vue app, I understand I can run a development server with npm run serve which is referenced as a script in my package.json for vue-cli-service serve
But my app need some data coming from a local node.js server. I cannot request this server from development mode because it's running on a different server.
To make my app work I'm obligated to build for production with
npm run build
Then to ask my node server to render by default the produced index.html file.
How could I combine development mode and my node server?
What would be the best way to make this work?
Thanks a lot
I stumbled across this, and found the answer buried at the bottom of the comments list, so I thought I'd highlight it.
This answer is taken from #Frank Provost comment, which really should be the accepted answer. As mentioned in his link https://cli.vuejs.org/config/#devserver-proxy all you need to do is create/edit vue.config.js file in your (client) project root to include this:
module.exports = {
devServer: {
proxy: 'http://localhost:3000' // enter dev server url here
}
}
Then start your dev server as usual from your server project:
[server-root]$ npm run dev
And run your client project from vue-cli project
[client-root]$ npm run serve
Then when you visit the client url (usually localhost:8080) all api requests will be forwarded to your dev server. All hot module replacement still works on both client and server.
I have a split app using nestjs on the server and an Angular app as the client. Setting up websockets with socket.io seemed pretty easy using the #nestjs/websockets module and on the client I used ngx-socket-io. I used this repo as basis. Now when I update the project's #nestjs/websockets dependency to the latest version I get
CORS errors and
an error that the client couldn't load the socket.io client js file
I expected CORS problems and after the update, I could fix them by adding
app.enableCors({
origin: 'http://localhost:4200',
credentials: true,
});
to my main.ts file, but I don't know why the client file is not served. With the version of the repo (5.7.x) there are neither CORS errors nor problems with serving the file.
I tried a couple of settings of #WebSocketGateway(), moving to a different port, setting serveClient (even though it should be true by default), but nothing seemed to work. Any advice?
thanks
In my case
I replaced
app.useWebSocketAdapter(new WsAdapter(app));
from
import { WsAdapter } from '#nestjs/platform-ws';
with
app.useWebSocketAdapter(new IoAdapter(app));
in main .ts from
import { IoAdapter } from '#nestjs/platform-socket.io';
Worked like a charm!
The problem was that nestjs did separate the lower level platform (socket.io, express, fastify, ...) from the nestjs modules. The websocket module requires to install an underlying platform, for socket.io
npm install --save #nestjs/platform-socket.io
To serve the socket.io client file it seems like there also needs to be an HTTP platform installed, for express
npm install --save #nestjs/platform-express
More info in the migration guide for v6.
I had the same problem. i was opening the client side of the application in the web-browser, but directly from my filesystem (i would double click on the file index.html next to the little dummy fake-front-end.js on my desktop for example...). It seems that the CORS problem would persist until i actually accessed the index.html through a proper server. So i created a route on my backend, to serve the index.html, and the fake-front-end.js.
There is a section about CORS on the socket.io officual documentation. And there is a section on the nestjs website, but both didnt really helped in my case.
thanks for taking time to help me
im deploying a nodejs express js project
these are the steps that i have done:
1- change the port to: process.env.PORT
code:
const PORT = process.env.PORT || 9000;
app.listen(PORT , function() {
console.log('Application is listening on 9000');
});
2- create Procfile with: web: node server.js
3- make sure in package json the npm start command points to "node path/server.js"
the server works locally
4- important note: I am sending an AJAX request from my front end to the server to get data
I have read on you documentation that i should add 0.0.0.0
$.ajax({
url: "0.0.0.0/hotels",
cache: false,
type: 'GET',
success: function(result) {
bla bla ....
}
});
also i have tried to add the url of heroku the one i get after creating
thanks in advance
have a great day
did not solve it yet but i organized some helpful heroku commands
useful commands
git remote -v
git remote rm heroku
heroku create
git push heroku master
heroku ps:scale web=1
heroku open
heroku logs --tail
heroku run bash
Your code there looks fine (except 0.0.0.0 -- just use a relative path like /). I would ensure you've actually pushed the changes you have there. If you run heroku run bash, do you see your Procfile? When you run node server.js in that environment, does it run successfully?
I've seen Heroku customers get stuck on an issue like this, when the reality is that the code they have locally wasn't properly sent to Heroku.
Hello #jmccartie thank you for replying but it still does not work
could it be the static __dirname? im starting to question every part of the code :D
I changed the path and just to make sure i understood correctly
it used to be : "http://localhost:9000/data/hotels"
now is: "/data/hotels"
would you mind taking a look at my code?
just double check the parts i mentioned
https://github.com/hibaAkroush/herokuNode
i will name the files to make it easier for you
1- Procfile in the root
2- server in server/index.js line 24
3- the front end (where im sending an ajax get request) client/home.js line 6
4- packagejson line 10: "start": "node server/index.js"
thanks
ok i fixed it ...
wohoo!
not sure which thing i made fixed it
but what i did was:
1- I moved the server to the root and of course changed the code a bit so it would still work than i tested it locally to make sure
2- pushed on github
3- added ./ to procfile so it became
web: node ./index.js
instead of web: node index.js
thanks everyone !
this seemed easy question now blocked my brain, hope to get your help.
I am now using webpack to start angular2 app, it is fine, just run npm start, in realty, it is running this command to boost angular2 project
webpack-dev-server --inline --progress --port 8080
Now everything is fine until I want to start actual development. Our actual development is using nodeJS, I want to use nodeJS to boost the whole angular2 project. I know I can use npm build to build angular project and then using static page inside nodeJS/express to loda that static page. This is ok for deployment or production enviornment. But for development, how can I do?
As above mentioned, I am using webpack-dev-server to boost ng2 project, which is reading a lot webpack.configuration, such as type script loader, sass loader, by default it is port 8080, but in my nodeJs project, it is using "node app" to start, and port is 3000. Obviously, this has caused cross domain issue here.
So is that possible to let nodeJS to boost my local development environment in ng2 so as to avoid the cross domain issue? If I use nodeJS, then where the webpack solution goes?
Hope to hear your suggestion
You can try two solutions. In both you need to have 2 servers: webpack and yours. Both work for any backend.
Enable CORS on your server responses. This might be tricky. Also, it does not really replicate the production behaviour (folder structure, URL paths, etc.)
Proxy all non-webpack output to your server. This is achieved by a couple of lines in a webpack config but it is really good because you still see your non-angular pages, content, static files etc as you would see them in production. What is also good, you can specify your production (stage, develop, whatever) server as a target and simply have no backend running on your machine at all.
This is how-to:
devServer: {
port: 8080,
proxy: { '**': { target: 'http://localhost:3000', secure: false, headers } }
},
This will start angular server on 8080 and redirect any non-webpack generated file to the target.