I just got IdentityServer to run on my Windows 10 from qickstart VS.Net 2019 project. In my launchSettings.json file, I configured it to run HTTPS on port 5008, instead of the default 5001, as shown bellow:
{
"profiles": {
"SelfHost": {
"commandName": "Project",
"launchBrowser": true,
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
},
"applicationUrl": "https://localhost:5008"
}
}
}
The problem is, when I start IdentityServer using SelfHost profile, it still starts on HTTPS:5001 and my settings are always get ignored, as the console screen shows below:
…
[14:16:04 Information] Microsoft.Hosting.Lifetime
Now listening on: http://localhost:5000
[14:16:04 Information] Microsoft.Hosting.Lifetime
Now listening on: https://localhost:5001
…
What am I doing wrong here? Isn't launchSetting.json the place you can change those settings?
To develop locally with ASP.NET Core under HTTPS, SSL, and Self-Signed Certs, follow these steps:
Install the certificate on the machine, by running in cmd:
dotnet dev-certs https --trust
Copy localhost Certificate thumbprint
Then run in cmd for each URL:
"C:\Program Files (x86)\IIS Express\IisExpressAdminCmd.exe" setupSslUrl -url:https://my.domain.name:<port> -CertHash:<Certificate thumbprint>
I have these instruction with snapshots here
Related
I'm getting a proxy error
Proxy error: Could not proxy request /api/auth/signin from localhost:51171 to http://localhost:3000/
I have noticed that on the starting the server is running on two different ports...
info: Microsoft.AspNetCore.SpaServices[0]
Starting create-react-app server on port 51171...
info: Microsoft.Hosting.Lifetime[14]
Now listening on: http://localhost:5000
info: Microsoft.Hosting.Lifetime[0]
Application started. Press Ctrl+C to shut down.
info: Microsoft.Hosting.Lifetime[0]
Hosting environment: Development
In the package.json I defined the proxy as follows:
"proxy": "http://localhost:3000"
Changed proxy to: "proxy": "http://localhost:5000" and now its working...
Still dont know why smth is running on 51171
I am trying to setup a development environment using HTTP2 requests with Vite and a local backend. I proxy requests between client and server both running on localhost. The server is configured with a generated certificate using Mkcert (https://github.com/FiloSottile/mkcert).
Configuration:
To configure the certificate I run the following steps:
mkcert.exe -pkcs12 "test" "127.0.0.1" "localhost"
Configure the backend to use the generated cert
mkcert.exe -install
Use the following vite configuration:
server: {
https: {
pfx: fs.readFileSync(`./cert/test.pfx`),
passphrase: "some-phrase",
},
proxy: {
"/api": {
target: `https://localhost:15000`,
changeOrigin: true,
secure: true,
},
},
},
Currently this configuration works on Mac but fails on Windows. Both use the same backend and certificates but on Windows the proxy will fail with: "unable to verify the first certificate". In the browser the certificate chain is a correctly validated.
Troubleshooting:
When I run openssl s_client -showcerts -connect localhost:15000 -servername localhost the query results in "unable to verify the first certificate" as well basically indicating that the mkcert Root CA isn't properly found.
Using openssl s_client -showcerts -CAfile "C:\Users\SomeUser\AppData\Local\mkcert\rootCA.pem" -connect localhost:15000 -servername localhost the certificates will be correctly validated. This should indicate that the proxy lacks a reference to the rootCA of Mkcert.
I have tried supplying the rootCA using the following script in package.json:
"dev": "cross-env NODE_EXTRA_CA_CERTS=\"C:\\Users\\SomeUser\\AppData\\Local\\mkcert\\rootCA.pem\" && vite",
This doesn't help however and the proxy still fails with the same error. I assume Mac and Windows work differently when supplying the CA root certs to Node or fails silently?
Anyway, how can this solved? I have been thinking about supplying the full cert chain in a cert that I supply to Vite, but this shouldn't be needed if Node could just reference the RootCA correctly.
The Error
When deploying to Azure Web Apps with Multi-container support, I receive an "Invalid Host Header" message from https://mysite.azurewebsites.com
Local Setup
This runs fine.
I have two Docker containers: client a React app and server an Express app hosting my API. I am using a proxy to host my API on server.
In client's package.json I have defined:
"proxy": "http://localhost:3001"
I use the following docker compose file to build locally.
version: '2.1'
services:
server:
build: ./server
expose:
- ${APP_SERVER_PORT}
environment:
API_HOST: ${API_HOST}
APP_SERVER_PORT: ${APP_SERVER_PORT}
ports:
- ${APP_SERVER_PORT}:${APP_SERVER_PORT}
volumes:
- ./server/src:/app/project-server/src
command: npm start
client:
build: ./client
environment:
- REACT_APP_PORT=${REACT_APP_PORT}
expose:
- ${REACT_APP_PORT}
ports:
- ${REACT_APP_PORT}:${REACT_APP_PORT}
volumes:
- ./client/src:/app/project-client/src
- ./client/public:/app/project-client/public
links:
- server
command: npm start
Everything runs fine.
On Azure
When deploying to Azure I have the following. client and server images have been stored in Azure Container Registry. They appear to load just fine from the logs.
In my App Service > Container Settings I am loading the images from Azure Container Registry (ACR) and I'm using the following configuration (Docker compose) file.
version: '2.1'
services:
client:
image: <clientimage>.azurecr.io/clientimage:v1
build: ./client
expose:
- 3000
ports:
- 3000:3000
command: npm start
server:
image: <serverimage>.azurecr.io/<serverimage>:v1
build: ./server
expose:
- 3001
ports:
- 3001:3001
command: npm start
I have also defined in Application Settings:
WEBSITES_PORT to be 3000.
This results in the error on my site "Invalid Host Header"
Things I've tried
• Serving the app from the static folder in server. This works in that it serves the app, but it messes up my authentication. I need to be able to serve the static portion from client's App.js and have that talk to my Express API for database calls and authentication.
• In my docker-compose file binding the front end to:
ports:
- 3000:80
• A few other port combinations but no luck.
Also, I think this has something to do with the proxy in client's package.json based on this repo
Any help would be greatly appreciated!
Update
It is the proxy setting.
This somewhat solves it. By removing "proxy": "http://localhost:3001" I am able to load the website, but the suggested answer in the problem does not work for me. i.e. I am now unable to access my API.
Never used azure before and I also don't use a proxy (due to its random connection issues), but if your application is basically running express, you can utilize cors. (As a side note, it's more common to run your express server on 5000 than 3001.)
I first set up an env/config.js folder and file like so:
module.exports = {
development: {
database: 'mongodb://localhost/boilerplate-dev-db',
port: 5000,
portal: 'http://localhost:3000',
},
production: {
database: 'mongodb://localhost/boilerplate-prod-db',
port: 5000,
portal: 'http://example.com',
},
staging: {
database: 'mongodb://localhost/boilerplate-staging-db',
port: 5000,
portal: 'http://localhost:3000',
}
};
Then, depending on the environment, I can implement cors where I'm defining express middleware:
const cors = require('cors');
const config = require('./path/to/env/config.js');
const env = process.env.NODE_ENV;
app.use(
cors({
credentials: true,
origin: config[env].portal,
}),
);
Please note the portal and the AJAX requests MUST have matching host names. For example, if my application is hosted on http://example.com, my front-end API requests must be making requests to http://example.com/api/ (not http://localhost:3000/api/ -- click here to see how I implement it for my website), and the portal env must match the host name http://example.com. This set up is flexible and necessary when running multiple environments.
Or if you're using the create-react-app, then simply eject your app and implement a proxy inside the webpack production configuration.
Or migrate your application to my fullstack boilerplate, which implements the cors example above.
So, I ended up having to move off of containers and serve the React app up in more of a typical MERN architecture with the Express server hosting the React app from the static build folder. I set up some routes with PassportJS to handle my authentication.
Not my preferred solution, I would have preferred to use containers, but this works. Hope this points someone out there in the right direction!
I am having a bit of trouble setting up my create-react-app application to proxy requests to my test hosting on Microsoft azure. I have set up the proxy in my app's package.json as follows:
"proxy":{
"/api/*":{
"target":"https://mytestbackend.azurewebsites.net",
"secure":false
}
}
I have set up an axios request to be sent to the backend server on azure. It is in a stand-alone .js which I call from one of my react application's events. It looks like this:
import axios from 'axios';
const login = async (username, password) => {
console.log("Username to send is:"+username);
console.log("password to send is:"+password);
let response = await axios.post('/api/user/login', {username:username,password:password});
console.log(response);
};
export {login};
The problem can't be in my react components, because those two console.log() call show that the values entered are being recieved. If I remove the "secure":false setting from package.json, request fails with Http Error: 500. But if I use the secure setting, it fails with a 404 page. Can someone please shed a little light on what am I doing wrong? Can I only use the proxy on "localhost"? The documentation suggests otherwise. Any help is greatly appreciated.
I have verified that CORS is enabled for the domain on which the dev server is running on the Azure Management Portal. And if I do the request by using the backend's URL directly (that is, not using the create-react-app proxy), it works. The problem must be something in the way the proxy is configured.
The response text for the HTTP Errpr 500 which happens when not using secure is :
Proxy error: Could not proxy request /api/user/login from localhost:3000 to https://mytestbackend.azurewebsites.net (undefined).
Additional info: I have also tested by running my Backend locally on my development machine. The error message occurs but the "undefined" in the parenthesis says "UNABLE_TO_VERIFY_LEAF_SIGNATURE". If using "secure: false, I can call the login endpoint successfully, but calls to other endpoints which require authentication fail because the cookie is not sent by axios.
Doing:
curl -v https://mytestbackend.azurewebsites.net/api/user/login
Has this output:
* SSLv3, TLS handshake, Client hello (1):
* SSLv3, TLS handshake, Server hello (2):
* SSLv3, TLS handshake, CERT (11):
* SSLv3, TLS alert, Server hello (2):
* SSL certificate problem: unable to get local issuer certificate
* Closing connection #0
curl: (60) SSL certificate problem: unable to get local issuer certificate
More details here: http://curl.haxx.se/docs/sslcerts.html
curl performs SSL certificate verification by default, using a "bundle"
of Certificate Authority (CA) public keys (CA certs). If the default
bundle file isn't adequate, you can specify an alternate file
using the --cacert option.
If this HTTPS server uses a certificate signed by a CA represented in
the bundle, the certificate verification probably failed due to a
problem with the certificate (it might be expired, or the name might
not match the domain name in the URL).
If you'd like to turn off curl's verification of the certificate, use
the -k (or --insecure) option.
create-react-app use WebPackDevServer which uses https://github.com/chimurai/http-proxy-middleware#options
So you can use all the options from the same
Now one key header that is import in such cases of externally hosted server is host. This at times can issues if not correct, see below example
Websocket works on EC2 url but not on ElasticBeanstalk URL
Next is the cookies might be associated with localhost, i checked and they should go without any modification. But you might want to use the cookieDomainRewrite: "" option as well
So the final config I would use is below
"proxy":{
"/api/*":{
"target":"https://mytestbackend.azurewebsites.net",
"secure":false,
"headers": {
"host": "mytestbackend.azurewebsites.net"
},
"cookieDomainRewrite": ""
}
}
Also on your client you want to use the withCredentials:true
let userinfo =await axios.get('/api/secured/userinfo',{withCredentials:true});
Create react app http-proxy-middleware, and should support the full set of options.
Some things I would try:
The path to match may be /api/** instead of /api/* if you want to nest multiple levels deep (eg. for /api/user/login)
You may need to add changeOrigin: true if you're proxying to something remotely (not on localhost)
You will likely want to keep secure: false as you aren't running localhost with https.
So in total, I would try
"proxy":{
"/api/**": {
"target": "https://mytestbackend.azurewebsites.net",
"secure": false,
"changeOrigin": true
}
}
After days of trying unsuccessfully to do this, I finally found a setup that works. Proxy is configured like this:
"proxy": {
"/api/user/login": {
"target": "https://localhost:44396",
"logLevel": "debug",
"secure": false
},
"/api/secured/userinfo": {
"target": "https://localhost:44396",
"secure": false,
"logLevel":"debug",
"secure":false
}
Request to both endpoints on the client have withCredientials:true
try {
await axios({
method:'post',
url:'/api/user/login',
withCredentials:true,
data:
{username:username,password:password}}
);
let userinfo =await axios.get('/api/secured/userinfo',{withCredentials:true});
return userinfo;
As you can see, I've moved to testing on my local dev machine. For whatever reason, this setup refuses to work on the azure-hosted backend. I would have preferred that it work as I originally intended, but at least now I can continue with my project.
I am trying to create a chat app using reactJS and pusher, i am getting this error-
Could not proxy request /pusher/auth from localhost:3000 to
http://localhost:5000 (ECONNREFUSED)
in package.json file i have set proxy as-
"proxy": "http://localhost:5000"
and my localhost is defined as 127.0.0.1 in /etc/hosts file.
I have also checked for the port availability using netstat, but these all seems to be correct. Can anybody help?
I had a same problem in my React App and I fixed it by just adding "/" after the port number in package.json file (so now it's: "proxy": "http://localhost:5000/")
I faced a similar issue but in Mac machine. I changed localhost to 127.0.0.1 and that worked for me.
For windows:
"proxy": {
"/auth/google": {
"target": "localhost:5000"
}
}
For Mac:
"proxy": {
"/auth/google": {
"target": "http://127.0.0.1:5000"
}
}
In your server package.json add --ignore client to your "start" or "server" scripts. So it would look like this:
"scripts": {
"start": "node index.js",
"server": "nodemon index.js --ignore client"
}
In server directory
npm install --save http-proxy-middleware
then create a file with this name : setupProxy.js
in src directory of client react folder
then add the following
const proxy = require("http-proxy-middleware");
module.exports = function(app) {
app.use(proxy("/api/**", { // https://github.com/chimurai/http-proxy-middleware
target: "http://localhost:5000",
secure: false
}));
};
In proxy configuration make sure you are matching any path
with double ** not only *
Note: you are not going to require this proxy anywhere else
just like that
Note: remove any other proxy settings in package.json
For more check this reference
I think You have not start your Back end server. Try start both Back end and Front end server concurrently. Just simply run npm start in both back end and front end.
In your node module include
{
...
"proxy": "http://127.0.0.1:5000"
}
Where the ... simply means you should append the proxy ip to it.
Also, if you are using axios, doing axios.post('api/users') works and not axios.post('/api/users')
For those who are using Docker, if your docker-compose.yml looks like:
services:
app:
...
depends_on:
- api
ports:
- 3000:xxxx
...
api:
...
ports:
- 5000:xxxx
...
Then we should set the proxy URL to
"proxy": "http://host.docker.internal:5000"
In package.json file just add "/" after the port number and it should work fine.
"proxy": "http://localhost:5000/"
I have similar issue.
The problem was that server was listening on ipv6 ::1 address
and the proxy was connecting to ipv4 127.0.0.1
I changed both addresses from localhost to 127.0.0.1
Use
"proxy":"http://localhost:PORT_NUMBER/"
in package.json
and in axios backend call route like
use axios.get("api/user/getinfo") instead of axios.get("/api/user/getinfo");
None of these answers were helping me despite everyone's effort. Finally, thankfully, I found this github discussion where someone said use node server.js to start the server. This WORKED. Before I was using nodemon server.js and npm start. I've no idea why those commands weren't able to connect to my proxy at http://127.0.0.1:5000 but node server.js could.
Cheers
I think Server not working properly, you should run client and server concurrently for that add following procedures in package.json file
1) Install concurrently
npm install concurrently --save
2) configure client and server
"server": "nodemon server.js",
"client": "npm start --prefix client"
3) configure concurrently
"dev": "concurrently "npm run server" "npm run client""
if you are not using concurrently at your server side then simply run each front-end and back-end separately such that server side should run first and client side last.
Changing localhost to [::1] solved my problem.
Taken from here https://forum.vuejs.org/t/proxy-error-with-vue-config-js-and-axios/110632/4?u=mahmoodvcs
This has something to do with default settings of create-react-app.
I found a solution from Github Issue. Read the response by danielmahon on 15 Mar 2018
"proxy": {
"/api": {
"target": "https://localhost:5002",
"secure": false
}
},
If you can't connect to localhost on port 5000 via telnet (you can download and use PuttY if you don't have telnet installed), then that means that server isn't running.
If you're using a Windows machine, go to your package.json for the server that is running on port 5000 and change this line:
"start": "./node_modules/.bin/concurrently \"./node_modules/.bin/nodemon\" \"npm run client\"",
To this:
"start": "./node_modules/.bin/concurrently \"npm run server\" \"npm run client\"",
Watch your build messages and you should see something similar to the following:
[0] 🌎 ==> API Server now listening on PORT 5000!
[1] Starting the development server...
[1]
[1] Compiled successfully!
[1]
[1] You can now view chat app in the browser.
[1]
[1] Local: http://localhost:3000/
[1] On Your Network: http://192.168.1.118:3000/
[1]
[1] Note that the development build is not optimized.
[1] To create a production build, use yarn build.
My issue was trying to run my react project with docker containers open.
Change the ports or shut down the containers.
In my case the problem was that I have been accessing the PORT by the wrong name, i had it PORT instead of SERVER_PORT which was my correct environment variable name. So this problem means that there is a something wrong in your code, in my case the port on which the server should be running was undefined.
Proxy error: Could not proxy request /signup from localhost:3000 to http://localhost:8282/. See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).
I got the same issue and I just solved it by only restart both of the server, you need to run both of the server running.
Thanks me ltr:)
If you are using axios, then follow this.
Using proxy might not work sometimes. There is a standard way to solve this issue.
For that we need to configure our axios before sending requests. axios has a method to set the baseURL create() Create a new file http.js in your src folder.
import axios from 'axios'
const http = axios.create({
baseURL: "http://localhost:5000"
headers: {
Accept: "application/json",
"Content-Type": "application/json"
}
})
export default http
Now insted of using using axios for sending request, use this
import axios from "../../http";
happy coding!
In my case, I changed port number from 5000 to 7000, while reactjs was still fetching on localhost 5000, after I changed everything worked perfect
ReactJs FETCH HOOK:
const { data, loading, error } = useFetch(
"http://localhost:7000/api/hotels/countByCity?cities=Arusha,Dodoma,Mwanza,Dar-es-salaam"
);
NodeJS server port:
const PORT = process.env.PORT || 7000;
I recently got this error when waiting for a response from my rest API function which does not return any.
so you either need to change the API implementation and send something back to the client or just don't wait for a response if you are not returning any.