Error: Access to XMLHttpRequest

1

I got this message when I try to go another page.

Access to XMLHttpRequest at ‘https://www.google.com/’ (redirected from ‘https://motp.kiwipay.la/api/public/pay_kiwi_qrcode’) from origin ‘null’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

2

I have the same problem consuming my API from angularjs. My code looks like this:

// CORS preflight middleware

$app->add(function (Request $request, Response $response, $next) {
if ($request->getMethod() !== 'OPTIONS') {
    return $next($request, $response);
}
$response = $next($request, $response);
$response = $response->withHeader('Access-Control-Allow-Origin', '*');
$response = $response->withHeader('Access-Control-Allow-Methods', $request->getHeaderLine('Access-Control-Request-Method'));
$response = $response->withHeader('Access-Control-Allow-Headers', $request->getHeaderLine('Access-Control-Request-Headers'));
return $response;
});

$app->add(function ($req, $res, $next) {
    $response = $next($req, $res);
    return $response
            ->withHeader('Access-Control-Allow-Origin', '*')
            ->withHeader('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type, Accept, Origin, Authorization')
            ->withHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH, OPTIONS');
});

I also tried the tuupola CORS extension or the example from DOCS.

This is the given error:

Access to XMLHttpRequest at 'https://api.xxxxxxxx.com/login' 
from origin 'https://othersite.xxxxxxxxxxxx.com' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

Reading for several hours but couldn’t find a solution ! Maybe anyone else has an idea?

Thanks…

3

You have 2 different CORS preflight middlewares, but you should only have one.
Please remove one of them (the last), then try it again.

4

changed it to the one below:

$app->add(function (Request $request, Response $response, $next) {
    // Handle only OPTIONS requests
    if ($request->getMethod() !== 'OPTIONS') {
        return $next($request, $response);
    }

    $response = $next($request, $response);
    $response = $response->withHeader('Access-Control-Allow-Origin', '*');
    $response = $response->withHeader('Access-Control-Allow-Methods', $request->getHeaderLine('Access-Control-Request-Method'));
    $response = $response->withHeader('Access-Control-Allow-Headers', $request->getHeaderLine('Access-Control-Request-Headers'));

    return $response;
});

–> no change ! error remains the same =(

5

Okay this is not so easy without more context or code.
Here are some general tips that you can also try out:

  • Make sure that no other middleware blocks/removes the CORS header (e.g. a ACL that blocks the preflight check).
  • Also check the order of the middleware stack. In Slim 3 the order is LIFO (Last In, First Out) and not FIFO (First In, First Out).
  • The server needs to respond with a 200 OK response and appropriate Access-Control-Allow-... origin headers.
$response = $response->withStatus(200, 'OK');
  • Also make sure that no PHP Errors/Exceptions are thrown, because the Slim Error Handler could remove the CORS headers from the response.
6

PS: What happens if you uncomment this line in the CORS preflight middleware?

// $response = $next($request, $response);

Full example:

$app->add(function (Request $request, Response $response, $next) {
    if ($request->getMethod() !== 'OPTIONS') {
        return $next($request, $response);
    }

    $response = $response->withHeader('Access-Control-Allow-Origin', '*');
    $response = $response->withHeader('Access-Control-Allow-Methods', $request->getHeaderLine('Access-Control-Request-Method'));
    $response = $response->withHeader('Access-Control-Allow-Headers', $request->getHeaderLine('Access-Control-Request-Headers'));

    return $response->withStatus(200, 'OK');
});