0

I had a cors issue that I posted last week. You can read about it here:

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

I read sideshowbarker’s in-depth explanation of how to avoid cors issues here:

No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API

One of the suggestions he makes in this posts is to use a proxy server:

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?"))

Essentially, the idea is to send your request through cors-anywhere.herokuapp.com, which will attach the cors headers on the response as it comes back.

This worked like a charm as I am no longer getting cors errors.

However, I am now getting this error:

SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse…

And the error text I’m getting is:

<!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>

So it seems like cors-anywhere is trying to parse the above html as json but obviously can’t. I believe the html is the sign in page I’m expecting back from anilist (but it’s hard to tell unless I can view it in a browser which I’m not able to).

So my question is: is there a way to tell cors-anywhere not to try to parse the response as json but to simply send it back as-is?

Thanks

Gibran Shah
  • 333
  • 1
  • 2
  • 9
  • cors-anywhere isn’t trying to parse the response. Instead your browser is trying to parse the response. That `SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse` message is coming from your browser. That said, I wouldn’t expect the frontend code shown in the question to cause that error message to be generated. So either the error is coming from a different part of your code, or the code in the question doesn’t match your actual frontend code. – sideshowbarker Apr 08 '19 at 18:22
  • Thanks for the response sideshowbarker. My actual code is `this.http.get(proxy+url,options).subscribe(result=>{})`. What you said makes sense. It's probably trying to parse the result in the subscription as an object. Would this be an example of a redirect? I remember reading that AJAX shouldn't be used for redirects. Is http.get(...) AJAX under the hood? – Gibran Shah Apr 09 '19 at 15:01

1 Answers1

0

sideshowbarker was right. This wasn't a problem with cors-anywhere. It was my request trying to parse the response as json when it was actually an html page. Realizing this, I did some digging to figure out how to do a redirect instead. These two links in combination solved my problem:

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

How to redirect to an external URL in Angular2?

Thanks to sideshowbarker for refocusing my attention.

Gibran Shah
  • 333
  • 1
  • 2
  • 9