CORS error when using HttpRequest.getString(url)

Question

The whole application is built with Angular 2 for Dart.

At one place I have a service with a really naive HttpRequest.getString() call with no special parameters or anything.

String response =  await HttpRequest.getString(url);

On the server side there is a Wordpress installation with WP-API running.

It seems, that Dart is creating a new response header for the currently loaded hostname somehow, because I get this error:

XMLHttpRequest cannot load http://my-wordpress/wp-json/wp/v2/pages.

The 'Access-Control-Allow-Origin' header contains multiple values 'http://localhost:8080, *', but only one is allowed. Origin 'http://localhost:8080' is therefore not allowed access.

---

I don't get the same result with Postman, though:

---

From what I could read out of the source code, Dart itself concatenates duplicate headers into just one, but I couldn't find any information on that extra CORS header.

Answer 1

I could fix it by commenting out Wordpress specific REST-API code. In the folder wp-includes there is a file called rest-api.php.

On line 376 upwards you see something like this:

header( 'Access-Control-Allow-Origin: ' . esc_url_raw( $origin ) );
header( 'Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE' );
header( 'Access-Control-Allow-Credentials: true' );

This seems to allow the host of the request to access the API. But since I'm already adding * as Origin, this will fail. So I just commented that code block out and everything works fine now.