search

vuejs / vue-cli

🛠️ webpack-based tooling for Vue.js Development
https://cli.vuejs.org/
MIT License
29.76k stars 6.33k forks source link

ERR_CONNECTION / CORS Request did not succeed #5129

Open marcoippolito opened 4 years ago

marcoippolito commented 4 years ago

Version

4.1.2

Reproduction link

https://github.com/marcoippolito/testproject

Environment info

(base) marco@pc:~/vueMatters/testproject$ vue info

Environment Info:

  System:
    OS: Linux 4.15 Ubuntu 18.04.4 LTS (Bionic Beaver)
    CPU: (8) x64 Intel(R) Core(TM) i7-4790K CPU @ 4.00GHz
  Binaries:
    Node: 12.10.0 - ~/.nvm/versions/node/v12.10.0/bin/node
    Yarn: 2.0.0-rc.27 - ~/.nvm/versions/node/v12.10.0/bin/yarn
    npm: 6.13.6 - ~/.nvm/versions/node/v12.10.0/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0 
    @vue/babel-plugin-transform-vue-jsx:  1.1.2 
    @vue/babel-preset-app:  4.1.2 
    @vue/babel-preset-jsx:  1.1.2 
    @vue/babel-sugar-functional-vue:  1.1.2 
    @vue/babel-sugar-inject-h:  1.1.2 
    @vue/babel-sugar-v-model:  1.1.2 
    @vue/babel-sugar-v-on:  1.1.2 
    @vue/cli-overlay:  4.1.2 
    @vue/cli-plugin-babel: ^4.1.0 => 4.1.2 
    @vue/cli-plugin-eslint: ^4.1.0 => 4.1.2 
    @vue/cli-plugin-router:  4.1.2 
    @vue/cli-plugin-vuex:  4.1.2 
    @vue/cli-service: ^4.1.0 => 4.1.2 
    @vue/cli-shared-utils:  4.1.2 
    @vue/component-compiler-utils:  3.1.1 
    @vue/preload-webpack-plugin:  1.1.1 
    @vue/web-component-wrapper:  1.2.0 
    eslint-plugin-vue: ^5.0.0 => 5.2.3 
    vue: ^2.6.10 => 2.6.11 
    vue-eslint-parser:  5.0.0 
    vue-hot-reload-api:  2.3.4 
    vue-loader:  15.8.3 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.6.10 => 2.6.11 
    vue-template-es2015-compiler:  1.9.1 
  npmGlobalPackages:
    @vue/cli: 4.1.2

Steps to reproduce

I created a brand new tiny webapp with vue cli, so without adding anything, apart from what the empty vue-cli scaffolding brings:

(base) marco@pc:~/vueMatters/testproject$ npm run serve

> testproject@0.1.0 serve /home/marco/vueMatters/testproject
> vue-cli-service serve

INFO Starting development server...
98% after emitting CopyPlugin

DONE Compiled successfully in 1409ms 8:14:46 PM

And get this error message : https://drive.google.com/open?id=10GcVFmqNVGRjox3wklJtcrAkIWM3kOp8

"GET https://localhost/sockjs-node/info?t=1580228998416 net::ERR_CONNECTION_REFUSED"

Using firefox as web browser, I get this error message: https://drive.google.com/open?id=1l6USIHrbHl6kBcQtormXplOgx0J653ko

"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at 
https://localhost/sockjs-node/info?t=1580304400023. (Reason: CORS request did not succeed)."

Looking at Mozilla Developer explanation: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSDidNotSucceed?utm_source=devtools&utm_medium=firefox-cors-errors&utm_campaign=default

"What went wrong?

The HTTP request which makes use of CORS failed because the HTTP connection failed at 
either the network or protocol level. The error is not directly related to CORS, but is a fundamental
network error of some kind.

In many cases, it is caused by a browser plugin (e.g. an ad blocker or privacy protector) blocking 
the request.

Other possible causes include:

