CORS and x-apikey are mutual exclusive?

Question

This is my angular service method:

public getAllItems() : Observable<Product[]> {
    
    const options: HttpOptions = {
      url: "http://yyyy",
      headers: {
        'x-apikey': 'xxx',
        'Content-Type': 'application/json'
      },
      webFetchExtra: { mode: 'no-cors', credentials: 'include' }
    };

    return from(CapacitorHttp.get(options).then(res => res.data as Product[]));
}

As I am running it locally and requesting external web service for API call, I've disabled cors. But whenever cors is disabled, x-apikey is not sent. If I enable cors the x-apikey is sent, however due to cors I've got an error. Are cors and x-apikey key mutually exclusive somehow?

Answer 1

Are cors and x-apikey key mutually exclusive somehow?

CORS is mandatory for it. It's no-cors that it is mutually exclusive with.

Setting a HTTP request header (with the exception of safe headers and forbidden headers) requires that the browser sends a preflight OPTIONS request to the server asking for permission and that the server responds with suitable Access-Control headers to grant that permission.

Setting no-cors mode tells the browser to not ask for permission and, instead, silently drop anything that would require it (this also includes credentials).