i have created a chatbot has form , and the form will send the payload to backend php server , the api will create conversation , the chatbot is fully working in some devices, and it is giving cors error some devices.
headers i am sending from frontend –

    const response = await fetch("https://example.com/api/create-conversation", {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(data)
    });
    const result = await response.json();

the backend php code :

header("Access-Control-Allow-Headers: *");
        header("Access-Control-Allow-Origin: *");
        header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
        header("HTTP/1.1 200 OK");
        header("Content-type:application/json");
        header('Content-Type: text/plain');

Why is the API working on some devices but not on others? I am using var client = new XMLHttpRequest(); to load the page, and the UI automatically updates. The targeted frontend has an embed code which is opened with client.open(“GET”, “https://example.com/embed-code”);. I have targeted the UI of the embed code with DOM manipulation and handle the UI inside the client.onload scope, while the functions responsible for API handling are outside this scope.

Given this setup, why does the API work on some devices but not on others? The console shows an error: “(Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 404.” I have added the header: header(“Access-Control-Allow-Origin: *”);.

The API is not working consistently across all devices; some devices return a CORS error. I want the API to work on every device. What could be the issue?