javascript - goodreads API 给出了 Cross-Origin Request Blocked : error in javascript

Question

我试图在 javascript 中列出来自 goodreads 的书籍，但它给出了跨源请求被阻止的错误。

const uri = ‘https://www.goodreads.com/search/index.xml?key={mykey}=Ender%27s+Game';

let f = new Headers();

let req = new Request(uri, {

method : ‘GET’,

headers :f,

mode :’cors’

});

fetch(req).then((response) => {

}).then( (jsonData) => {

}) .catch( (err) => {

console.log(‘err’);

});

});

如何解决它并检索结果。

我在这里浏览了很多链接，但似乎没有任何帮助。谁能帮我解决这个问题。

问候

Answer 1

对于像我这样的人，他们已经失去了找到这个问题答案的所有希望，并且满怀信心地来到这里，但是在 SO 中没有答案，这里是要遵循的方法。

背景。自 2015 年以来就有人提出解决这个问题(根据 Goodreads 论坛)。至少 6 年，考虑到解决起来是多么容易，请放弃你的希望，因为它不会发生，很遗憾。

旁注。不要费心向 Goodreads 询问 JSON 响应。 Goodreads 不会给您任何东西，只会给您一个 HTML iframe。顺便说一下，这不是 JSON 响应，正如您猜到的那样。相反，使用 XML 响应 (format=xml)。不用担心，Node 中有一个库可以帮助您:xml2js

解决方案。与许多 CORS 问题一样，这是通过反向代理解决的(前提是您无法更改服务器)。

有很多选择。我找到了 cors-anywhere ，用一个公共(public)服务器来指向 (https://cors-anywhere.herokuapp.com/)，但它也可以安装在你的机器上。对于 Goodreads，请求 URL 应采用以下格式:https://cors-anywhere.herokuapp.com/https://www.goodreads.com/book/isbn/{isbn}?format=xml&user_id={ userid}&key={apikey}.

我最终使用了 axios library建立连接(按照本 Goodreads developers post 中的建议)

我的 Angular 解决方案(但我想它可以很容易地转换到任何 JS 系统，包括纯 Web)。

. . .
import axios from 'axios';
import { AxiosInstance } from "axios";
import * as xml2js from 'xml2js'; // To parse XML to JSON-like
. . .


export class YourService {

  private axiosClient: AxiosInstance;

  constructor(private httpClient: HttpClient) {

    this.axiosClient = axios.create({
            timeout: 3000,
            headers: {
                "X-Initialized-At": Date.now().toString()
            }
        });

  }


  async getBook(isbn: string):Promise<YourBookObject> {
    . . .
    var config = {headers: {"X-Requested-With" : "XMLHttpRequest"}};
    var url = "https://cors-anywhere.herokuapp.com/https://www.goodreads.com/book/isbn/"+isbn+"?format=xml&user_id="+userid+"&key="+apikey
    await this.axiosClient.get(url, config )
    .then(function (response) {
          if(response.status == 200){
            xml2js.parseString( response.data, function (err, result) {
              console.log("XML-JSON Parse")
              console.log(result); // Prints JSON object!
              . . .
            });
          }
        })
    .catch(function (error) {
          console.log(error);
    })
    . . . // additional checks to response and return
  }

}

希望我有所帮助，虽然晚了 1 年:)