0

I'm currently using the Reddit API in my Nuxt app with $fetch. Works great, runs well. Except - loading it up on Safari causes the following errors when deployed to a https domain on Vercel.

https://api.reddit.com/r/funny/hot.json?raw_json=1&limit=50 (Failed to load resource: Origin https://xxxx.com is not allowed by Access-Control-Allow-Origin)

And.

https://api.reddit.com/r/funny/hot.json?raw_json=1&limit=50 failed due to access control checks.

I'm looking through CORS issues, but I'm unsure why it would work on MacOS Chrome & Safari, Android Phones and Not iOS Safari & Chrome?

JMKelley
  • 599
  • 2
  • 17
  • 36
  • `https://xxxx.com` is the address you're calling the API from, right? There are maybe some additional check of those ones. Maybe check this one: https://stackoverflow.com/q/46454208/8816585 – kissu Sep 26 '22 at 16:04
  • Yeah, it's the web address that's calling the reddit api. I'm really unsure why it's just iOS that's causing the issue. – JMKelley Sep 26 '22 at 16:07
  • Looks like it's wanting some headers in there? - Checked all requests are `https` - Checked the endpoints are working on MacOS and Android - Errors only on iOS Chrome & Safari. – JMKelley Sep 26 '22 at 16:08
  • Maybe additional more secure/proprietary checks. Don't really wonder too much with Apple, they have their own things sometimes. HTTPS is not the issue here, try to see if giving more headers as in the linked question helps or not. – kissu Sep 26 '22 at 16:09
  • @kissu Thanks. How do I add more headers for all requests with `$fetch axios` – JMKelley Sep 26 '22 at 16:10
  • Try the documentation: https://axios.nuxtjs.org/extend#new-axios-instance At the end, Nuxt's v2 axios module is just a wrapper around the vanilla one. – kissu Sep 26 '22 at 16:12
  • @kissu Could it possible be this https://axios.nuxtjs.org/options#https it might be setting the baseUrl to`http://` and not `https://` causing me to call a https api on a http domain? – JMKelley Sep 26 '22 at 16:34
  • Weird - works browsing safari on `localhost:3000` but not on the actual domain. I guess this is a https / http issue? Could it be vercel? – JMKelley Sep 26 '22 at 17:06
  • Have you tried this? https://github.com/nuxt/framework/discussions/4498 or https://github.com/nuxt/framework/issues/7366 this? – aghashamim Sep 26 '22 at 17:47
  • The above look like put requests? This is just a simple get request that works on localhost but not when deployed to vercel. – JMKelley Sep 26 '22 at 17:51
  • @kissu it turned out to be `fetchonserver : false` that was causing the issue. Why would this be? – JMKelley Sep 26 '22 at 22:41
  • Maybe because it's nuking the headers earlier than expected (hence the connection is not properly handled). I know that some browsers handle some timings differently, maybe this is the case here too. Or, it is simply a bug (could also be). Do you think that you could create a repro for the core team? – kissu Sep 26 '22 at 22:44
  • Looks like you're spot on. It works, click a nuxt link -> same error. Hit refresh -> Works again. – JMKelley Sep 26 '22 at 22:56

1 Answers1

0

I managed to fix this by creating a proxy in Nuxt Axios as follows:

axios: {
  baseUrl: '/api',
  proxy: true
},
proxy: {
  "/api/": {
    target: "https://api.reddit.com/",
    pathRewrite: { "^/api/": "" }
  }
},

To this day, I'm unsure what on earth was happening. But the proxy seems to make Safari and FireFox happy.

kissu
  • 40,416
  • 14
  • 65
  • 133
JMKelley
  • 599
  • 2
  • 17
  • 36
  • This is a workaround as [explained here](https://stackoverflow.com/a/72211930/8816585) but glad that you at least got that one working. – kissu Sep 27 '22 at 13:28
  • Yep - very much a pain. But probably good practice anyway? – JMKelley Sep 27 '22 at 14:32
  • You're "fixing" the issue by using a backend as a middleware to bypass CORS. It's like not having the key to your door and remove/putting it back every time you want to enter home. It works but it's mostly not necessary, just use the key to your place. – kissu Sep 27 '22 at 15:14
  • 1
    Yeah, I agree, work around. Though, tried everything and that seems to be the only way forward. – JMKelley Sep 27 '22 at 16:02