gpt4 book ai didi

javascript - 为什么我的表单数据 POST 没有被 Cors 策略阻止?

转载 作者:行者123 更新时间:2023-12-02 18:36:42 25 4
gpt4 key购买 nike

我对一个查询感到困惑:当我从在不同源运行的前端调用 POST 请求到在不同源运行的后端时,为什么我的包含表单数据的 POST 请求没有被 CORS 策略阻止?

我的 Nodejs 代码包含以下代码行:

const express = require('express');
const app = express();
const path = require("path");
const multer = require('multer');
const upload = multer({
dest:"uploads/"
})
app.use("/image",express.static(path.join(__dirname,"uploads")))
app.post("/upload",upload.single('profile'),(req,res)=>{
console.log(req.body);
console.log(req.file);
res.send("uploaded");
})

app.listen(8080,(err)=>{
if (err) {
console.log("Opps");
}
},()=>{
console.log("listening at port 8080");
})

我的前端代码:假设我从 http://127.0.0.1:5500/index.html

运行我的 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<title>Form with Photos</title>
</head>
<body>

<form onsubmit="handleForm(event)">
<input type="text" name="username"> <br>
<input type="file" name="profile"> <br>
<button type="submit">Submit</button>
</form>

<script>
const handleForm =(e)=>{
let username = document.querySelector("input[name='username']");
let profile = document.querySelector("input[name='profile']");
let fd = new FormData();
fd.append("username",username.value);
fd.append("profile",profile.files[0]);
axios({
method:"post",
url:"http://localhost:8080/upload",
data:fd
}).then((response)=>{
console.log(response.body);
}).catch((e)=>{
console.log(e);
})

e.preventDefault();
}
</script>
</body>
</html>

当我单击提交按钮时,我的文件和输入已成功提交到我的后端。但我想知道我的服务器 http://localhost:8080 和 client:http://127.0.0.1:5500/index.html 是不同的来源。但是为什么CORS没有屏蔽这个post请求呢?注意:我只是想知道通过 API 提交表单数据请求是否未被 CORS 阻止?`

最佳答案

出于网络兼容性原因,CORS 不适用于跨源表单帖子。它仅适用于我所说的“动态”请求(例如 AJAX、获取和其他一些请求)。

这是因为 HTML 表单早于 CORS 规范。

引入 CORS 后,他们无法在不破坏现有网站功能的情况下更改此行为。

这里是一些更多的信息:

关于javascript - 为什么我的表单数据 POST 没有被 Cors 策略阻止?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68675773/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com