"CORS fail" when using self-signed certificate with HTTPS

Question

I have two devices. A and B. Both of them have HTML pages and rest APIs and the connections are protected by HTTPS with a self-signed certificates so the browser will show a potential risk warning when the user first time access these pages.

Device A provides management functions of device B such as monitoring the temperature, so the scripts in A side pages always interchange jsons with the rest APIs of device B to add, delete, revise or query values or properties.

Of course there are CORS issues, therefore I put some CORS-related headers into the header of device B side responses.

#cors                                                                           

$HTTP["request-method"] =~ "^OPTIONS$" {
        url.rewrite = ( "^.*$" => "/index.html")
}

$HTTP["request-method"] =~ "^(OPTIONS)$" {
    setenv.add-response-header = (
        "Access-Control-Allow-Origin" => "*",
        "Access-Control-Allow-Headers" => "*",
        "Access-Control-Allow-Methods" => "*"
    )
}

$HTTP["request-method"] =~ "^(GET|POST|PATCH|DELETE)$" {
    setenv.add-response-header = (
        "Access-Control-Allow-Origin" => "*"
    )
}

The system works well if I press the "Accept the risk and continue" button of device A and B explicitly before accessing the system. However device A side scripts report "CORS fail" if I don't press the "Accept the risk and continue" button of device B before using the system or just remove the security exception of device B explicitly.

Can anyone provide me some solutions to work around the problem?