CORS issue with Vue.js and Nodejs

Question

I used vuejs with nodejs, with the vue client address http://localhost:8000, the nodejs server addresses http://localhost:3000.

When calling api, I get cors error CORS preflight channel did not succeed request headers

request

Access-Control-Request-Headers: content-type
Access-Control-Request-Method: POST
Host:localhost: 3000 
Origin:http://localhost: 8000

response

Access-Control-Allow-Headers: Origin, X-Requested-With, Accept,content-type
Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE, PUT,PATH
Access-Control-Allow-Origin: *
Access-Control-Max-Age: 86400
Content-Type:application/json; charset=utf-8

error in response is NS_ERROR_DOM_BAD_URI

Yes, you cannot make cross domain requests without configuring CORS. Using another port is also viewed as a cross-origin domain. — ssc-hrep3
– ssc-hrep3, Commented Jan 10, 2019 at 11:05

Maelig · Accepted Answer · 2019-01-10 11:05:26Z

4

If you use expressjs you can simply use nodejs cors lib to enable CORS in your node server.

I strongly advise you to activate it only for dev purposes :

var cors = require('cors')

if (NODE_ENV !== 'production') {
   app.use(cors())
}

answered Jan 10, 2019 at 11:05

Maelig

2,1064 gold badges24 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

ssc-hrep3 Over a year ago

Why do you strongly advise to do so? Could you make examples, why CORS is dangerous with certain configurations (cross-origin requests from malicious servers if opened to anyone etc.).

Maelig Over a year ago

If he doesn't know about CORS, I'm not sure he is ready for advanced configuration to keep CORS enabled in production. But you are right, you can always leave cors enabled with proper configuration.

Nino Filiu Over a year ago

@ssc-hrep3 not sure if it's the point of the question to demonstrate why CORS headers are required, plus the official docs provide security use cases

arizafar Over a year ago

@Maelig if you will not activate it on prod then the issue will be same, allow cors manually or using cors NPM, you always can whitelist origins. npmjs.com/package/cors#configuring-cors-w-dynamic-origin

Hieu Nguyen Over a year ago

Thank you, my problem has been solved, but can you explain why my header config does not work. Specifically, when i call method post width parameter, it receives the above error

|

Collectives™ on Stack Overflow

CORS issue with Vue.js and Nodejs

1 Answer 1

8 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Linked

Related