Search code examples
axioscorsnuxt.js

Trying to access API but keep getting CORS errors. Client says the API is public. Who is right?


I am amending a website for a client and they are using a new API for their news. The news API comes from a separate domain so when I try to access I get CORS policy errors. I have said that I think they need to add the CORS Access Control header to the resource so the site can access it, but they said they don't need to do that because the API is public.

The website is built in Nuxt 2 and I am using fetch and axios to make the call to the API.

I tried different methods of access but kept running into the same issues.

Is there another way I can access this API or do I just need to go back to the client and say that they need to change the API?

Thanks


Solution

  • Trying to access API but keep getting CORS errors. Client says the API is public. Who is right?

    Both. Because the two of you are asking and answering different questions. The API is indeed public. It's simply not configured to allow cross-origin requests. Keep in mind that it's possible the "client" in this case doesn't even understand what CORS is.

    Is there another way I can access this API

    Yes. The same origin policy is specific to code running in browsers. It doesn't apply to server-side code in your web application.

    You can certainly request that an external service allows cross-origin requests. But they're under no obligation to grant that request and change their policies. If that's the case then it simply means that you can't make cross-origin AJAX requests to their API.

    What you can do instead is proxy those requests through your own server. So essentially you'd make AJAX requests to API endpoints on your own server that you control, and the server-side code in those endpoints would make HTTP requests to the external service.