javascriptauthenticationaxioscorspreflight

Trouble interpereting a 401 + CORS on a preflight request

I am integrating a new API from a third party vendor. I'm running the API from within a VM on my host laptop. When making a POST request via postman, I have 0 issues, and I get a response back. However, within the browser (chrome or firefox), the browser makes an OPTIONS request, which is rejected with a 401, and then the real request is rejected as a CORS error.

Access to XMLHttpRequest at 'https://192.168.1.92/area' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

The api requires authentication by setting a key header, which I do with axios:

        axios
          .post(`${BASE_URL}/area`, body, {
            headers: {
              key: "1-e6c459512a6118bba516cb8ee6831f81ba55b96e",
            },
          })
          .then((res) => {
            return res.data;
          })
          .catch(() => {
            // handle error
          });

I send the request, but the discussion in Ajax CORS Request with http 401 in preflight suggests that custom headers are not sent in the preflight request. Because of this, the preflight is rejected with a 401, and then the real request is rejected as a CORS issue.

As you see, the preflight does not contain the key header:

enter image description here

And the actual request does contain the header, but is rejected as a CORS issue because the preflight was rejected:

enter image description here

Is there something I'm doing wrong here? Am I correctly intepereting what is happening here? Seems like CORS is a misnomer in this case. The issue may be that the API server is not set up to accept preflight requests and rejects them outright because they have no key header. I'd like to make sure there's nothing I can do to fix this before I ask the API vendor to look into this / make a change.

Solution

  • However, within the browser (chrome or firefox), the browser makes an OPTIONS request, which is rejected with a 401, and then the real request is rejected as a CORS error.

    Yes. The server has not implemented the CORS features required to grant permission to access the API from cross-origin browser-side JavaScript.

    And the actual request does contain the header

    … well, it would if it was sent. The network view shows provisional details of the request, but it has been blocked because you don't have permission via CORS.

    The issue may be that the API server is not set up to accept preflight requests and rejects them outright because they have no key header. I'd like to make sure there's nothing I can do to fix this before I ask the API vendor to look into this / make a change.

    Since the API expects a key, it is likely that the key is supposed to be a secret. In that case it wouldn't make sense to support CORS on the service because it is intended to be accessed by the key owner and not (directly) by every visitor to the key owners site. (i.e. you are expected to write server-side code which accesses the API in whatever limited ways are needed to support the functionality you provide to your visitors).