httplib服务端配置解决跨域问题

记录一次跨域问题及解决方法

开发环境：前端 vue + 后端server (QT httplib)

---

一、问题描述

请求API时，报错 OPTIONS 404；

二、分析：

由于前后端在不同计算机上，可能产生了跨域问题，解决思路采用以下方式，这里主要用了nginx代理和cros方法：
https://www.cnblogs.com/sdcs/p/8484905.html 感谢伟大的度娘

但是，使用nginx代理及cros方法后没有效果，经过分析服务端没有收到http请求，猜测是不是防火墙问题，将防火墙关闭后，发现可以404 变成了200，但是还存在问题。
nginx 配置

cros设置服务端

    res.set_header("Access-Control-Allow-Origin", "*");  // 若有端口需写全（协议+域名+端口）
    res.set_header("Access-Control-Allow-Credentials", "true"); 

分析，此时可以看到服务端收到了OPTIONS的请求，猜测是否是请求回复不对，经过查找，添加以下协议头，问题解决。

三、CROS 方案 重要代码

绑定Get、Options方法调用

    m_server.Get(api_name.toStdString(),m_interface_map.value(api_name));
    m_server.Options(api_name.toStdString(),m_interface_map.value(api_name));

调用方法，绑定的处理函数

void interface_api(const httplib::Request& req, httplib::Response& res)
{
    qDebug() << "请求方法" << req.method ;
    res.set_header("Access-Control-Allow-Origin", "*");  // 若有端口需写全（协议+域名+端口）
    res.set_header("Access-Control-Allow-Credentials", "true"); 
    res.set_header("Access-Control-Expose-Headers", "content-type");
    res.set_header("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
    res.set_header("Access-Control-Allow-Headers", "Content-Type,Access-Control-Allow-Headers,Authorization,X-Requested-With");
    if(! req.method.compare("OPTIONS"))
    {
        return;
    }
    // 具体接口API功能
    return;
}

踩坑小结

1. 前后端不在同一服务器会产生跨域问题；
2. 前后端通讯如果发生404需要检测服务端是否收到了客户端请求，如果没有可能是防火墙问题；
3. 跨域问题使用CROS方案解决的话，需要考略到预请求（OPTIONS），如果服务端设置不标准也会产生问题；