I recently upgraded my VUE CLI to 3.5.5
After running the standard install, I noticed CORS and websocket errors being thrown in the browser ...Connection closed before receiving a handshake response. The errors are thrown in both Firefox and Chrome.
I am guessing this has something to do with the webpack devserver and CORS but its a guess because I know nearly nothing about webpack.
I added a vue.config.js and tried various configs for the webpack devServer but none have worked.
Can anyone illuminate this issue? - it must be very common. Thanks
So the solution i found was to create a vue.config.js file at the root level of the project and use this webpack config:
module.exports = {
devServer: {
host: "0.0.0.0",
public: "0.0.0.0:8080",
disableHostCheck: true,
proxy: {
"/app": {
target: "http://localhost:8081",
changeOrigin: true,
ws: true
}
}
}
};
Related
Steps to reproduce:
Install Vue CLI and create a new Vue CLI project vue create test-project.
Using Vue 3 and Yarn.
Update the vue.config.js file to point to a custom dev server with a proxy:
const { defineConfig } = require('#vue/cli-service');
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
proxy: 'http://test.me',
},
});
Run yarn serve inside the project directory.
Go to http://localhost:8080 in Firefox and check out the console.
The websocket for the Webpack dev server keeps failing with the message The connection to ws://[ip]:8080/ws was interrupted while the page was loading.
This doesn't happen when there is no proxy. I cannot figure out why it's happening or how to stop it.
i have added devServer proxy target as
devServer: {
proxy: {
'^/': {
target: 'https://xmlpi-ea.dhl.com/',
ws: true,
changeOrigin: true
}
}
}
but it is not working when i make build with npm run build, is there a workaround for it?
This is for PRODUCTION not for development.
npm run build
If you are using vue-cli, you can spin you development server with
npm run serve
I have created a PWA using vue js 2.0 and framework7 and also use Webpack for bundling. I want to use browser-sync to share my project.
I used this config in my webpack.confg file :
new BrowserSyncPlugin({
// browse to http://localhost:3000/ during development,
// ./public directory is being served
host: 'localhost,
port: 3000,
server: { baseDir: ['src'] }
}),
In src/ I have my basic files like index.html, app.vue, app.js.
After using npm run dev command I see this result :
[Browsersync] Access URLs:
----------------------------------
Local: http://localhost:3000
External: http://192.168.1.118::3000
----------------------------------
UI: http://localhost:3001
UI External: http://localhost:3001
----------------------------------
[Browsersync] Serving files from: src
After this, localhost:3000 open in my browser and say browsersync: connected but it have showed me a blank page.
Also after I enter website path (http://localhost:3000/en/#!/login) in browser, it showed me Cannot Get /en Error. What is the problem?
Any help will greatly appreciated.
Based on your comment, looks like you are also using webpack-dev-server. In that case you can proxy to it:
const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
module.exports = {
// ...
devServer: {
port: 3100
}
// ...
plugins: [
new BrowserSyncPlugin(
// BrowserSync options
{
// browse to http://localhost:3000/ during development
host: 'localhost',
port: 3000,
// proxy the Webpack Dev Server endpoint
// (which should be serving on http://localhost:3100/)
// through BrowserSync
proxy: 'http://localhost:3100/'
},
// plugin options
{
// prevent BrowserSync from reloading the page
// and let Webpack Dev Server take care of this
reload: false
}
)
]
}
I have configured devserver in vue-config.js before like this:
devServer: {
proxy: {
"/api/*": {
target: "http://localhost:3001",
secure: false
}
}
}
In nuxt-SPA this dont work. My front is still sending API-calls to same origin localhost:3000. How to configure API-calls to different port?
Duplicate of
How to use webpack dev proxy with Nuxt
https://github.com/nuxt/nuxt.js/issues/762
Due to its unversal app nature Nuxts doe not have webpack proxy.
Simpliest one to implement is here - https://github.com/nuxt-community/proxy-module
I'm using the following vue.config.js:
module.exports = {
devServer: {
proxy: 'http://localhost:8000'
},
publicPath: '/admin/',
outputDir: '../backend/admin/'
}
And I'm running node application on port 8000 as a backend service,vue frontend is run with vue-cli-service serve and issue is that websocket connection for HMR is being proxied to backend.
HMR works but we are constantly getting requests to backend like:
/sockjs-node/931/f1p0xflp/websocket
How can we disable this backend calls as they are invalid?
Adding:
ws: false
in vue.config.js resolved the issue