Front-end page sent request post error, printed is Access-Control-Allow-Origin.

backend express

app.all("*", function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Methods", "PUT, GET, POST, DELETE, OPTIONS");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Headers", "Content-Type");
    next();
});

Front-end axios

import axios from "axios"
axios.defaults.baseURL = "http://localhost:5001"
var formdata = new FormData();
formdata.append("file", f);
axios({
    url: "/",
    method: "post",
    data: formdata,
    headers: {"Content-Type": "multipart/form-data", "Access-Control-Allow-Origin": "*"}})
    .then(function (res) {
         console.log(res)
    })
    .catch(function (err) {
         console.log(err)
    })

the app.all response header code has been added to the express code. Why is it still a problem for
to send a request at the front end?

Axios express javascript

Mar.13,2021

non-simple request and backend settings
Let you go through the process
when you request, you set Access-Control-Allow-Origin
so when the request becomes a non-simple request, the browser will first issue a pre-check OPTIONS request
carrying more request header information than the following (your request as an example)

Access-Control-Request-Headers: access-control-allow-origin
Access-Control-Request-Method: POST
Origin: http://

results your server sets res.header ('Access-Control-Allow-Headers',' Content-Type');
does not support access-control-allow-origin
so the pre-check fails
throws an error Request header field ser is not allowed by Access-Control-Allow-Headers in preflight response.

1) delete the Access-Control-Allow-Origin of the front end and simply request the Access-Control-Allow-Origin of your front end setting
2) set the backend res.header ('Access-Control-Allow-Headers',' Content-Type,Access-Control-Allow-Origin');

-update

I'm a little bit of a half-bottle of water.

has just been tested with express, and the xhr object also triggers prechecks.

fetch will also trigger a pre-check, and the previous answer is wrong.

the port on which your express listens is 5001? If the port is correct, it is recommended that you use cors package

// npm install cors
let cors = require('cors')
app.use(cors())
app.post('/', function (req, res, next) {
  console.log(111)
})

I suggest checking whether the settings are in effect and opening the network panel to take a look at response header first.

Previous: The WebView component that comes with RN does not listen for routing changes on a single page of H5.

Next: Can't js use import {} to get the properties of an object?