如何使用提取以应用程序/ JSON的内容类型发布

Question

I have a react application that does a fetch call to an API as follows:

 postForm(state) {
    var formData = state.formData;
    return fetch('http://localhost:3000/api/V0.1/formSubmit', {method: 'POST', headers: {"Content-Type": "application/json"}, body: JSON.stringify(formData)})
    .then((response) => response.json())
    .then((responseJson) => {
      console.log(responseJson);
      return null;
    })
    .catch((error) => {
      console.error(error);
    });
  }

however, it gets blocked by CORS as the spec states that application/json is non-standard content type.

However, I'm not sure how I can modify my fetch call to perform the required pre-flight request to get it to allow application/json.

The API call is:

app.post("/api/v0.1/formSubmit", function(req, res) {
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8080');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
  res.setHeader('Access-Control-Allow-Headers', '*');
  var formData=req.body;
  console.log(formData);
  res.status(200).json(formData);
});

Answer 1

Before defining your routing. declare

app.use(function(req, res, next) {
        var oneof = false;
        if(req.headers.origin) {
            res.header('Access-Control-Allow-Origin', req.headers.origin);
            oneof = true;
        }
        if(req.headers['access-control-request-method']) {
            res.header('Access-Control-Allow-Methods', req.headers['access-control-request-method']);
            oneof = true;
        }
        if(req.headers['access-control-request-headers']) {
            res.header('Access-Control-Allow-Headers', req.headers['access-control-request-headers']);
            oneof = true;
        }
        if(oneof) {
            res.header('Access-Control-Max-Age', 60 * 60 * 24 * 365);
        }

        // intercept OPTIONS method
        if (oneof && req.method == 'OPTIONS') {
            res.send(200);
        }
        else {
            next();
        }
    });

In CORS, the request is checked for available methods on server. ie in OPTIONS request. When you get the successful response, you will able to send request.

You can enable CORS for specific pages also. study here https://github.com/expressjs/cors