尝试从客户端的Medium API访问公共故事时出错 [英] Error while trying to access public stories from Medium API on client side

问题描述

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

I'm trying to access Medium's API to get a list of public stories from a user. However, I'm getting a CORS error when I try to access it on the client side. Here's the code

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

我做了一些研究，发现了这个 github问题，但是找不到任何解决方法.有什么方法可以使此请求在客户端上运行?

I did some research and found this github issue, but couldn't find any workaround. Is there any way to make this request work on the client side?

推荐答案

您可以从 https:中获取HTML:///medium.com/@ev/latest 通过CORS代理提出请求-您可以自行设置代理，也可以仅使用

You can get the HTML from https://medium.com/@ev/latest by making your request through a CORS proxy — either a proxy you set up yourself or else just by using a public open CORS proxy like https://cors-anywhere.herokuapp.com/. Here’s how to do it using the standard 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代理来解决无访问控制-允许-来源标头"问题在 .

For more details — including how to set up your own CORS proxy on Heroku in just a few minutes, see How to use a CORS proxy to get around "No Access-Control-Allow-Origin header" problems in the answer at 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；相反，它是这样开始的:

Incidentally, if instead you want JSON, you can try https://medium.com/@ev/latest?format=json but you’ll find that what you get back isn’t actually valid JSON; instead it starts out like this:

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

显然，这是有意的，根据中型开发人员的评论在他们的问题跟踪器中:

JSON页面不能用作读取API.额外的代码可以支持我们自己的使用，并且是避免JSON劫持的一种标准技术.

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.

That’s trivial to work around, though: Just first handle the response as text in your client code, and strip out the ])}while(1);</x> from the start of it, and then run JSON.parse on what remains.

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

But as far as using Axios to get the response as text, I think you’ll find it’s not going to work as expected even if you make the request through a CORS proxy; try this:

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'，显然

The code hits the catch because apparently even when you specify responseType: 'text', Axios apparently still tries the parse the response as JSON:

这是因为即使responseType是文本，也总是在响应中尝试JSON.parse.我们应该确实解决这个问题.

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将会失败.

And https://medium.com/@ev/latest is HTML, not JSON, so running JSON.parse on it will fail.

这就是为什么此答案中的第一个代码段改用Fetch API(您可以用它返回文本)的原因.

That’s why the first snippet in this answer uses the Fetch API instead (you can get text back with it).

这篇关于尝试从客户端的Medium API访问公共故事时出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！