I have an angular universal app set up. I do POST requests on the server-side using localhost to pre-render my app and this works fine.
An example working url would be http://localhost:8000/api/get-info.
I've now put the app into production on an external url (apache server). I'm also using ssl.
Now when I try to do a POST request on the server-side to pre-render my app, I get back a response with status: 0, url: null (I'm assuming this means the connection was refused).
An example non-working url would be https://mywebsite.com/api/get-info.
What really stumps me is that when the app loads on the client, all HTTPS requests start working. So the problem is I cannot get the express server to send POST requests to my external url.
I've tested a post request on the server-side to a different website (twitter), and that seems to work fine as well. So i'm not entirely sure where I've gone wrong.
I already have CORS set to '*' as well.
Try using
http://localhost:8000/api/get-info
in production as well. Since your Angular app is rendered on the same server as your API is running, using localhost should just work fine. It doesn't matter if you are on an external URL.
I do something similar (its a GET but that shouldn't matter) with my translations:
if ( this.isServer ) {
translateLoader.setUrl( 'http://localhost:4000/assets/localization/' );
} else {
translateLoader.setUrl( 'assets/localization/' );
}
It works locally and in production (both server and client).
I just encountered this problem myself for two days. Please take a look at my comment on https://github.com/angular/universal/issues/856#issuecomment-426254727.
Basically what I did was I did a conditional check in Angular to see if the APP is running in browser or in server (rendered by Angular Universal), and change my API endpoint to actual IP in https or localhost in http accordingly. Also in my Nginx setting, I only redirect incoming request from browser to https by checking if the server_name is localhost.
Hope it helps!
Related
enter image description hereenter image description hereenter image description here
Assalamu ‘Alaykum
my React app is running on localhost:3000
NodeJS server is running on localhost:1000
I'm sending request to server 'localhost:1000' and everything is fine, correct response is coming from server, there is no error in Console, but in Chrome Network request-url is to localhost:3000/.../...
if I sent wrong data to server, it's coming correct error and bad request error in Console
can someone help me,
thanks
It sounds like your React app is making requests to the wrong URL. Based on the information you provided, it appears that your React app is running on localhost:3000 and your Node.js server is running on localhost:1000, but your requests are being sent to localhost:3000.
To fix this issue, you will need to update your React app to send requests to the correct URL, which should be http://localhost:1000/auth/sign/in. This can typically be done by updating the base URL or endpoint for your API requests in your React app.
For example, if you are using the fetch API to make requests in your React app, you can update the base URL for your requests by setting the baseURL property in your fetch options:
fetch('/auth/sign/in', {
baseURL: 'http://localhost:1000',
// Other fetch options
})
Or, if you are using a library such as Axios to make requests in your React app, you can update the base URL for your requests by setting the baseURL property in the Axios configuration:
import axios from 'axios';
axios.defaults.baseURL = 'http://localhost:1000';
After updating the base URL for your API requests, your React app should send requests to the correct URL, http://localhost:1000/auth/sign/in, and you should no longer see requests being sent to localhost:3000 in the Chrome Network tab.
It's worth noting that the exact solution for updating the base URL for your API requests will depend on the specific details of your React app and how you are making requests to your server. If you are having trouble updating the base URL, you may want to consult the documentation for the specific library or API you are using.
I have an ASP.NET Core 3.1 web app that I run on my local development machine. This app successfully runs. I can also successfully execute requests to it via Postman. I'm trying to run a test from a Node.js app. This app is using Axios to try to load one of the web pages. The request looks like this:
const result = await axios.get('https://localhost:5001/');
When this request runs, I receive the following error:
Error: unable to verify the first certificate
...
code: 'UNABLE_TO_VERIFY_LEAF_SIGNATURE',
...
The fact that I can a) load the url in my browser and b) run the request from Postman leads me to believe there is a config issue with my Node app. I don't know if it's an issue with a) my axios request or b) some app configuration. Oddly, I receive the same error if I try to execute my request against http://localhost:5000/ (i.e. not over HTTPS).
I'm unsure how to resolve this issue though. How do I execute a request via Axios against a web app running on localhost?
You'll need to tell axios/node what signing authorities to trust (your browser and postman will already have several of those set up)
You do that by configuring the https agent in axios - have a look at this answer for an example : How to configure axios to use SSL certificate?
And here are instructions on how to get the bundle from the browser (you'll probably need to use a p7b/pfx or get all certs in the chain): https://medium.com/#menakajain/export-download-ssl-certificate-from-server-site-url-bcfc41ea46a2
I am trying to connect an app hosted in my localhost:3000 port. The back-end is on the localhost:8080 port (not a remote API but on my own PC. I downloaded a pre-created back-end api and linked the front-end to the back-end with MongoDB using an .env file.
The weird thing is that on MongoDB the connection looks ok, following the tutorial I am using. The backend and the front-end also look alrigh, however, I am unable to login with the form in the screenshot.The error I get when trying to login or create a new user is "xhr.js:178 POST http://localhost:3000/login 404 (Not Found)"
It was a bit hard to put the whole code here, so I am linking you to the front-end repo: https://github.com/manuelalonge/complex-app and the back-end repo: https://github.com/manuelalonge/back-end-api
I can understand the issue is most likely on the back-end but I could not understand where exactly. I tried to get back to the previous lessons in the tutorial but it still doesn't get solved.
Probably it is easier to solve this issue with a screenshare session, so if anybody would contact me I'll be grateful.
Screenshot --> [1]: https://i.stack.imgur.com/jVJzn.png
Your screenshot points to what's wrong. You're posting to localhost:3000, as you know this is the frontend webpack server.
You'll want to create an axios config file and set a base url to hit the correct endpoint.
const axiosInstance = axios.create({
baseURL: 'localhost:8080'
});
export default axiosInstance;
Also, please add some sort of file structure.
I am a beginner at react development, I am confused about when I should use proxy or cors to make the front end talk to the back end.. Or do i need to use both? like proxy for development and cors for production?
CORS is completely related to back end when you want make your back end server accessible for any request use CORS.
example:
const app=require('express');
const cors=require('cors');
app.use(cors())// server will respond to any domain
Most of the time you are going to use a proxy when you want to be able to connect to an api that the webpack dev server isn't hosting but will be hosted by your server when published. An example will probably clear this up better than anything.
When developing you have the following scenario
API Server - running at localhost:4567 Webpack Dev Server - running at localhost:8080
Your App.js will make a request to the API server like so
$.ajax({
url: '/api/getOwnedGames',
...
});
Without a proxy this will actually make a request to localhost:8080/api/getOwnedGames (since you are browsing from the webpack dev server). If you however setup the proxy like so...
proxy: {
'/api/*': {
target: 'http://localhost:4567'
}
}
the api request will get rewritten to be http://localhost:4567/api/getOwnedGames.
if you aren't hosting your own api you probably don't need the proxy.
I have an app set up using BackboneJS, NodeJS and ExpressJS. I have trouble accessing my routes from my application. But I can access my routes directly in my browser and see the output.
For example this works:
http://test.myserver.com:3000/employees/1
(where test.myserver.com is my server address accessible externally)
My express server declaration is as follows:
var express = require('express'),
employee = require('./routes/employees');
var app = express();
app.get('/employees/:id', employee.findById);
app.listen(3000);
My problem is that when I try to access the route through my application I get an access error.
http://test.myserver.com/pages/index.html#employees/1
GET http://localhost:3000/employees/1?callback=jQuery19107984810129273683_1457829695460&_=1457829695461 net::ERR_CONNECTION_REFUSED
How can I access my routes from within my application using Express?
I see an issue. You say you're loading a web page at:
http://test.myserver.com/pages/index.html#employees/1
But, the URL request is for:
http://localhost:3000/employees/1?callback=jQuery19107984810129273683_1457829695460&_=1457829695461
Those are different domains and different ports. It looks to me like jQuery sees that this is a cross origin request and is trying to turn it into a JSONP request, but your server is not support JSONP.
Likely what you need to do is to get the Javascript in your web page to be requesting the SAME origin (same domain, same port) that the web page is loaded from. Then, it will not be cross origin request and it should work (if nothing else is wrong).
Please show us the relevant Javascript in your web page that is making this request so we can advise more specifically on how to fix it.
Also, if you're expecting your node.js server to serve your web pages, you will need node.js code to do that (you don't show any of that code) since node.js does not serve any pages by default (unlike some other web servers).