I'm getting invalid host header error, if i access my page through browser with online ip. Locally it is working perfectly, but i don't know why this error is coming in live server. I'm following three steps to run my react js application, that is,
'npm install'
'npm run build'
'npm run serve'
webpack config file host setup
// replace localhost with 0.0.0.0 if you want to access
// your app from wifi or a virtual machine
const host = process.env.HOST || '0.0.0.0';
const port = process.env.PORT || 3000;
const stats = {
hash: false,
version: false,
timings: false,
assets: false,
chunks: false,
modules: false,
reasons: false,
children: false,
source: false,
errors: false,
errorDetails: false,
warnings: false,
publicPath: false,
colors: {
green: '\u001b[32m',
},
};
package.json scripts
"build": "rimraf build && cross-env NODE_ENV=production webpack --env.prod=true --env.sw=true",
"serve": "pushstate-server build/ 3000",
Webpack dev server has recently had a host check added by default as a security measure https://github.com/webpack/webpack-dev-server/releases/tag/v2.4.3
You will now need to either disable it via disableHostCheck option (not wise if publicly accessible) or specify the public host or IP that you will be accessing it at when starting the server --public your-hostname-or-public-ip:3000
EDIT: Webpack in question name and webpack-dev-server tag was misleading - this actually uses different server altogether...
Ah it looks like this is not actually webpack related at all - you are using a different server pushstate-server which strangely has the host option in the module, but is not exposed in the binary. You will have to roll your own server startup script to pass a different host to it (it is 0.0.0.0 by default).
Save this to ./server.sh
#!/usr/bin/env node
require('pushstate-server').start({
directory: process.argv[2],
port: process.argv[3],
file: process.argv[4],
host: process.argv[5]
}, (err, address) =>
console.log(`Listening on port ${address.port} (http://${address.address}:${address.port})`)
)`
Change your npm script change to
server.sh build/ 3000 index.html your-publicly-accessible-hostname
I had the same error when I came across to these:
https://help.crossbrowsertesting.com/faqs/testing/invalid-host-header-error/
In my case it was solved by restarting the service.
Related
I created a motoko backend and added some JavaScript and HTML for the frontend. Now I would like to deploy my project using webpack.
After the successfull deployment I get the following error interacting with the frontend:
[webpack-dev-server] [HPM] Error occurred while proxying request localhost:8080/api/v2/status to http://localhost:8000/ [ECONNREFUSED] (https://nodejs.org/api/errors.html#errors_common_system_errors)
Reading the documentation the frontend should run on the server http://localhost:8080 and API request will be proxyed to the replica on port 8000.
If I open port 8000 it says:
Could not find a canister id to forward to.
So from my understanding, the frontend server runs and if he makes an API call (e.g. calling a function within my code) it proxys it to port 8000, but the service on this port is inactive.
The webpack.config.js config for the proxy:
// proxy /api to port 8000 during development
devServer: {
proxy: {
"/api": {
target: "http://localhost:8000",
changeOrigin: true,
pathRewrite: {
"^/api": "/api",
},
},
},
hot: true,
watchFiles: [path.resolve(__dirname, "src", frontendDirectory)],
liveReload: true,
},
};
UPDATE
I fixed the issue. The API calls where routed to the wrong adress. I changed it in the webpack.config.js to http://127.0.0.1:8000/.
I fixed the issue. The API calls where routed to the wrong adress. I changed it in the webpack.config.js to http://127.0.0.1:8000/.
I have a vuejs app running on my localhost on port 8080, and when I open it in my browser the site doesn't load, and I get the warning by chrome that the site is not responding. I also have a python flask backend running on port 5000, and this works perfectly. Is this a common issue? If so, how do I resolve it?
Thanks!
OK let us to change default port and try again
first enter npm run serve -- --port 4030
and now again test http://localhost:4030 if agian not works, all you have to do is modify the portvalue inside the dev block in root of your project, for example <your_project_root>/vue.config.js
// vue.config.js
module.exports = {
// ...
devServer: {
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 4030, // Your PORT you changed !
https: false,
hotOnly: false,
},
// ...
}
I have an ember project using Signalmaster. In the config/environment.js I have the following:
if (environment === 'production') {
ENV.SIGNALMASTER = {
HOST: 'https://localhost:8890',
PORT: '8890',
FORCE_CONNECTION: true
};
On my server I have signalmaster running at https://localhost:8890 (in the development.json and production.json files in the config directory for signalmaster I have secure set to true, and in the server.js file for signalmaster I've put in the location of my SSL certificate and key, as is required for running it on https) - when running "node server.js" I get the following:
signal master is running at: https://localhost:8890
Running "netstat -lnp" also shows a process running on port 8890. However when I use the app I get errors like this:
GET https://localhost:8890/socket.io/?EIO=3&transport=polling&t=LjG8--J net::ERR_CONNECTION_REFUSED
I am using socket.io version 1.3.7.
Instead of having the host as https://localhost:8890, seems it had to be https://[domain.com]:8890
I am new to React and Node, trying to setup an environment to work.
I worked a little with Node.js/Express before and I used nodemon to monitor file changes and restart my app.
Also I recently started to work with React and I use webpack dev server (specifically webpack-dev-server --content-base src --inline --hot --history-api-fallback) setup that monitors file changes and reload the UI.
The problem
Now, I want to tie it together.
First solution I found was: Start my node app on specific port, say 3000 then start webpack dev server on 8080 port and proxy requests to specific urls to my backend app.
devServer: {
proxy: {
'/backend-api/': {
target: {
"host": "localhost",
"protocol": 'http:',
"port": 3000
},
ignorePath: false,
changeOrigin: true,
secure: false
}
}
},
It should work but i do not feel right starting two servers for single application.
Is there any way (and simple example i could understand) to start single server that would serve both: a server side app and React UI?
And of course, it should track file changes and restart server app if server code changes OR reload UI if client side code changes.
You can use webpack through Express middleware using this package: https://github.com/webpack/webpack-dev-middleware
You can use it by simply adding it to the app:
var webpackMiddleware = require("webpack-dev-middleware");
app.use(webpackMiddleware(webpack({/* webpack options */})));
In addition there's a package that builds on this to offer hotloading and "Create React App" style terminal display: https://www.npmjs.com/package/webpack-express-middleware
I am going through the 5 minute quickstart of Angular 2. However, my application resides in src/ folder instead of at the root of my repository, and when I run npm start the application is trying to find an index.html file at the root. I read up on lite-server and documentation shows that it uses BrowserSync and I can reconfigure BrowserSync with a bs-config.json in my repository. I did that and this is what my config looks like:
{
"port": 8123,
"server": { "baseDir": "./src" }
}
According to the log it's using the specified config:
[1] > todo-app-angular2#1.0.0 lite E:\GitHub\todo-app-angular2
[1] > lite-server "./bs-config.json"
I also tried an override through bs-config.js
module.exports = {
port: 8123,
server: {
baseDir: "./src"
}
};
However the Angular application is still opened on port 3000 and it's disregarding the baseDir defined in the config. What am I doing wrong?
You should use a file called bs-config.js (instead of a bs-config.json one) since lite-server tries to load a module using the require function. The configuration should be a valid Node module:
module.exports = {
"port": 8123,
"server": { "baseDir": "./src" }
};
See this line in the source code: https://github.com/johnpapa/lite-server/blob/master/lib/lite-server.js#L20.
This file by default is loaded from the user's project folder.
Edit
After digging a bit more, the first part of my answer relies on the code from github but not the one actually installed using npm install (version 1.3.4)
There are two options in this case:
port
baseDir
Using this command will fix your problem:
$ lite-server --baseDir ./src --port 3333
Hope it helps you,
Thierry
The answer from Thierry Templier is not quite correct (anymore), you can use either the bs-config.json or bs-config.js configuration to adjust your browser-sync configuration. This is what I came up initially for the angular2 quick start example with JIT(Just-In-Time) and AOT(Ahead-Of-Time) compilation support (bs-config.json)
{
"port": 8000,
"server": ["app", "."]
}
to host the project from multiple directories.
However, I did not like this solution because by overwriting the server section in the json file, the default middleware configuration was overwritten at the same time.
Therefore I ended with the following approach, I took the default lite-server's config-defaults.js files and modified it instead (bs-config.js):
'use strict';
var fallback = require('connect-history-api-fallback');
var log = require('connect-logger');
/*
| For up-to-date information about the options:
| http://www.browsersync.io/docs/options/
*/
module.exports = {
port: 8000,
injectChanges: false, // workaround for Angular 2 styleUrls loading
filters: ['./**/*.{html,htm,css,js}'],
watchOptions: {
ignored: 'node_modules'
},
server: ['./', 'app'],
middleware: [
log({ format: '%date %status %method %url' }),
fallback({
index: '/index.html',
htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'] // systemjs workaround
})
]
};