<Link prefetch> will cause unexpected errors.

[raycent]

\<Link prefetch> will cause unexpected errors on Heroku. I have to switch all of them back to \<a href>. Is there a way to fix it?

[mars]

Hi @raycent , the issue you've encountered is not clear to me.

Would you post some example code & logs/errors to help me understand or reproduce your issue?

[raycent]

@mars I have a page that makes an API call in "getInitialProps" based on the parameter from the URL.

static async getInitialProps ({query}) {
  const {p, search} = query
  const page = Number(p || 1)
  const offset = 15 * (page - 1)

  const res = await fetch(`http://api.soundcloud.com/tracks?q=${search}&offset=${offset}&&limit=15&client_id=${CLIENT_ID}`)
  const tracks = await res.json()

  return { page, search, tracks }
}

I have a botton at the bottom to get the next page.

<Link prefetch href={nextPage}>
  <FlatButton label="Next" primary={true} hoverColor={'none'} />
</Link>

It works fine when I run npm run dev, but on Heroku when I click next, it shows "An unexpected error has occurred." The page will load again when I refresh the page. Heroku logs didn't show any errors at all.

[raycent]

I just found out the issue. In console, it shows "Uncaught DOMException: Blocked a frame with origin "https://testing-0417.herokuapp.com" from accessing a cross-origin frame."

[mars]

That makes a lot more sense. Thanks for the details.

I'm guessing that the cross-origin (CORS) error is because the fetch to SoundCloud violates their cross-origin policy.

Maybe a fix is to switch the fetch URL to HTTPS https://api.soundcloud.com. Otherwise, consult the SoundCloud API docs for how to use their service via cross-origin JavaScript.

[raycent]

Thank you! It works now after I changed the URL to HTTPS, but somehow the "Uncaught DOMException" is still there in the console.