解决【Request header field bb is not allowed by Access-Control-Allow-Headers in preflight response.】问题

报错

Access to XMLHttpRequest at 'http://127.0.0.1:5002/user?a=kun&b=kong' from origin 'null' has been blocked by CORS policy: Request header field bb is not allowed by Access-Control-Allow-Headers in preflight response.

 

原因

        请求报头字段在响应中不被Access-Control-Allow-Headers允许，导致出现跨域导致

解决

        设置请求头,解决跨域问题

app.all("*", (req, res, next) => {
    console.log("经过跨域处理");
    console.log("req.method==>", req.method);

    //允许跨域地址
    // res.header("Access-Control-Allow-Origin", "http://127.0.0.1:5500");

    // res.header("Access-Control-Allow-Origin", "null");

    //*表示允许所有域请求，在实际开发中，一般指定允许某个域请求，如上面设置
    res.header("Access-Control-Allow-Origin", "*");

    //如果浏览器请求包括Access-Control-Request-Headers字段，则Access-Control-Allow-Headers字段是必需的。它也是一个逗号分隔的字符串，表明服务器支持的所有头信息字段，不限于浏览器在"预检"中请求的字段。
    res.header("Access-Control-Allow-Headers", "X-Requested-With,bb");

    //该字段必需，它的值是逗号分隔的一个字符串，表明服务器支持的所有跨域请求的方法。注意，返回的是所有支持的方法，而不单是浏览器请求的那个方法。这是为了避免多次"预检"请求。
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");

    //该字段可选。它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。这个值也只能设为true，如果服务器不要浏览器发送Cookie，删除该字段即可
    //res.header('Access-Control-Allow-Credentials', true);

    // if (req.method === "OPTIONS") {
    //     res.send(true);
    // } else {
    //     next();
    // }

    next();
});

解决