一次JavaScript调用api的经历

想做一个聊天机器人的界面,后台使用图灵机器人的服务,他们没有demo,遂自己写一个post请求。然而由于同源策略(CORS,Cross-Origin Sharing Standard),这个唯一的api完全不能用。

跨域请求

实现跨域请求的方式很多,但纯前端实现有点困难,比较简单的实现有两种,都需要服务器配合。

JSONP

我们知道CORS会阻止从JS代码访问其他网站的行为,但像<img><script>一类的标签允许从其他网站加载资源。利用<script>的这一特性,我们将服务器返回的JSON数据包装成JS代码,就能够实现跨域请求。以JSONP实现的跨域请求都是GET请求。

常用的http库中axios不支持jsonp,我选择了vue-jsonp。该依赖会将jsonp格式的数据解释成json。

this.$jsonp("http://api.guohere.com/api.php", {
        text: this.text
      }).then(res => {
        console.log(res);
        this.text=res;
      }).catch(err=>{
        console.log(err);
      });

JSONP的后端配置

如果后端以JSON格式输出,会触发CORB(Cross-Origin Read Blocking),这是因为浏览器会认为传输的内容不是JS代码(而你借用了<script>标签的开放性)。传输与限定格式不符的内容是一个具有潜在隐患的行为,尽管非JS内容不会运行,<img>引入的非图片资源也不会加载,但这些资源会留在当前页面进程使用的内存空间里。

幽灵和熔断漏洞和CPU预执行有关,程序存在访问超出边界的内存空间的机会,因此有必要阻止不符合预期的内容。CORS仅仅不加载内容,CORB甚至不会读取内容到内存。更多关于CORB的内容可以访问https://segmentfault.com/a/1190000016126079

说这么多,我们要做的就是将JSON包装成JS代码,这里把json作为callback函数的参数,最后的输出就是jsonp的格式。

$jsoncallback = htmlspecialchars($_REQUEST ['callback']);
echo $jsoncallback . "(" . $response . ")";
//返回$jsoncallback([json_content])

CORS

CORS规定,如果服务器的响应头中指定了Access-Control-Allow-Origin,那么该属性规定的域名可以向当前服务器发起请求(域名可以是通配符)。

在PHP中,可以这样描述:

header("Access-Control-Allow-Origin:http://abc.com:8080");

如果需要发送cookie,则不能使用通配符,且只能指定一个站点。

后端配置

api.php应当接受参数并且向真正的api地址发起请求,这里不考虑cookie,简单实现了一下(实际上在使用postman实验时发现它可以直接生成各种语言发起请求的代码)。

$text = $_GET["text"];
$curl = curl_init();

curl_setopt_array($curl, array(
  CURLOPT_URL => "http://openapi.tuling123.com/openapi/api/v2",
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_ENCODING => "",
  CURLOPT_MAXREDIRS => 10,
  CURLOPT_TIMEOUT => 30,
  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
  CURLOPT_CUSTOMREQUEST => "POST",
  CURLOPT_POSTFIELDS => "{\n        reqType: 0,\n        perception: {\n          inputText: {\n            text: \".$text.\"\n          },\n               },\n        userInfo: {\n          apiKey: \"14322298e9b54342bbcb56249595122b\",\n          userId: \"******\"\n        }\n      }",
  CURLOPT_HTTPHEADER => array(
    
    "cache-control: no-cache"
  ),
));

$response = curl_exec($curl);
$err = curl_error($curl);

curl_close($curl);

小结

无论如何都需要后端配合啊。。有中间层就好多了。

发表评论

电子邮件地址不会被公开。