I got confused regarding one query: when I call POST request from frontend running at a different origin to my backend running at a different origin, why is my POST request containing form data isn't blocked by CORS policy??
My Nodejs code contains the following lines of code:
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");
})
My Frontend code:
Suppose I am running my index.html from http://127.0.0.1:5500/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=".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>
When I click the submit button, my files and input are successfully submitted to my backend. But I am wondering my server http://localhost:8080 and client:http://127.0.0.1:5500/index.html is different origins. But why CORS didn't block this post request? Note:I am just eager to know whether form-data post request through API isn't blocked by CORS or not?`
I got confused regarding one query: when I call POST request from frontend running at a different origin to my backend running at a different origin, why is my POST request containing form data isn't blocked by CORS policy??
My Nodejs code contains the following lines of code:
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");
})
My Frontend code:
Suppose I am running my index.html from http://127.0.0.1:5500/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/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>
When I click the submit button, my files and input are successfully submitted to my backend. But I am wondering my server http://localhost:8080 and client:http://127.0.0.1:5500/index.html is different origins. But why CORS didn't block this post request? Note:I am just eager to know whether form-data post request through API isn't blocked by CORS or not?`
- 1 You don't need to be part of the same domain to submit a POST request; you can POST data to anywhere. – Obsidian Age Commented Aug 6, 2021 at 3:32
1 Answer
Reset to default 7For web patibility reasons CORS doesn't apply to cross-origin form posts. It only applies to what I would call "dynamic" requests (e.g. AJAX, fetch, and a few others).
This is because HTML forms pre-date the CORS specification.
When CORS was introduced they couldn't change this behaviour without potentially breaking existing website functionality.
Here is some more information:
MDN page that lists the requests that are subject to CORS: What requests use CORS?
Previous stack questions:
https://security.stackexchange./questions/221770/cors-error-but-only-from-ajax-and-not-from-html-form
Cross Domain Form POSTing
How to prevent security issues from cross-site request forgery (CSRF) requests:
- How to block cross-origin access
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745350352a4623794.html
评论列表（0条）