I am finding myself pretty stuck using grunt-connect-proxy to make calls from my yeoman generated angular app running on port 9000 to my laravel backend which is running on port 8000. After following the instructions on the grunt-connect-proxy github I see the following message upon running grunt serve:
Running "configureProxies:server" (configureProxies) task
Proxy created for: /api to localhost:8000
I have my proxies set up here in connect.proxies directly following connect.options:
proxies: [{
context: '/api', // the context of the data service
host: 'localhost', // wherever the data service is running
port: 8000 // the port that the data service is running on
}],
In my controller then attempt to make a call to the api to test my proxy:
var Proxy = $resource('/api/v1/purchase');
Proxy.get(function(test){
console.log(test);
});
In the result of this in my console is a 500 error indicating that the call was still made to port 9000 rather than 8000:
http://localhost:9000/api/v1/purchase 500 (Internal Server Error)
Here is a link to a gist containing my full gruntfile: https://gist.github.com/JohnBueno/7d48027f739cc91e0b79
I have seen quite a few posts on this but so far none of them have been of much help to me.
Related
Forgive bad formatting as it is my first question on here, and thanks in advance for reading!
I am currently writing a remote web application that utilises Apache Guacamole to allow RDP, VNC, and SSH connections. The components I am using are:
Django for backend server - API calls (database info) and Guacamole Websocket Transmissions;
I am using Pyguacamole with Django consumers to handle Guacamole Server communication;
Reactjs for frontend and proxy;
Nginx for reverse proxy;
All this is hosted on a Centos Stream 8 vm
Basically, my websocket has trouble communicating through a proxy. When I run the application without a proxy (firefox in centos running localhost:3000 directly), the guacamole connection works! Though this is where the application communicates directly with the Django server on port 8000. What I want is for the react application to proxy websocket communications to port 8000 for me, so my nginx proxy only has to deal with port 3000 for production.
Here is the code I have tried for my react proxy (src/setupProxy.js):
const { createProxyMiddleware } = require('http-proxy-middleware');
let proxy_location = '';
module.exports = function(app) {
app.use(createProxyMiddleware('/api', { target: 'http://localhost:8000', changeOrigin: true, logLevel: "debug" } ));
app.use( createProxyMiddleware('/ws', { target: 'ws://localhost:8000' + proxy_location, ws: true, changeOrigin: true, logLebel: "debug" } ));
};
I have also already tried with http://localhost:8000 for the ws target url. Also, the api proxy works, but I am unsure if the ws proxy works. After making a websocket request, the consumer does a guacamole handshake, but disconnects the websocket before it can send anything back.
Also, the HPM output shows that it does try upgrading to websocket, but the client disconnects immediately.
Do let me know if you require more information.
I managed to find what was wrong, it was a small mistake though I felt the need to update this thread.
Basically, in consumers I used accept() instead of websocket_accept(), receive() instead of websocket_receive(), and so on. Careless mistake on my part, but hope this helps someone out!
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'm trying to test my React application on a mobile device. I'm using ngrok to make my local server available to other devices and have gotten this working with a variety of other applications. However, when I try to connect ngrok to the React dev server, I get the error:
Invalid Host Header
I believe that React blocks all requests from another source by default. Any thoughts?
I'm encountering a similar issue and found two solutions that work as far as viewing the application directly in a browser
ngrok http 8080 --host-header="localhost:8080"
ngrok http --host-header=rewrite 8080
obviously, replace 8080 with whatever port you're running on
this solution still raises an error when I use this in an embedded page, that pulls the bundle.js from the react app. I think since it rewrites the header to localhost when this is embedded, it's looking to localhost, which the app is no longer running on
Option 1
If you do not need to use Authentication you can add configs to ngrok commands
ngrok http 9000 --host-header=rewrite
or
ngrok http 9000 --host-header="localhost:9000"
But in this case Authentication will not work on your website because ngrok rewriting headers and session is not valid for your ngrok domain
Option 2
If you are using webpack you can add the following configuration
devServer: {
disableHostCheck: true
}
In that case Authentication header will be valid for your ngrok domain
Don't know why but tried everything and it didn't work for me.
What finally worked for me is this:
ngrok http https://localhost:4200 -host-header="localhost:4200"
it might be useful for someone
If you use webpack devServer the simplest way is to set disableHostCheck, check webpack doc like this
devServer: {
contentBase: path.join(__dirname, './dist'),
compress: true,
host: 'localhost',
// host: '0.0.0.0',
port: 8080,
disableHostCheck: true //for ngrok
},
I used this set up in a react app that works. I created a config file named configstrp.js that contains the following:
module.exports = {
ngrok: {
// use the local frontend port to connect
enabled: process.env.NODE_ENV !== 'production',
port: process.env.PORT || 3000,
subdomain: process.env.NGROK_SUBDOMAIN,
authtoken: process.env.NGROK_AUTHTOKEN
}, }
Require the file in the server.
const configstrp = require('./config/configstrp.js');
const ngrok = configstrp.ngrok.enabled ? require('ngrok') : null;
and connect as such
if (ngrok) {
console.log('If nGronk')
ngrok.connect(
{
addr: configstrp.ngrok.port,
subdomain: configstrp.ngrok.subdomain,
authtoken: configstrp.ngrok.authtoken,
host_header:3000
},
(err, url) => {
if (err) {
} else {
}
}
);
}
Do not pass a subdomain if you do not have a custom domain
Windows, ngrok v3
ngrok http <url> --host-header=<host>:<port>
I'm trying to deploy a Jhipster application (Spring Boot + AngularJS) to Bluemix Tomcat. However I always get this error:
Error restarting application: Start app timeout
TIP: The application must be listening on the right port. Instead of hard coding the port, use the $PORT environment variable.
The complete error on Bluemix console is:
App instance exited with guid 1c76324f-57fb-4a00-b203-499519b4367c payload:
{
"cc_partition"=>"default",
"droplet"=>"1c76324f-57fb-4a00-b203-499519b4367c",
"version"=>"0103e173-b6d3-4daa-a291-b5792c16b69b",
"instance"=>"0c09506c30764b6c921cabb9a55d9e45",
"index"=>0,
"reason"=>"CRASHED",
"exit_status"=>255,
"exit_description"=>"failed to accept connections within health check timeout",
"crash_timestamp"=>1479341938
}
Instance (index 0) failed to start accepting connections
I've already tried to change the application-dev.yml config to
server:
port: ${VCAP_APP_PORT}
Or
server:
port: 80
However, I have not had any success. How can I pass the port variable to the Jhipster configuration?
Prerequisites
spring-boot 1.3.1.RELEASE
TypeScript 1.8.9
AngularJs 1.5.3
Zuul
I have an api gateway which hides a set of microservices.
This api gateway uses zuul to map Urls to the different microservices.
zuul:
routes:
service1:
path: /service1/**
serviceId: FIRST-MICROSERVICE
service2:
path: /service2/**
serviceId: SECOND-MICROSERVICE
service3:
path: /service3/**
serviceId: THIRD-MICROSERVICE
Question
I want to be able to start the api gateway on different ports with spring-boot like this:
java -jar -Dserver.port=8081 myspringbootapplication.jar
The host should always be the host from which the angularjs application was delivered.
The problem is that the port depends on the port spring-boot startet the tomcat server.
At the moment http://localhost:9001 is hardcoded.
.factory('app.core.services.myApiResource', ['$resource', '$http',
($resource:ng.resource.IResourceService, $http:ng.IHttpService):ng.resource.IResourceClass<ng.resource.IResource<any>> => {
var apiRoot : ng.resource.IResourceClass<ng.resource.IResource<any>>
= $resource('http://localhost:9001/service1/myentity/search/:finderName');
return apiRoot;
}
])
In bootstrap.yml the default port is 9001
# Default ports
server.port: 9001
Is there a way to set the port value in angularjs $resource to spring-boot server.port value?