Node.js 为什么我在Express上的CORS设置出现飞行前错误?
我正在为个人网站设置RESTAPI。我的个人网站是用Vue.js构建的,api服务器是用express构建的。我在服务器上尝试了两种不同的CORS配置,但我似乎仍然得到了飞行前的错误,所以我认为我对某些地方缺乏了解 最初的目标是让我了解docker,将api/auth服务器容器化,并将其与前端vue.js应用程序分开托管。这是问题的一部分还是坏习惯 下面是我在其他帖子上找到的两个CORS配置,但都没有成功 配置#1: 配置#2: 我还想知道这是否与我如何发出请求有关,因此我添加了Vue.js应用程序中使用的方法:Node.js 为什么我在Express上的CORS设置出现飞行前错误?,node.js,express,vue.js,cors,preflight,Node.js,Express,Vue.js,Cors,Preflight,我正在为个人网站设置RESTAPI。我的个人网站是用Vue.js构建的,api服务器是用express构建的。我在服务器上尝试了两种不同的CORS配置,但我似乎仍然得到了飞行前的错误,所以我认为我对某些地方缺乏了解 最初的目标是让我了解docker,将api/auth服务器容器化,并将其与前端vue.js应用程序分开托管。这是问题的一部分还是坏习惯 下面是我在其他帖子上找到的两个CORS配置,但都没有成功 配置#1: 配置#2: 我还想知道这是否与我如何发出请求有关,因此我添加了Vue.js应用
attemptLogin: function(event) {
event.preventDefault()
axios.post('http://0.0.0.0:5000/auth/login', {
username: this.username,
password: this.password
})
.then(res => {
if (res.data.success) {
this.updateLoginStatus()
this.updateJwt(res.data.token)
}
})
.catch(error => {
console.log(error)
});
}
其他可能有用的信息:
我尝试在同一台计算机上同时运行前端和后端,但没有成功。现在我在笔记本电脑上运行后端,在台式机上运行前端
如果您需要更多上下文,以下是两个存储库的GitHub repo:
前端:
后端:如果您是从同一来源运行的,这应该不会有问题。我怀疑您正在通过npm run serve运行Vue应用程序,然后将其指向后端服务器,该服务器正在另一台服务器上运行 尝试在后端创建名为public的目录。在Vue中,运行
npm run build
,然后获取缩小的文件并将其放置在公共目录中
然后使用express在节点中授予对其的访问权限:
app.use(express.static(path.join(__dirname, 'public')));
问题可能是
axios.post('http://0.0.0.0:5000/auth/login', {
username: this.username,
password: this.password
})
尝试使用http://0.0.0.0:5000/auth/login/
我曾经在mozilla和其他浏览器上也有飞行前的错误,如果最后没有删减的话。我可以知道你的CORS错误是什么吗 浏览器在devtools控制台中记录的确切错误消息是什么?响应的HTTP状态码是什么?这里是一个指向控制台屏幕截图的链接当您使用curl或Postman或其他工具向
http://10.10.81.100:5000/auth/login
?e、 例如,使用curl,curl-i-X选项-H“原点:http://localhost:8080" http://10.10.81.100:5000/auth/login
以下是我从《邮递员》中得到的信息:邮递员不需要做飞行前准备,所以它不会失败。我知道这种方法是可行的。我的目标是在一台独立于vue.js应用程序的服务器上安装API,但我想不出这样做的理由。看起来您正在将服务器(端口5000)而不是本地主机8080列入白名单。另外,您不能将本地主机列入白名单,因此您需要将这两个主机部署到一个云服务器,或者将本地ip列入白名单。您正在打一场不需要打的仗。以下是无法将localhost列入白名单的原因:
app.use(express.static(path.join(__dirname, 'public')));
axios.post('http://0.0.0.0:5000/auth/login', {
username: this.username,
password: this.password
})