将表单数据添加到后端时出现 CORS 问题

Posted 2023-02-23

【中文标题】将表单数据添加到后端时出现 CORS 问题

【英文标题】：CORS issue when adding form data to backend

【发布时间】：2020-05-07 22:19:53

【问题描述】：

这里是使用 vue 和 express 的初学者。我一直在尝试遵循某个教程，他们将简单的表单数据添加到数据库中，但由于某种原因，它给了我这个错误：

从源“http://localhost:8080”访问“http://localhost:3000/create”处的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：它没有 HTTP ok 状态。

这是我在后端制作的：

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>

方法脚本：

addGuest()
                //POST a guest
                // evt.preventDefault()
                // console.log(this.contactForm)

                axios.post('http://localhost:3000/create',this.contactForm)
                .then((res)=>
                    console.log(res.data)
                )
                .catch((err)=>
                    alert('AJAX error')
                )
            

我在这里错过了什么大事吗？我实际上只是修改了我在教程中看到的内容。

【参考方案1】：

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

来源：https://enable-cors.org/server_expressjs.html

您必须设置 res.header 并将其传递给 Express 以使用该设置。

【讨论】：

哦，我想这比我在教程中使用的效果更好。谢谢！

我希望它能满足你的需要:)