Cors errors while testing API calls

So I’m trying to experiment with some web service APIs (from a public service), and I was hoping to use JavaScript from a local file running in caddy.

When I check my console for the test output I get the following message “Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).”

That’s fine.

  • I pop over to the caddy server site, look up CORS, find the plugin, download 0.11.0 with the plugin. Put the file in the same folder as before, thus back in my path.
  • Restart the server … and still get a CORS error.
  • Check into the docs and update my caddyfile.
  • Restart … still errors in the console.

I’m sure I’m missing something simple, but I’m just not seeing it.

Here is my caddyfile

localhost:2020 {
  log access.log 
  browse /js/userscripts

Haven’t mucked about with CORS much, but doesn’t need to add that header to allow you to access their resources from your own domain?

What @Whitestrake says is correct; the endpoint needs to allow access to the resource it’s providing.

Since I’m guessing you don’t control that endpoint and can’t change the headers, you can easily work around this by making your own API on your own domain (in this case localhost:2020, because the scheme, hostname and the port name must match for the same origin policy to apply) that calls the endpoint you’re interested in and just passes you back the response.

How you do that is of course up to you though.

Edit: The accepted answer here goes over CORS and SOP in an easy to understand way, so it might be worth a read:

1 Like

Thank you @Whitestrake, that was definitely something I was missing.

@Lucas Thank you! That really clarifies the issue.

I am picking up programming so I’m coming up to speed on how these things work. I very much appreciate all your insights. Thank you both!

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.