Cors-Anywhere пытается разобрать HTML как JSON - PullRequest
0 голосов
/ 08 апреля 2019

У меня была проблема cors, которую я отправил на прошлой неделе. Вы можете прочитать об этом здесь:

Как решить ошибку cors при запросе токена доступа у провайдера Google oauth2

Я прочитал подробное объяснение Sideshowbarker о том, как избежать проблем с ядрами, здесь:

В запрашиваемом ресурсе отсутствует заголовок «Access-Control-Allow-Origin» - при попытке получить данные из REST API

Одно из предложений, которое он делает в этих постах, - это использование прокси-сервера:

const proxyurl = "https://cors-anywhere.herokuapp.com/";
const url = "https://example.com"; // site that doesn’t send Access-Control-*
fetch(proxyurl + url) // https://cors-anywhere.herokuapp.com/https://example.com
.then(response => response.text())
.then(contents => console.log(contents))
.catch(() => console.log("Can’t access " + url + " response. Blocked by browser?"))

По сути, идея состоит в том, чтобы отправить ваш запрос через cors-anywhere.herokuapp.com, который прикрепит заголовки cors к ответу при его возврате.

Это сработало как талисман, так как я больше не получаю ошибки cors.

Однако теперь я получаю эту ошибку:

SyntaxError: Неожиданный токен <в JSON в позиции 0 в JSON.parse… </p>

И текст ошибки, который я получаю:

<!DOCTYPE html>
<html>
<head lang=en>
  <title>AniList</title>
  <meta charset=utf-8>
  <meta http-equiv=x-ua-compatible content="ie=edge">
  <meta http-equiv=Content-Security-Policy content=block-all-mixed-content>
  <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
  <meta property=og:site_name content=AniList>
  <meta name=twitter:site content=@AniChartNet>
  <meta name=twitter:card content=summary>
  <script>window.al_token = 'r0ePKxAFyZlUis7rLbkHzsRfeHnX1y3fOyVNBAhv';</script>
  <link href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel=stylesheet>
  <link rel=icon type=image/png sizes=32x32 href=/img/icons/favicon-32x32.png>
  <link rel=icon type=image/png sizes=16x16 href=/img/icons/favicon-16x16.png>
  <link rel=manifest href=/manifest.json>
  <meta name=theme-color content=#1f2631>
  <meta name=apple-mobile-web-app-capable content=yes>
  <meta name=apple-mobile-web-app-status-bar-style content=black>
  <meta name=apple-mobile-web-app-title content=AniList>
  <link rel=apple-touch-icon href=/img/icons/apple-touch-icon-152x152.png>
  <link rel=mask-icon href=/img/icons/safari-pinned-tab.svg color=#1f2631>
  <meta name=msapplication-TileImage content=/img/icons/msapplication-icon-144x144.png>
  <meta name=msapplication-TileColor content=#1f2631>
  <script src="https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit" async defer></script>
  <link href=/css/chunk-vendors.3826fb1f.css rel=preload as=style>
  <link href=/css/main.814d29e0.css rel=preload as=style>
  <link href=/js/chunk-vendors.6babed9d.js rel=modulepreload as=script>
  <link href=/js/main.354f3a88.js rel=modulepreload as=script>
  <link href=/css/chunk-vendors.3826fb1f.css rel=stylesheet>
  <link href=/css/main.814d29e0.css rel=stylesheet>
</head>
<body>
  <noscript>
     <div class=noscript>Sorry, AniList requires Javascript.<br>Please enable Javascript or <a href=http://outdatedbrowser.com>upgrade to a modern web browser</a>.</div>
  </noscript>
  <div class="noscript modern-browser" style="display: none">Sorry, AniList requires a modern browser.<br>Please <a href=http://outdatedbrowser.com>upgrade to a newer web browser</a>.</div>
  <div id=app></div>
  <script type=module src=/js/chunk-vendors.6babed9d.js></script> . 
<script type=module src=/js/main.354f3a88.js></script> . 
<script>!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()},!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();</script><script src=/js/chunk-vendors-legacy.e7161f54.js nomodule></script><script src=/js/main-legacy.5b341a0e.js nomodule></script>
</body>
</html>

Так что кажется, что cors -where пытается проанализировать вышеуказанный html как json, но, очевидно, не может. Я считаю, что html - это страница входа, которую я ожидаю от анилиста (но трудно сказать, если я не смогу просмотреть ее в браузере, который я не могу).

Итак, мой вопрос: есть ли способ сказать cors-где-либо не пытаться проанализировать ответ как json, а просто отправить его обратно как есть?

Спасибо

1 Ответ

0 голосов
/ 09 апреля 2019

Sideshowbarker был прав. Это не было проблемой с cors-где угодно. Это была моя просьба попытаться разобрать ответ как json, когда это была HTML-страница. Поняв это, я немного покопался, чтобы выяснить, как сделать вместо этого перенаправление. Эти две ссылки по совместительству решили мою проблему:

https://anilist.gitbook.io/anilist-apiv2-docs/overview/oauth/implicit-grant

Как перенаправить на внешний URL в Angular2?

Спасибо Sideshowbarker за то, что перефокусировал мое внимание.

...