好的，所以我正在尝试编写一个put请求，通过他们的电子邮件在我的数据库中搜索用户，然后用请求中传递的数据更新用户的配置文件。
这是我的服务器app.js 中的put请求
app.put("/account/edit", auth, (request, response) => {
const { name, email } = request.body;
const filter = {email: request.user.userEmail};
const update = { name: {name}, email: {email}};
await User.findOneAndUpdate(filter, update)
.then((result) => {
response.status(200).send({
message: "Edit Successful",
result,
})
.catch((error) => {
response.status(404).send({
message: "User not found/updated",
error,
});
})
})
}
)
在提交了这个更改之后，我的服务器突然没有一个请求工作。即使登录、注册新用户，他们也会给出CORS错误，而在我添加这一点之前，他们没有给出这些错误。我已经测试过了，正是这个变化导致了这个问题。
在此之前，我就是这样处理CORS错误的。我从一个教程中得到了这个，到目前为止它一直对我有效。
// Curb Cores Error by adding a header here
app.use((req, res, next) => {
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader(
"Access-Control-Allow-Headers",
"Origin, X-Requested-With, Content, Accept, Content-Type, Authorization"
);
res.setHeader(
"Access-Control-Allow-Methods",
"GET, POST, PUT, DELETE, PATCH, OPTIONS"
);
next();
});
所以我一定是用我试图写的编辑帐户API破坏了一些东西。
这是我调用API EditProfileForm.js 的前端
import React, {useEffect, useState} from 'react';
import axios from 'axios';
import Cookies from "universal-cookie";
const cookies = new Cookies();
const token = cookies.get("TOKEN");
function EditProfileForm() {
const [ user, setUser ] = useState({name:"", email:""});
const saveChanges = (e) => {
e.preventDefault();
const name = user.name;
const email = user.email;
const configuration = {
method: "put",
url: "MYURL/account/edit",
headers: {
Authorization: `Bearer ${token}`,
},
data: {
name,
email,
}
};
axios(configuration)
.then((result) => {
console.log(result);
})
.catch((error) => {
error = new Error();
})
}
// useEffect executes once the page loads
useEffect(() => {
// set configuration for API call
const configuration = {
method: "get",
url: "MYURL/account",
headers: {
Authorization: `Bearer ${token}`,
},
};
axios(configuration)
.then((result) => {
//assign the User to the in result to User we initialized
setUser(result.data);
})
.catch((error) => {
error = new Error();
window.location.href="/";
});
}, []);
return(
<div className="edit-account">
<form className="edit-profile-form">
<ul>
<li>
<p className="edit-form-tag">Name:</p>
<input
className="edit-form-input"
id="edit-name"
value={user.name || ''}
onChange={(e) => setUser({...user, name: e.target.value})}
/>
</li>
<li>
<p className="edit-form-tag">Email:</p>
<input
className="edit-form-input"
id="edit-email"
value={user.email || ''}
onChange={(e) => setUser({...user, email: e.target.value})}
/>
</li>
<li>
<button type="submit" onClick={(e) => saveChanges(e)}>Save Changes</button>
</li>
</ul>
</form>
</div>
);
}
export default EditProfileForm;
这是尝试登录时的错误。我得到了相同的错误，任何API调用现在
从原点访问'MYURL/login'的XMLHttpRequesthttp://localhost:3000'已被CORS策略阻止：对飞行前请求的响应未通过访问控制检查：请求的资源上不存在"access control Allow Origin"标头。
好的，所以我从我的app.js中删除了整个put请求-一切都修复了。然后我一行一行地把它添加回来，看看哪里出现了错误，这是在我添加之后
await User.findOneAndUpdate(filter, update)
知道为什么这会导致我所有API的CORS错误吗？
编辑-这是等待。摆脱了这一点，现在除了这一个，每个API都能重新工作。现在我只需要弄清楚为什么这个内部服务器500错误失败了
通过在等待用户.findOneAnd更新