Embed Visualizations with authentication: CORS and preflight

Hi all,
I read numerous post on authenticating in iframe-embedded Kibana dashboard but I did not found the solution of my problem.

I'm using ES and Kibana 7.2.0.
I set server.cors: true in config/kibana.yml.

On the HTML page embedding the iframe, I set the JS:

fetch("https://local._a_site_.com:5601/api/security/v1/login", {
      body: {
        username: "username",
        password: "password",
      },
      credentials: 'include',
      headers: {
        "kbn-version": "7.2.0",
        "kbn-xsrf": "7.2.0",
        'Content-Type': 'application/json'
      },
      method: "POST",
    }).then(function () {
       document.getElementById("place_iframe").innerHTML =
        `my iframe`;
    })
    .catch(function (err) {
      console.log(err);
    });

When the browser loads that page, the OPTIONS preflight request returns a HTTP Status 200 but does not perform the POST :frowning:

Another indication. If I perform
curl -XPOST -H "Content-Type: application/json" -H "kbn-xsrf: hello" https://local._a_site_.com:5601/api/security/v1/login --data '{"username":"username","password":"password"}' -D -
I get the set-cookie header in the response.

What's my wrong point? Any help?
Thanks in advance

When you say it doesn't perform the POST, what do you mean? Is the .catch firing? What's the error / status code?

When you say it doesn't perform the POST, what do you mean? Is the .catch firing? What's the error / status code?

No POST request is sent to server after this OPTIONS response:

HTTP/1.1 200 OK
content-type: application/json; charset=utf-8
cache-control: no-cache
content-length: 54
Date: Wed, 07 Aug 2019 08:19:16 GMT
Connection: keep-alive

Should it include an access-control-allow-origin: * ?

On Firefox, .catch() gives TypeError: "NetworkError when attempting to fetch resource."
The full console output is:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://local._a_site_.com:5601/api/security/v1/login. Preformatted text(Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
Error: TypeError: "NetworkError when attempting to fetch resource."
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://local._a_site_.com:5601/api/security/v1/login. (Reason: CORS request did not succeed)

Ok Chrome, the console output is:

Access to fetch at 'https://local._a_site_.com:5601/api/security/v1/login' from origin 
'http://localhost' has been blocked by CORS policy: Response to preflight request doesn't pass 
access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
 If an opaque  response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

If I add mode: 'no-cors' to the fetch(), the OPTIONS is not performed and I get this response on POST https://local._ a_site _.com:5601/api/security/v1/login

HTTP/1.1 400 Bad Request
kbn-name: kibana
kbn-xpack-sig: 08589ac9c....
content-type: application/json; charset=utf-8
vary: origin
access-control-allow-origin: http://localhost
access-control-expose-headers: WWW-Authenticate,Server-Authorization
cache-control: no-cache
content-length: 92
connection: close
Date: Wed, 07 Aug 2019 08:35:53 GMT

And it is corrected: the access-control-allow-origin is limited to the origin on localhost.

Again, I added server.cors.origin: ['*'] in kibana.yml but it doesn't solve.

The solution in Login API CORS issue with localhost is not fine for Kibana 7.2.0. Probably now the file to modify could be /usr/share/kibana/src/core/server/http/http_config.js ...

@christophilus, any idea?