Cross-Origin Request Blocked

[rajinder-yadav]

Version

4.5.8

Reproduction link

http://xxx

Environment info

Linux

$ vue --version
@vue/cli 4.5.8

$ node -v
v12.19.0

Steps to reproduce

update /etc/hosts

127.0.0.1       dev dev.local localhost localhost.localdomain 

Create a hello-world app using vue-cli, run app

yarn serve

Error 1

1. open browser at: http://localhost:8080
2. open debug console, see errors, "Cross-Origin Request Blocked:"

Error 2

1. stop the app, use suggested url in console, "http://dev:8080"
2. this redirects to "https" and unable to see vue app running in the browser.

What is expected?

app run without error in the debug console

What is actually happening?

1. seeing error in debug console as mention earlier
2. http gets redirected to https

[rajinder-yadav]

I discovered another error! do not update /etc/hosts

Make sure it looks like the following, this should be the default. After making this change you should logout and login again.

127.0.0.1       localhost localhost.localdomain 

The hostname of my Linux box is, "dev", type hostname in the terminal.

$ hostname
dev

It seems Vue.js CLI is using the hostname, rather than using localhost, someone decided to get clever I suppose?

Anyway as a result of this I am no longer able to run and view the Vue.js app

1. http://localhost:8080 does not show anymore
2. http://dev:8080 gets redirected to https and does now show anything

This is supper annoying as I can no longer code a Vue.js 3 app.

FYI: I can build and run an Angular app just fine and it doesn't have a "Cross-Origin Request Blocked:" error.

[rajinder-yadav]

The vue-cli-service server is not defaulting to host 0.0.0.0, please fix to make this the default and don't use any clever lookup.

For anyone else having this problem, I found a work-around, update package.json script like this:

  "scripts": {
    "serve": "vue-cli-service serve --host 0.0.0.0",