你好,我已经创建了一个小的nodejs应用程序,用于邮寄目的,并将其部署在Heroku上。
我的前端有一个联系人表单,它是使用github页面托管的。 我在我的后端启用了cors,但是当我提交表单时,我仍然得到cors错误。
这是我的后端的一段代码。
const nodemailer = require("nodemailer");
const bodyParser = require("body-parser");
const cors = require("cors");
const app = express();
app.use(cors());
app.use((req, res, next) => {
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader(
"Access-Control-Allow-Headers",
"Origin, X-Requested-With, Content-Type, Accept, Authorization"
);
res.setHeader(
"Access-Control-Allow-Methods",
"GET, POST, PATCH, DELETE, OPTIONS, PUT"
);
next();
});
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.post("/contact", (req, res, next) => {
const transporter = nodemailer.createTransport({
service: "gmail",...
我在前台的请求是这样的。
e.preventDefault()
if (formState.formIsValid) {
setIsSending(true)
axios
.post(
"https://portfolio-kk-mail.herokuapp.com/contact",
{
sender: formState.inputValues.email,
subject: formState.inputValues.subject,
message: formState.inputValues.message,
},
{
headers: {
"Content-Type": "application/json",
},
}
)
.then(res => {
setIsSending(false)
setError(false)
submitBtn.current.style.background =
"linear-gradient(to right, #4BB543, #4BB54344)"
submitBtn.current.style.border = "1px solid #4BB543"
})
.catch(err => {
setIsSending(false)
setError(true)
submitBtn.current.style.border = "1px solid #B00020"
submitBtn.current.style.background =
"linear-gradient(to right, #B00020, #B0002044)"
})
}
}
我一点头绪都没有,我错过了什么?
因为您正在将content-type设置为JSON,所以CORS请求自动成为预取请求。 唯一不需要预飞行的内容类型是:
application/x-www-form-urlencoded
multipart/form-data
text/plain
因为浏览器将您的请求归类为预排请求,所以它会向您的服务器发送一个选项请求,以检查该请求是否被允许。 您需要在服务器上为此设置一个处理程序。
app.options('/contact', (req, res) => {
res.sendStatus(204);
});
只需将其放在CORS中间件之后即可。
您可以在MDN上的那些参考文献中阅读关于未预处理的简单请求的条件,也可以阅读关于预处理的请求的内容。