I use npm webpack in vue.js project.
npm run dev
In webpack.dev.conf.js, I use proxy table.
proxy: {
"/api": {
target:"http://localhost:5000",
changeOrigin: true
}
},
It worked well, but now I can't.
Once I changed proxy url to https://my-domain.com, and it never works.
I rolled back to "http://localhost:5000", but error message says proxy can't access to https://my-domain.com.
For reference, I ran it again(npm run dev) whenever I changed it.
And it doesn't work at 8080 port, but it works well at 8082 port. How can I resolve conflict of webpack for specific port?
Related
I have a vue.js project created with Vue CLI and npm run serveit always run on localhost.
I want to access from my phone (another IP inside the same network), so I want the serve to run on 0.0.0.0. I tried adding the vue.config.js file and setting the host:
module.exports = {
publicPath: '/',
devServer: {
host: '0.0.0.0',
port: 8080
}
}
Changing the port works fine, but the host override is ignored. This is the output of serve:
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.0.21:8080/
At first I thought it was being ignored, so I tried setting the host to 0.0.0.1 and the output is "correct", so the file is not ignored, only the 0.0.0.0 is being changed to localhost:
App running at:
- Local: http://0.0.0.1:8080/
- Network: http://0.0.0.1:8080/
I saw in some forums that devServer has a public option to set the URL, but if I try setting pubic: 'http://0.0.0.0:8080/' I get an error:
> npm run serve
Debugger attached.
> vue-model-viewer#0.1.0 serve <my project path>
> vue-cli-service serve
Debugger attached.
INFO Starting development server...
ERROR ValidationError: webpack Dev Server Invalid Options
options should NOT have additional properties
ValidationError: webpack Dev Server Invalid Options
options should NOT have additional properties
I need to run the server on 0.0.0.0 so I can test it on my phone.
Any help will be very appreciated.
You shouldn't need to run it on 0.0.0.0 from your local machine to test it on your phone. As long as the port on which it's running is open to external traffic and your phone is connected to your LAN via wifi, you can just put the IP address of your computer and the port # in as the URL.
Developing a Gatsby App using this Starter
https://github.com/the-road-to-react-with-firebase/react-gatsby-firebase-authentication
I keep getting this HPM Error after updated my node packages when I try to visit my page after running Gatsby Develop. The project compiles successfully but then I get this error in the browser and nothing shows up.
error occurred while trying to proxy to: localhost:8000/
and this in the terminal:
error [HPM] Error occurred while trying to proxy request / from localhost:8000 to http://localhost:4000 (ECONNREFUSED
once I remove this from the
gatsby-config.js file it works and the pages generated in the browser:
module.exports = {
developMiddleware: app => {
app.use(
proxy({
target: "http://localhost:4000",
})
)
},
}
However, I then get this error in the terminal:
Error loading a result for the page query in "/404.html". The query was not run and no cached result was found.
Page not found /404.html
I want to know why isn't the Proxy working and what is the above module exports really doing anyway. I feel like this workaround I'm doing isn't good. Any help or advice would be great!!
Github Repo:
GitHub Repo for The project
That error means there's nothing running at http://localhost:4000. There seems to be a few problem with your setup:
First, your developMiddleware setup points to http://localhost:4000, but your server (server.js) by default runs at http://localhost:3000. Perhaps you forgot to startup the server, or start it up at the wrong port?
Second, if I read it correctly,in your proxy middleware, you're proxying every route to port 4000? This will render Gatsby useless. Here's an example of a better proxy setup:
module.exports = {
developMiddleware: app => {
app.use(
"/api",
proxy({
target: "http://localhost:4000",
})
)
},
}
With this, only request to localhost:8000/api will be proxied to localhost:4000.
Hope it helps!
I did have same error ECONNREFUSED while trying to debug both Angular and Node.js with VS Code and WSL2 Ubuntu-20.04 environment. Apparently that was solved by adding deprecated useWSL flag
{
"type": "node",
"request": "launch",
"name": "Launch Node Express via NPM",
"runtimeExecutable": "npm",
"useWSL": true,
"runtimeArgs": ["run-script", "node:debug"],
"port": 9229
},
I had the same error. In my case, I forgot to run npm run server first.
This will start the server.
Then run npm start in another terminal window.
npm start will call "ng serve --proxy-config ./proxy.json"
My proxy.json file:
{
"/api": {
"target": "http://localhost:9000",
"secure": false
}
}
Don't know why 2 days ago my projects ( created via vue create ) stopped working - in Chrome i get
Invalid Host Header
and
WDS Disconnected
errors. In cmd everything compiles properly( npm run serve )
I don't know webpack, so i have no idea how to fix it.
What i've already done:
reinstalled node
deleted and reinstalled all npm packages
This issue is caused by this webpack-dev-server issue that has been fixed recently.
To avoid getting the Invalid Host/Origin header error add this to your devServer entry on vue.config.js file:
disableHostCheck: true
Note that disableHostCheck: true is not recommended because it creates security vulnerabilities.
For a dev server running on my local machine, I could resolve the issue by explicitly setting --host in vue-cli-service serve:
scripts: {
serve: "vue-cli-service serve --host myapp.localhost"
}
The --host option is documented here.
Visit the app in your browser under myapp.localhost:8080 (assuming you're using default port 8080).
Found this question searching for the same "Invalid Host Header" issue. Here's how I solved it.
I am running Vue dev server npm run serve in Docker on my remote server. Couldn't access it at http://example.com:8080 with the error message above.
Correct and secure way is to add the domain name to the vue.config.js file:
"devServer": {
"public": "example.com"
}
This is a fresh vue project initiated with Vue Cli command: vue create myproject with Vuetify added via vue add vuetify. Full content of my vue.config.js after that is:
module.exports = {
"transpileDependencies": [
"vuetify"
],
"devServer": {
"public": "example.com"
}
}
This is because of the dev server which isn't accepting external requests. To solve this, we've to configure vue.config.js as below.
If vue.config.js is not found in your vue project, please create the file in root directory and add the following line.
module.exports = {
// options...
devServer: {
disableHostCheck: true
}
}
Source
I have a really strange problem. I have a sails app running on my local machine and want to access this application from another computer within the same network, but I get a timeout.
not that I think that it should be necessary, but I even configured cors in config/cors.js:
allRoutes: true,
origin: '*',
credentials: true,
methods: 'GET, POST, PUT, DELETE, OPTIONS, HEAD',
headers: 'content-type'
My project is pretty empty, I just created a few models/controllers and thats it.
I didn't find anything about this problem in their manual so I guess I must have done something wrong during my project setup. Has anyone an idea on how to fix this?
edit
just to make sure I didn't do something completely wront I just created a new project
sails new foo
cd foo
sails lift
-> http://192.168.1.12:1337
works from localhost, gets a timeout from any other host in the network
I'm actually taking for granted that you already tried to ping your host machine from the other machine and you successfully managed to get a response.
If so, I suggest ngrok package to gain access for other users to your local machine. Ngrok exposes your localhost to the web, and has an NPM wrapper that is simple to install and start:
$ npm install ngrok -g
$ ngrok http 1337
The last command will print in the console the new address that points to localhost:1337
Edit: By the way, I'm pretty sure your problem is about network configurations and not sails configurations.
npm uninstall express successfully uninstalls express, and when I ls $NODE_PATH, it isn't there anymore.
However, if I run node and require('express'), I get
{ version: '1.0.0rc2',
Server: { [Function: Server] super_: { [Function: Server] super_: [Object] } },
createServer: [Function] }
Why does this still happen?
The reason I'm playing around with Express is because (apparently) it breaks with a certain version of Connect. Does anyone know what successful combination of Express and Connect will work ?
Thanks!
Output the require paths console.log(require.paths)
Those are the paths nodejs is using to resolve the require('express')
Try npm config get root—that shows you where npm is installing things. If it's pointing somewhere that doesn't make sense, use npm config set root [new path] to change it to something that's in Node's require.paths. (Of course, now you'll have to reinstall all of your npm packages.)
I currently use latest node, Express#1.0.8, Connect#0.5.10. I've been having some issues with upgrading to the latest connect/express, so I vowed to finish building my app first and then perform a massive upgrade. This combo works well for me though.