メディアのAPIにアクセスして、ユーザーからのパブリックストーリーのリストを取得しようとしています。ただし、クライアント側でアクセスしようとするとCORSエラーが発生します。ここでは、コードクライアント側のメディアAPIからパブリックストーリーにアクセスしようとしたときにエラーが発生しました
axios.get(`http://medium.com/@ev/latest`).then((res)=>{
console.log(res.data)
})
.catch((error)=>{
console.log(error)
})
私はいくつかの研究を行なったし、このgithub issueを見つけたのですが、任意の回避策を見つけることができませんでした。このリクエストをクライアント側で動作させる方法はありますか？
あなたはCORSプロキシを介して、あなたの要求を行うことにより、https://medium.com/@ev/latestからHTMLを取得することができます -
問題へのこのコメントは、プロキシサーバとしてAWSラムダを使用することを実行する方法を説明し自分だけでなく、公開されているCORSプロキシ（https://cors-anywhere.herokuapp.com/など）を使用するだけです。ここでは、標準の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プロキシを設定する方法を含みます「No Access-Control-Allow-Originヘッダー」の問題を解決するためのCORSプロキシー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：JSONページは読み取りAPIとして使用されるものではない
。特別なコードは、独自の使用をサポートするためのもので、JSONハイジャックを回避するための標準的な手法です。回避するには些細だ
は、しかし：ちょうど最初のクライアントコードでのテキストとして応答を処理し、それを開始してから])}while(1);</x>を取り除く、その後、残っているものにJSON.parseを実行します。
しかし、Axiosを使ってテキストとして応答を取得する限り、CORSプロキシを使用してリクエストを行っても期待通りには動作しません。これを試してください：どうやらも、あなたはresponseType: 'text'を指定するときcatchので
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>コードがヒット、Axios apparently still tries the parse the response as JSON：
を
JSON.parseは常に応答で試行されているため、これは、場合でも、responseTypeはテキストです。私たちはそれを本当に修正すべきです。
https://medium.com/@ev/latestは、JSONではなくHTMLであるため、JSON.parseを実行するとエラーになります。
これは、この回答の最初のスニペットが代わりにFetch APIを使用する理由です（テキストを返すことができます）。
これは現在、中程度（サーバーはAccess-Control-Allow-Originヘッダーで応答しません）では許可されていません。おそらくセキュリティ上の懸念があるからです。
あなたがリンクしているGitHubの問題で示唆されているように、可能な解決策は、リクエストをサーバー経由で（プロキシとして）トンネリングすることです。要求されたメディアページ（サーバー側）を取得し、それをクライアント側に返すサーバー上のエンドポイント（つまり、http://my-server.com/get-medium/@ev/latest）を作成できます。あなたが設定のいずれかのプロキシ - link