关于客户端申请跨域的问题2

Question

还是报错，怀疑是c++代码的问题：
Access to XMLHttpRequest at 'http://192.168.2.22:88/' from origin 'http://127.0.0.1:8080' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

c++做了跨域：

void HttpResponse::addHeader(Buffer& buffer)
{
    buffer.append("Content-Type: text/html; charset=UTF-8\r\n");
    buffer.append("Connection: ");
    if(isKeepAlive)
    {
        buffer.append("keep-alive\r\n");
    }
    else
    {
        buffer.append("close\r\n");
    }

        buffer.append("Content-type: application/json\r\n");
    buffer.append("Access-Control-Allow-Origin:*\r\n");

前端js:

result.addEventListener("mouseover", function(){
        const xhr = new XMLHttpRequest();
        //      console.log("test");
        //xhr.open('GET', 'http://121.41.165.74:8888/getjson');
        xhr.open('POST', 'http://121.41.165.74:8888');
        //  xhr.send('json_data=');
        // json object1 = R"({"ProjName":"*********************hn","FileName":"eeee    .catpart", "ProjNumber":30, "JpgFile":"kk.jpg","Comments": "cdr for employee    ","ProjType": "graphic design","ProjState": 1,  "version": 1,"CreateTime": "    20230728","UpdateTime": "20230608","pid": 6})"
        var jsonObject = {
        "ProjName": "*********************hn",
        "FileName": "eeee.catpart",
        "ProjNumber": 30,
        "JpgFile": "kk.jpg",
        "Comments": "cdr for employee",
        "ProjType": "graphic design",
        "ProjState": 1,
        "version": 1,
        "CreateTime": "20230728",
        "UpdateTime": "20230608",
        "pid": 6
        };
        // 将 JSON 对象转换为字符串
        var jsonString = JSON.stringify(jsonObject);
        // 创建 XMLHttpRequest 对象
        //var xhr = new XMLHttpRequest();
        //var url = "your_backend_url_here"; // 替换成你的后端接口地址
        // 设置 POST 请求
    //  xhr.open("POST", url, true);
        xhr.setRequestHeader("Content-Type", "application/json");
        // 发送请求
        xhr.send(jsonString);
        xhr.onreadystatechange=function(){
            if(xhr.readyState === 4){
                if(xhr.status >= 200 && xhr.status <300){
                    result.innerHTML = xhr.response;
                }   }}
});

Answer 1

引自免费微信小程序：皆我百晓生

你遇到的问题是跨域资源共享（CORS）错误，具体表现是浏览器阻止了你的前端JavaScript通过XMLHttpRequest发起的POST请求，因为目标服务器没有在预检请求（OPTIONS）响应中允许Content-Type头部。

问题分析：

1. 从错误信息可以看出，尽管你在后端C++代码中设置了Access-Control-Allow-Origin: *以允许任何源进行跨域访问，但并未处理预检请求中的Access-Control-Allow-Headers头，导致POST请求时发送的Content-Type: application/json被服务器拒绝。

2. 在前端JavaScript中，你正确地设置了xhr.setRequestHeader("Content-Type", "application/json")来表明要发送JSON数据，但在后端C++代码中未处理这个请求头。

解决方案：

你需要修改后端C++代码，以便在响应中添加Access-Control-Allow-Headers头，并指定允许Content-Type。以下是修改后的C++代码：

void HttpResponse::addHeader(Buffer& buffer, bool isPostRequest)
{
    // 其他原有设置保持不变

    buffer.append("Access-Control-Allow-Origin: *\r\n");
    
    // 对于POST请求，需要添加以下内容以允许Content-Type头
    if (isPostRequest) {
        buffer.append("Access-Control-Allow-Methods: POST\r\n");
        buffer.append("Access-Control-Allow-Headers: Content-Type\r\n");
    }

    // ...其他可能需要的响应头
}

然后，在调用HttpResponse::addHeader()方法时，确保传入一个参数表示是否为POST请求。

另外，请注意，如果服务端仅支持POST请求的跨域，还需要在响应头中明确声明Access-Control-Allow-Methods。

前端无需改动，因为你已经正确配置了前端部分的跨域请求头和发送JSON数据的方式。

最后，确保后端服务正确处理OPTIONS预检请求并返回相应的CORS响应头。对于大多数Web服务器框架或库来说，通常会有专门的中间件或模块处理CORS。如果你正在使用自定义的HTTP服务器实现，则需自行处理OPTIONS请求并附加正确的响应头。