在预检请求中不收到 http 403 的情况下通过 AJAX 访问 Genius API 的正确方法是什么？

Question

我正在构建一个非常小的 google chrome 扩展程序，以打开我在 Spotify 上收听的歌曲的Genius歌词页面。我成功地从 Spotify 正确获取了歌曲数据，并且可以向 Genius 验证用户身份，但是当我搜索歌曲时，请求在预检时失败。

Genius 响应{"meta":{"status":403,"message":"Action forbidden for current scope"}}，并且 chrome 正在控制台上打印此内容：Response for preflight has invalid HTTP status code 403。

尽管 Genius 似乎归咎于令牌的范围，但我尝试使用所有范围（me、create_annotation、manage_annotation和vote）进行身份验证，但问题仍然存在。此外，相同的请求使用相同的令牌与 Postman 一起工作正常。

我的代码如下：

let xhttp = new XMLHttpRequest();
xhttp.open("GET", "https://api.genius.com/search?q=Paranoid", true);
xhttp.setRequestHeader("Authorization", "Bearer " + accessToken);
xhttp.send();

完整的请求：

General
Request URL:https://api.genius.com/search?q=Paranoid
Request Method:OPTIONS
Status Code:403 
Remote Address:104.16.213.100:443
Referrer Policy:no-referrer-when-downgrade

Request Headers
:authority:api.genius.com
:method:OPTIONS
:path:/search?q=Paranoid
:scheme:https
accept:*/*
accept-encoding:gzip, deflate, br
accept-language:pt-BR,pt;q=0.9,en-US;q=0.8,en;q=0.7
access-control-request-headers:authorization
access-control-request-method:GET
origin:chrome-extension://ppkhnbipegikhcenmfgpajgphcdkgdej
user-agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36

Response Headers
access-control-allow-headers:Origin, Access-Control-Request-Method, Access-Control-Request-Headers, Content-Type, Accept, X-Auth-Token, Authorization
access-control-allow-methods:GET, PUT, POST, OPTIONS, DELETE
access-control-allow-origin:*
cache-control:no-cache
cf-ray:3e3dc4d51f888138-GRU
content-encoding:gzip
content-type:application/json; charset=utf-8
date:Sat, 27 Jan 2018 18:27:56 GMT
expect-ct:max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
server:cloudflare
set-cookie:__cfduid=db59a3c93b09d3f7b0907ed395ceb1b341517077676; expires=Sun, 27-Jan-19 18:27:56 GMT; path=/; domain=.genius.com; HttpOnly
status:403
status:403 Forbidden
via:1.1 vegur
x-runtime:11

Genius API，参考： https: //docs.genius.com/

Answer 1

我正在使用 React 做类似的事情，并且遇到了相同的错误，因为我在网上找不到答案，唯一对我有用的是：而不是对 url 进行请求并单独发送标头进行身份验证（正如推荐的那样）文档）有效的是将 access_token 作为 query_string 发送（不发送标头），例如： https://api.genius.com/search?q=Paranoid&access_token=YOUR_ACCESS_TOKEN