javascript - 尝试从客户端的 Medium API 访问公共(public)故事时出错

Question

我正在尝试访问 Medium 的 API 以获取用户的公开故事列表。但是，当我尝试在客户端访问它时出现 CORS 错误。这是代码

axios.get(`http://medium.com/@ev/latest`).then((res)=>{
  console.log(res.data)
})
.catch((error)=>{
  console.log(error)
})

我做了一些研究，发现了这个 github issue ，但找不到任何解决方法。有什么方法可以使此请求在客户端有效吗？

Answer 1

您可以通过 CORS 代理发出请求，从 https://medium.com/@ev/latest 获取 HTML——可以是您自己设置的代理，也可以使用像 https://cors-anywhere.herokuapp.com/ 这样的公共(public)开放 CORS 代理。以下是使用标准 Fetch API 的方法:

fetch("https://cors-anywhere.herokuapp.com/https://medium.com/@ev/latest")
  .then(res => res.text())
  .then(text => document.querySelector("div").innerHTML = text)
  .catch(error => console.log(error))

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div></div>

有关更多详细信息 — 包括如何在短短几分钟内在 Heroku 上设置您自己的 CORS 代理，请参阅如何使用 CORS 代理解决“No Access-Control-Allow-Origin header”问题 在 No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API 的答案中。

---

顺便说一句，如果你想要 JSON，你可以试试 https://medium.com/@ev/latest?format=json，但你会发现你得到的实际上不是有效的 JSON；相反，它是这样开始的:

])}while(1);</x>{"success":true,"payload":{"user":{"userId":"268314bb7e7e","name"…

显然这是故意的，per a comment from a Medium developer in their issue tracker:

The JSON page is not intended to be used as a read API. The extra code is there to support our own use and is a standard technique to avoid JSON hijacking.

不过，解决这个问题很简单:只需首先在您的客户端代码中将响应作为文本处理，然后从开头删除 ])}while(1);</x>，然后对剩余部分运行 JSON.parse。

但就使用 Axios 获取文本响应而言，我认为即使您通过 CORS 代理发出请求，它也不会按预期工作；试试这个:

axios.get('https://cors-anywhere.herokuapp.com/http://medium.com/@ev/latest', {
    responseType: 'text'
  })
  .then(res => console.log(res.data))
  .catch(error => console.log("ERROR"))

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

代码命中 catch 因为显然即使你指定 responseType: 'text' ， Axios apparently still tries the parse the response as JSON :

This is because JSON.parse is always tried in the response, even if responseType is text. We should fix that indeed.

而 https://medium.com/@ev/latest 是 HTML，而不是 JSON，因此在其上运行 JSON.parse 会失败。

这就是为什么这个答案中的第一个片段使用了 Fetch API(您可以用它取回文本)。