I'm working on a Svelte app and trying to call a public API to get some data to display. However, I'm running into CORS (Cross-Origin Resource Sharing) errors that are preventing the request from completing successfully. Here's a bit of context:
In my Svelte file, I set up a POST request to the API endpoint 'https://api.example.com/search'. I also included some example JSON data to send with the request, plus error handling to capture any issues during the fetch. When I make the call, the browser logs the following CORS-related errors:
1. "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource... (Reason: header 'access-control-allow-methods' is not allowed according to header 'Access-Control-Allow-Headers' from CORS preflight response)."
2. "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource... (Reason: CORS request did not succeed)."
Interestingly, the API works perfectly fine when tested in Postman, so I'm unsure what could be going wrong in this instance. I confirmed that the URL is using HTTPS. If anyone has tips on how to resolve these CORS errors, I would greatly appreciate it!
4 Answers
Another thing to consider is that the API might permit requests without certain headers. If you remove the 'Content-Type' header and it works, that suggests the backend expects a simpler request structure. If possible, try to check the API documentation or reach out to support for guidelines on what headers are essential.
You're correct; CORS is a browser security feature which is why you can make the requests in Postman without issues. You have a couple of options: 1) Speak to the API developers to update their headers, which is the ideal solution if they're open to it. 2) Use a proxy server. This way, your app directly communicates with a server you control, and this server makes the API call, thus bypassing CORS entirely.
Using a CORS proxy is a solid workaround! I recommend trying out the 'cors-anywhere' npm package, which lets you create a simple node server to forward requests. That said, remember it’s best for development or personal use, as it might not be suitable for production environments.
CORS issues are usually controlled on the server side. If you're getting those errors, it means the backend isn't set up to handle requests from your frontend. You'll typically need to add your site's URL as an allowed origin in the server's CORS configuration. Unfortunately, since this is a public API, you likely don’t have access to change that directly. You might want to reach out to the API providers if possible.
Related Questions
Set Wordpress Featured Image Using Javascript
How To Fix PHP Random Being The Same
Why no WebP Support with Wordpress
Replace Wordpress Cron With Linux Cron
Customize Yoast Canonical URL Programmatically
[Centos] Delete All Files And Folders That Contain a String