浏览器中js的请求访问非同一个域名下的服务,就会产生跨域问题,浏览器会自动发送一个OPTIONS请求进行验证,服务端会做出响应,当浏览器判断服务的响应头中包含允许跨域的字段后,才会允许HTML中js进行请求。
跨域的错误提示如下:
Access to XMLHttpRequest at 'http://127.0.0.1:8092/' from origin 'http://192.168.10.135:38312' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
因此asio服务必须要对接收的options请求返回允许跨域的响应头,一般添加如下三个就可以。
Access-Control-Allow-Origin:* Access-Control-Allow-Methods:* Access-Control-Allow-Headers:*
在C++的代码中这样增加:
rep.status = reply::ok;
//响应头必须带上响应数据长度以及类型
//如果不带上响应类型 fiddler可以得到值 但通过python或者C++拿不到值
rep.headers.resize(5);
rep.headers[0].name = "Content-Type";
rep.headers[0].value = "application/json;charset=UTF-8";
rep.headers[1].name = "Content-Length";
//http请求返回的必须是utf8格式的字符串
//utf8格式一个中文占3个字节
//最外层json结束
writer.EndObject();
string ret_data = strBuf.GetString();
rep.content =ret_data;
rep.headers[1].value = std::to_string(rep.content.size());
rep.headers[2].name = "Access-Control-Allow-Origin";
rep.headers[2].value = "*";
rep.headers[3].name = "Access-Control-Methods";
rep.headers[3].value = "*";
rep.headers[4].name = "Access-Control-Allow-Headers";
rep.headers[4].value = "*";
启动服务后,可以看到浏览器没有报跨域的错误提示。



