Vue+Express+Axios 主机访问 Virtualbox 中的访客应用程序出现 CORS 错误

Question

我无法从主机访问我在 Virtualbox 中的 Vue 应用程序，两者都使用 Linux Mint 20。我现在可以从我的主机访问登录页面，但我一直收到 CORS 错误正在尝试登录：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:3000/login. (Reason: CORS request did not succeed)

主持人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

嘉宾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

我正在使用 NAT 并使用端口 8080 为主机和来宾设置端口转发，但我也尝试过桥接适配器。

package.json:

"dev": "webpack-dev-server --host 0.0.0.0 --progress --config build/webpack.dev.conf.js",

服务器代码：

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)
});

来自 Vue 的请求：

this.$http.post('http://localhost:3000/login', {
    email: this.email,
    password: this.password,
})
.then(response => {
    ...
})
.catch(function (error) {
    ...
});

Answer 1

你试过允许所有headers吗？

app.use(cors());

Answer 2

我终于找到了让它工作的方法。我将 VM 网络设置改回桥接适配器，并将 localhost 更改为我从 Vue 调用的服务器中的 VM IP。

this.$http.post('http://192.168.1.x:3000/login', {
    email: this.email,
    password: this.password,
})

Vue+Express+Axios 主机访问 Virtualbox 中的访客应用程序出现 CORS 错误

Vue+Express+Axios Host Access to Guest App in Virtualbox getting CORS Error

javascript

virtualbox

node.js

express

vue.js