记录一次跨域问题及解决方法
开发环境:前端 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;
}
踩坑小结
- 前后端不在同一服务器会产生跨域问题;
- 前后端通讯如果发生404需要检测服务端是否收到了客户端请求,如果没有可能是防火墙问题;
- 跨域问题使用CROS方案解决的话,需要考略到预请求(OPTIONS),如果服务端设置不标准也会产生问题;