CORS errors all of a sudden

Support
,
1

All of a sudden I’m getting CORS errors:

“Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://damp-island-15072.herokuapp.com/tag/. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 503.”

The fetching code looks like so:

const BASE_URL = 'https://damp-island-15072.herokuapp.com';
class A2Api {
  static token;
  static async request(endpoint, data = {}, method = "get") {
    const url = `${BASE_URL}/${endpoint}`;
    const headers = {
      Authorization: `Bearer ${A2Api.token}`,
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods':'GET,PUT,POST,DELETE,PATCH,OPTIONS',
    };
    const params = (method === "get")
        ? data
        : {};
    try {
      return (await axios({ url, method, data, params, headers })).data;
    } catch (err) {
      console.error("API Error:", err.response);
      let message = err.response.data.error.message;
      throw Array.isArray(message) ? message : [message];
    }
  }

and has not change before or after this started happening.

It started right after I added some things to the css style sheet. I can’t imagine that this is the cause. This has happened before and then stopped suddenly. I didn’t think much of it at the time but now that it’s going on again I just want to know what’s happening. Is this on my end?

2

I didn’t do anything.

…and now it’s working again…

Shrug
Shrug960×637 59.9 KB

3

Hey @JohnTarvis ! I see how that would be frustrating. There’s no way to really tell why this situation happened because the requested endpoint https://damp-island-15072.herokuapp.com isn’t a Netlify origin.

That said, there are two things that might help.

  1. Access-Control-Allow-Origin is a response header so setting it in the request (like in the example) has no effect on CORS. It’s the server that has to return the right headers. The server has to decide if it allows this requesting origin https://anonsanonymous.netlify.app to access the endpoint.
  2. It’s common for servers to fail to put Access-Control-Allow-Origin and Access-Control-Allow-Methods response headers on error responses. Usually, the “happy path” has CORS headers but error conditions like 503 errors where the server is having issues might exclude them. In this case, if you are the owner of that heroku server, I would suggest investigating if all responses including error responses have CORS headers.

I hope that helps!
-Sean Roberts

2 Likes