I encountered an issue while trying to access my Vue app in Virtualbox from the host, both running on Linux Mint 20. Although I can now reach the login page from my host, I am consistently faced with a CORS error during login attempts:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:3000/login. (Reason: CORS request did not succeed)
Host Headers:
{
"OPTIONS": {
"scheme": "http",
"host": "localhost:3000",
"filename": "/login"
}
}
{
"Transferred": "0 B (0 B size)",
"Referrer Policy": "no-referrer-when-downgrade"
}
OPTIONS /login undefined
Host: localhost:3000
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:86.0) Gecko/20100101 Firefox/86.0
Accept: */*
Accept-Language: en-GB,en;q=0.5
Accept-Encoding: gzip, deflate
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-type
Referer: http://localhost:8080/login
Origin: http://localhost:8080
DNT: 1
Connection: keep-alive
Guest Headers:
{
"OPTIONS": {
"scheme": "http",
"host": "localhost:3000",
"filename": "/login",
"remote": {
"Address": "127.0.0.1:3000"
}
}
}
{
"Status": "204No Content",
"Version": "HTTP/1.1",
"Transferred": "374 B (0 B size)",
"Referrer Policy": "strict-origin-when-cross-origin"
}
HTTP/1.1 204 No Content
X-Powered-By: Express
Access-Control-Allow-Origin: http://localhost:8080
Vary: Origin, Access-Control-Request-Headers
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: GET,HEAD,PUT,PATCH,POST,DELETE
Access-Control-Allow-Headers: content-type
Content-Length: 0
Date: Thu, 08 Apr 2021 19:48:16 GMT
Connection: keep-alive
OPTIONS /login HTTP/1.1
Host: localhost:3000
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:87.0) Gecko/20100101 Firefox/87.0
Accept: */*
Accept-Language: en-GB,en;q=0.5
Accept-Encoding: gzip, deflate
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-type
Referer: http://localhost:8080/
Origin: http://localhost:8080
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
I have configured a NAT and set up port forwarding for both host and guest using port 8080, although I also attempted using a Bridged Adaptor.
package.json:
"dev": "webpack-dev-server --host 0.0.0.0 --progress --config build/webpack.dev.conf.js",
Server Code:
app.use(cors({ origin: 'http://localhost:8080' , credentials: true }));
app.options('*', cors());
router.post('/login', (req, res) => {
db.selectByEmail(req.body.email).then((response) => {
...
}).catch((response) => {
...
});
});
let port = process.env.PORT || 3000;
let server = app.listen(port, function() {
console.log('Express server listening on port ' + port)
});
Request from Vue:
this.$http.post('http://localhost:3000/login', {
email: this.email,
password: this.password,
})
.then(response => {
...
})
.catch(function (error) {
...
});