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.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>
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?`
