Question

我上周发布了一个cors问题。你可以读到它在这里：

How to solve cors error when requesting access token from google oauth2 provider

我在这里阅读了sideshowbarker关于如何避免发生cors问题的深入说明：

No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a 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标头。

这就像一种魅力，因为我不再遇到错误。

但是，我现在收到此错误：

SyntaxError：JSON中的意外令牌<位于JSON.parse的位置0 ...

我收到的错误消息是：

<!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-wherewhere都试图将上述html解析为json，但显然不能。我相信html是我希望从动画制作者那里回来的登录页面（但是很难告诉，除非我可以在无法使用的浏览器中查看它）。

所以我的问题是：是否有一种方法可以告诉cors-wherees不在尝试将响应解析为json而是将其原样发送回去的方式？

谢谢

Answer 1

sideshowbarker是正确的。这在任何地方都不是问题。当我的请求实际上是一个html页面时，这是我的请求，试图将响应解析为json。意识到这一点，我做了一些挖掘工作以弄清楚如何进行重定向。这两个链接结合起来解决了我的问题：

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

How to redirect to an external URL in Angular2?

感谢sideshowbarker重新调整了我的注意力。

cors-anywhere尝试将html解析为json

1 个答案: