Vuejs2 将表单数据添加到后端时出现CORS问题
初学者在这里使用vue和express。我一直在尝试遵循某个教程,其中他们向数据库中添加了一个简单的表单数据,但出于某种原因,我的错误是: CORS策略已阻止从源站访问XMLHttpRequest:对飞行前请求的响应未通过访问控制检查:它没有HTTP ok状态 以下是我在后端制作的内容:Vuejs2 将表单数据添加到后端时出现CORS问题,vuejs2,vue-component,vue-router,bootstrap-vue,Vuejs2,Vue Component,Vue Router,Bootstrap Vue,初学者在这里使用vue和express。我一直在尝试遵循某个教程,其中他们向数据库中添加了一个简单的表单数据,但出于某种原因,我的错误是: CORS策略已阻止从源站访问XMLHttpRequest:对飞行前请求的响应未通过访问控制检查:它没有HTTP ok状态 以下是我在后端制作的内容: app.use('/create',(req,res,next)=>{ res.set({ "Access-Control-Allow-Origin":"http://localh
app.use('/create',(req,res,next)=>{
res.set({
"Access-Control-Allow-Origin":"http://localhost:8080",
"Access-Control-Allow-Headers":"Content-Type",
})
var mysql = require('mysql')
var connection = mysql.createConnection(config)
// SET ?
// `FirstName`=?, `LastName`=?, `Email`=?, `ContactNumber`=?
// [req.body.FirstName,req.body.LastName,req.body.Email,req.body.ContactNumber]
var sql = "INSERT INTO `guest` SET `FirstName`=?, `LastName`=?, `Email`=?, `ContactNumber`=?"
connection.query(sql,[req.body.FirstName,req.body.LastName,req.body.Email,req.body.ContactNumber],(err,results,fields)=>{
connection.end()
if(err){
next(err)
}else{
res.json([true,results]) //.insertId
}
})
})
在前端:
<b-form v-model="contactForm" @submit="check();addGuest();" @reset="onReset" v-if="show">
<b-form-group
id="input-group-1"
label="Email address:"
label-for="input-1"
description="Give us an email to give a receipt to"
>
<b-form-input
id="input-1"
v-model="contactForm.Email"
type="email"
required
placeholder="Enter email"
></b-form-input>
</b-form-group>
<b-form-group id="input-group-2" label="Your Name:" label-for="input-2">
<b-form-input
id="input-2"
v-model="contactForm.FirstName"
required
placeholder="Enter first name"
></b-form-input>
<b-form-input
id="input-3"
v-model='contactForm.LastName'
required
placeholder="Enter last name"
></b-form-input>
</b-form-group>
<b-form-group
id="input-group-3"
label="Contact Number"
label-for="input-3"
description="Give us a contact number to give a receipt to"
>
<b-form-input
id="input-4"
v-model='contactForm.ContactNumber'
type="tel"
required
placeholder="Enter Contact Number"
></b-form-input>
</b-form-group>
<b-button type="submit" variant="primary">Submit</b-button>
<b-button type="reset" variant="danger">Reset</b-button>
</b-form>
我是不是错过了什么大事?我只是修改了我在教程中看到的内容。在Express中激活Access Control Allow Origin并不是那么简单,但也不难:
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "YOUR-DOMAIN.TLD"); // update to match the domain you will make the request from
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
app.get('/', function(req, res, next) {
// Handle the get for this route
});
app.post('/', function(req, res, next) {
// Handle the post for this route
});
资料来源:
您必须设置res.header并将其传递给Express才能使用该设置。哦,我想这比我在教程中使用的效果更好。谢谢我希望它能满足您的需要:
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "YOUR-DOMAIN.TLD"); // update to match the domain you will make the request from
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
app.get('/', function(req, res, next) {
// Handle the get for this route
});
app.post('/', function(req, res, next) {
// Handle the post for this route
});