Trying to access an https resource that has an invalid certificate will cause this error.
Trying to access an http resource from a page with an https origin will also cause this error.
As of Firefox 68, https pages are not permitted to access http://localhost, although this may be    
changed by Bug 1488740.
The server did not respond to the actual request (even if it responded to the Preflight request).
One scenario might be an HTTP service being developed that panicked without returning any
data.

"

In order to understand where the problem could lie, I checked various aspects:

In this GitHub repository you can find all the related files: https://github.com/marcoippolito/testproject

The sudo nano /etc/nginx/conf.d/default.conf is the following: 

server {
    listen 443 ssl http2 default_server;
    server_name ggc.world;

    ssl_certificate /etc/ssl/certs/chained.pem;
    ssl_certificate_key /etc/ssl/private/domain.key;
    ssl_session_timeout 5m;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3;
    ssl_ciphers EECDH+CHACHA20:EECDH+CHACHA20-

draft:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:! MD5; ssl_prefer_server_ciphers on; ssl_session_cache shared:SSL:50m; ssl_dhparam /etc/ssl/certs/dhparam.pem;

ssl_stapling on;

      #ssl_stapling_verify on;

    access_log /var/log/nginx/ggcworld-access.log combined;

    add_header Strict-Transport-Security "max-age=31536000";
    location = /favicon.ico { access_log off; log_not_found off; }
    location / {
        proxy_pass http://127.0.0.1:8080;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

server {
    listen 80 default_server;
    listen [::]:80 default_server;
    error_page 497 https://$host:$server_port$request_uri;
    server_name www.ggc.world;
    return 301 https://$server_name$request_uri;

    access_log /var/log/nginx/ggcworld-access.log combined;

    add_header Strict-Transport-Security "max-age=31536000";
    location = /favicon.ico { access_log off; log_not_found off; }
    location / {
        proxy_pass http://127.0.0.1:8080;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

# https://www.nginx.com/blog/nginx-nodejs-websockets-socketio/
# https://gist.github.com/uorat/10b15a32f3ffa3f240662b9b0fefe706 
# http://nginx.org/en/docs/stream/ngx_stream_core_module.html

upstream websocket {
    ip_hash;
    server localhost:3000;
}

server {
    listen       81;
    server_name  ggc.world www.ggc.world;

    #location / {
    location ~ ^/(websocket|websocket\/socket-io) {
        proxy_pass http://127.0.0.1:4201;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header X-Forwared-For $remote_addr;
        proxy_set_header Host $host;

        proxy_redirect off;
        proxy_set_header X-Real-IP $remote_addr;
    }

}
# https://stackoverflow.com/questions/40516288/webpack-dev-server-with-nginx-proxy-pass

What is expected?

no ERR_CONNECTION

What is actually happening?

I opened an issue in webpack's github page: https://github.com/webpack/webpack/issues/10329 , and it has been closed with this reason "Please open issue in vue-cli". Please look also at the detailed description of the problem I made there. Looking forward to a joint effort and help

LinusBorg commented 4 years ago

Thanks for all these details, but taking a step back I would like a clear description for the problem

  1. If you run npm serve alone, it works?
  2. If you add your nginx server,which uses an https cert, it doesn't anymore?
  3. And the error that you receive is a CORS error.

I'm not very good with nginx but it seems some config is wrong or missing and so the websocket connection is not passed through correctly.

I don't see how we can fix this from within Vue CLI, but I may be wrong/missing something

marcoippolito commented 4 years ago

@LinusBorg I stopped nginx server, and executed npm run serve: 

(base) marco@pc:~/vueMatters/testproject$ sudo systemctl stop nginx
[sudo] password for marco: 
(base) marco@pc:~/vueMatters/testproject$ sudo systemctl status nginx
● nginx.service - A high performance web server and a reverse proxy server
   Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled)
   Active: inactive (dead) since Sun 2020-02-02 09:58:36 CET; 6s ago
     Docs: man:nginx(8)
  Process: 4359 ExecStop=/sbin/start-stop-daemon --quiet --stop --retry QUIT/5 --pidfile  
/run/nginx.pid (code=exited, status=0/SUCCESS)
  Process: 983 ExecStart=/usr/sbin/nginx -g daemon on; master_process on; (code=exited,  
status=0/SUCCESS)
  Process: 872 ExecStartPre=/usr/sbin/nginx -t -q -g daemon on; master_process on; (code=exited, 
status=0/SUCCESS)
 Main PID: 1001 (code=exited, status=0/SUCCESS)

Feb 02 09:18:32 pc systemd[1]: Starting A high performance web server and a reverse proxy 
server...
Feb 02 09:18:33 pc systemd[1]: Started A high performance web server and a reverse proxy 
server.
Feb 02 09:58:36 pc systemd[1]: Stopping A high performance web server and a reverse proxy 
server...
Feb 02 09:58:36 pc systemd[1]: Stopped A high performance web server and a reverse proxy 
server.
(base) marco@pc:~/vueMatters/testproject$ npm run serve

> testproject@0.1.0 serve /home/marco/vueMatters/testproject
> vue-cli-service serve

 INFO  Starting development server...
98% after emitting CopyPlugin

 DONE  Compiled successfully in 986ms                                                                                                                                                                         
9:58:54 AM 

  App running at:
  - Local:   http://localhost:8080 
  - Network: http://192.168.1.7:8080

  Note that the development build is not optimized.
  To create a production build, run npm run build.

But still in Google Chrome get the error: "GET http://localhost:8080/sockjs-node/info?t=1580634002894 
net::ERR_CONNECTION_REFUSED" :

sockejsErrorWithoutNginx01

sockejsError-GoogleChromeVersion01

And in FireFox the error: "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8080/sockjs-node/info?t=1580634450627. (Reason: CORS request did not succeed)." sockejsErrorWithoutNginx02

sockejsError-FireFoxVersion01

Add-ons installed in Google Chrome:

sockejsError-GoogleChromeAddOn01

Add-ons installed in Firefox:

sockejsError-FireFoxAddOn01

marcoippolito commented 4 years ago

@LinusBorg In the PC I installed ex-novo Ubuntu 18.04.3 Desktop and I verified that the problem disappeared.

I ran the same tiny webapp in both laptop and pc, and using localhost and the ip-address both from within the laptop/PC and from the other device (PC/laptop) gave no error. I reported everything here https://askubuntu.com/questions/1207812/webapp-fails-with-neterr-connection-refused-with-ubuntu-18-04-4-server-edition

According to you, what kind of problems/missing parts/lacking features or whatever the Ubuntu 18.04.4 Server Edition could have compared to the Ubuntu 18.04.4 Desktop Edition? It would be great if we could give to the Ubuntu's people some hints/suggestions and help in solving this problem.

mattattui commented 4 years ago

I'm getting this too, and while the easy fix is to remove the https config and just use http, it would be nice to find out how to set this up correctly. I think there's an interesting clue in @marcoippolito 's screenshot:

Notice that the browser address bar is using an IP address, while the script that webpack devServer injects is trying to open a socket to localhost -- this makes it a cross-domain request, which fails because the dev/hmr server isn't producing CORS headers. Curiously in my instance I'm visiting localhost and the injected script is trying to open the IP address: the same problem in reverse.

(Update: I should note that I'm using mkcert to create a TLS certificate for localhost, and that's not valid for the local IP address, which might also explain why there's a CORS error. If I visit the IP address instead of localhost, then click through the certificate error, everything works).

fuzzykiller commented 4 years ago

The problem is that you’re browsing to http://192.168.1.7 (or whatever IP) while the Webpack Dev Server client attempts to connect to http://localhost, which is a different origin.

The solution is for Webpack Dev Server to use a relative URI when connecting.

The problem is here:

https://github.com/vuejs/vue-cli/blob/de3d0622bb36a9b379fe6c82458914e58d0d4f22/packages/%40vue/cli-service/lib/commands/serve.js#L129-L144

The code should be using 0.0.0.0:0, like angular does:

https://github.com/angular/angular-cli/blob/75e34bc17ff637b639ebce8f9abc479a5b4df0ab/packages/angular_devkit/build_angular/src/dev-server/index.ts#L160

This would also enable use cases like proxying to the dev server from elsewhere.