How can I implement Cross-origin resource sharing (CORS) ?

[azonedev]

I have been building APIs with framework-x & want to bind those API's on my frontend vue.js application but got an error CORS error.
How can I fix the problem?

Note: I already tried to bypass with Nginx but failed. I checked this PHP package but I can't understand where I have to implement that.

[sakhawat-sifat]

looking for a solution...

[sagorahmeed]

I am also facing the same problem 🙁

[SimonFrings]

Hey @azonedev, thanks for bringing this up 👍

As a starting point you can look into #140 and #99, maybe you'll find a quick answer in there as they address the same topic.

As @clue said in #99:

CORS headers are supported just like any other response headers.

$app->get('/user', function () {
    return new React\Http\Message\Response(
        200,
        [
            'Content-Type' => 'text/plain; charset=utf-8',
            'Access-Control-Allow-Origin' => '*'
        ],
        "Hello wörld"
    );
});

I can see this manual approach being handled by Framework X in the future, but this involves some adjustments. There are currently no immediate plans to build this from our end, but we would be really happy to accept PRs 👍

You can also add this topic to our recently opened wish list for Framework X where you can add your own ideas to improve the project. This way we can see if others have the same demand for a feature like this.

We're also working out some additional support options right now, especially to help with commercial projects built with Framework X. There will be more information about this inside our community section soon: https://framework-x.org/docs/getting-started/community/

[bnowack]

Just for those wondering where to start, maybe this helps:

I also needed CORS for a Capacitor app (the default Origin header contains localhost when built for iOS/Android) talking to the app's HTTP backend.

I followed the global middleware approach:

use Application\CorsMiddleware;

$myAllowedOriginsPattern = '/\/\/(localhost|192\.168)/';
$app = new FrameworkX\App(new CorsMiddleware($myAllowedOriginsPattern));
...
$app->run();

The actual CORS flow is not too complicated but does have some corner cases. Here is a working sample implementation that echoes the incoming headers as allowed headers (avoiding wildcard headers which can cause issues with secure requests). Please note the Application namespace which you will have to adjust to your namespace context.

<?php

declare(strict_types=1);

namespace Application;

use Psr\Http\Message\ResponseInterface;
use Psr\Http\Message\ServerRequestInterface;
use React\Http\Message\Response;

class CorsMiddleware
{
  public function __construct(
    private string $allowedOriginPattern = '/./',
    private bool $allowCredentials = true
  ) {
  }

  public function __invoke(ServerRequestInterface $request, callable $next)
  {
    if ($this->isAllowedPreflightRequest($request)) {
      return $this->buildCorsResponse($request);
    }

    $response = $next($request);
    assert($response instanceof ResponseInterface);

    if ($this->isCorsRequest($request)) {
      return $this->buildCorsResponse($request, $response);
    }

    return $response;
  }

  public function isCorsRequest(ServerRequestInterface $request): bool
  {
    return $request->hasHeader('Origin');
  }

  private function isAllowedPreflightRequest(ServerRequestInterface $request)
  {
    return $this->hasAllowedOrigin($request) && $this->isPreflightRequest($request);
  }

  private function hasAllowedOrigin(ServerRequestInterface $request)
  {
    if (!$request->hasHeader('Origin')) {
      return false;
    }

    return preg_match($this->allowedOriginPattern, $request->getHeaderLine('Origin')) !== false;
  }

  private function isPreflightRequest(ServerRequestInterface $request)
  {
    return $request->getMethod() === 'OPTIONS' && $request->hasHeader('Access-Control-Request-Method');
  }

  private function buildCorsResponse(ServerRequestInterface $request, Response $response = null)
  {
    $response = ($response ?? new Response())
      ->withHeader('Access-Control-Allow-Origin', $request->getHeaderLine('Origin'));

    if ($request->getHeaderLine('Access-Control-Request-Headers')) {
      $response = $response->withHeader(
        'Access-Control-Allow-Headers',
        $request->getHeaderLine('Access-Control-Request-Headers')
      );
    }

    if ($request->getHeaderLine('Access-Control-Request-Method')) {
      $response = $response->withHeader(
        'Access-Control-Allow-Methods',
        $request->getHeaderLine('Access-Control-Request-Method')
      );
    }

    if ($this->allowCredentials) {
      $response = $response->withHeader('Access-Control-Allow-Credentials', 'true');
    }

    return $response;
  }
}