个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-02 02:04:09 24 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/

24 4 0
文章推荐： arrays - 是否有任何理由按第一项传递数组？
文章推荐： ios - 应用程序因 EXC_BAD_INSTRUCTION (SIGILL) 崩溃？
文章推荐： django - Permission_required 装饰器不适合我
文章推荐： r - 从 R 调用 Amadeus flight-offers-pricing API？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com