best way to tackle: Response to preflight request doesn't pass access control check: It does not have HTTP ok status

Question

ah yes, yet another preflight error. I've been trying to get rid of this for a while now.

So im building a rust-react project and while making a post or even get request for that matter, im facing this same error.

Access to XMLHttpRequest at 'http://127.0.0.1:8000/users/create' 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 host is http://127.0.0.1:8000 and the react origin is http://localhost:3000 . I've enabled CORS in rust, with the requied headers but to no avail. Every request in my application, needs to be accompanied with a global key in the headers to access or post any sort of data. Simply put, any interaction with the server requires this key.

here's my rust code,

pub struct CORS;

#[rocket::async_trait]
impl Fairing for CORS {
    fn info(&self) -> Info {
        Info {
            name: "Add CORS headers to responses",
            kind: Kind::Response
        }
    }

    async fn on_response<'r>(&self, _request: &'r Request<'_>, response: &mut Response<'r>) {
        response.set_header(Header::new("Access-Control-Allow-Origin", "http://localhost:3000"));
        response.set_header(Header::new("Access-Control-Allow-Methods", "POST, GET, PATCH, OPTIONS"));
        response.set_header(Header::new("Access-Control-Allow-Headers", "Content-Type, Global-Api-Key"));
        response.set_header(Header::new("Access-Control-Allow-Credentials", "true"));
        response.set_header(Header::new("Access-Control-Max-Age", "86400"));
    }
}

And heres the axios instance

const authSend = axios.create({
    method: 'post',
    baseURL: 'http://127.0.0.1:8000',
    data: {},
    headers: {
        'Global-Api-Key': key,
        Accept: 'application/json',
    }
})

What i could find by scratching the internet so far is, before any request, your browser send an OPTIONS request to verify the headers before making data available for remote access. So in order to handle this, i simply need to send an HTTP ok response from the server whenever the method is OPTIONS . But wouldnt that defeat the whole purpose of the request in the first place? I know the other solutions on the internet like using a proxy or simply turning off CORS isn't good practice which is why i haven't tried them yet.

I need to know if sending such response is the most reliable way to tackle this error or if theres something more to it.

Answer 1

So turns out that was the only way to make things work. Despite looking for more answers, I sent an 200 OK response and things are good. another issue i was facing was, the axios.create() function used to create custom axios instance wasnt passing the required headers properly whereas when you simply call the axios function like

axios({method: 'post', 
      url: 'your url', 
      your data, 
      headers: { 'Global-Api-Key': key,}
})

It did the job. I dont know how or what the issue is with custom instances and passing headers. this is the page i referred and they stated the same problem with the above solution.