javascript - 对预检请求的 Angular 响应未通过访问控制检查

Question

我遇到了 https://od-api.oxforddictionaries.com:443/api/v1/entries/en/ace/pronunciations 的问题API 我已在其他 API 上使用过此代码。我尝试使用 POSTMAN 及其工作原理。所以我认为问题出在我的代码上。

getWord(word) {
  let headers = new Headers();
  headers.append('Accept','application/json');
  headers.append('app_id','xxxxxx');
  headers.append('app_key','xxxxx');

  return this._http.get('https://od-api.oxforddictionaries.com:443/api/v1/entries/en/ace/pronunciations',{headers:headers})
     .map(res => res.json());
}

错误:

Answer 1

请注意错误消息的一部分:

The response had HTTP status code 403.

这表明身份验证失败。

因此，这可能只是意味着您没有在必要的 app_id 和 app_key 请求 header 中提供有效值。检查这些值并(重新)注册或生成新的 API key (如果需要)。

否则，来自 https://od-api.oxforddictionaries.com API 端点的响应确实包含 Access-Control-Allow-Origin 响应 header ，包括 选项响应:

$ curl -X OPTIONS -i \
   --header "Origin: http://example.com" \
   --header "Access-Control-Request-Headers: app_id, app_key" \
   --header "Access-Control-Request-Method: GET" \
   --header "app_id: 023xxxxx" \
   --header "app_key: e6a772cxxxxxxxxxxxxxxxxxxxxxxxxx" \
   "https://od-api.oxforddictionaries.com/api/v1/entries/en/ace/pronunciations"

HTTP/1.1 200 OK
Access-Control-Allow-Headers: app_id
Access-Control-Allow-Methods: DELETE, GET, HEAD, OPTIONS, PATCH, POST, PUT
Access-Control-Allow-Origin: http://example.com
Allow: HEAD, OPTIONS, GET
Content-Type: text/html; charset=utf-8
Date: Tue, 01 Aug 2017 22:49:53 GMT
Server: openresty/1.9.7.4
version: v1.1.0-601-g45837e9
Content-Length: 0
Connection: keep-alive

因此，如果您修复代码以发送有效的 app_id 和 app_key 请求 header 值，它应该可以工作。