CORS issue, just need verification

Questions Mezzio
1

Hey all.

I have an Angular frontend connecting to a Mezzio API and am having an issue getting my heartbeat endpoint connection working. This is a new backend, and all I’m looking for here is confirmation that my mezzio-cors middleware is setup correctly.

The FE on localhost:4200 and the API is localhost:8080. I’ve tried both localhost and 127 address but the same (Node doesn’t always like localhost).

In my config/autoload/development.local.php I have:

        'mezzio-cors' => [
            'paths' => [
                '/' => ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
                '/api/ping' => ['GET', 'OPTIONS']
            ],
            'allowed_origins' => ['http://localhost:4200'],
            'allowed_headers' => ['Content-Type'],
            'allowed_methods' => ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
            'max_age' => 86400,
        ],

Then in my config/pipeline.php I have:

        $cors = $container->get(CorsInterface::class);
        $configurationLocator = $container->get(ConfigurationLocatorInterface::class);
        $responseFactory = $container->get(ResponseFactory::class);
        $corsMiddleware = new CorsMiddleware($cors, $configurationLocator, $responseFactory);
        $app->pipe($corsMiddleware);

I have this after the inclusion of the ErrorHandler middleware, but before anything else.

Now when I access the /api/ping endpoint with RESTer or a cURL command line request, I correctly get:

{
status: "online",
time: 1715713902
}

…but when I hit it with my FE app I get net::ERR_FAILED 403 (The origin “http://localhost:4200” is not authorized)

Do you see any obvious issues here?

Thanks for any help.

3

Welcome to the forum :slight_smile:

Couple things here just from looking over the docs. Bare in mind I’m just working from the docs (and the github repo) as I do not currently have the CorsMiddleware installed.

If you are not using the laminas component installer you will need to manually add the ConfigProvider as noted here: (you will have to expand that section since its collapsed by default)

It appears that you do not need all of this.

After verifying that the ConfigProvider has been correctly added to the /config/config.php

Open /config/pipeline.php
add a use statement:
use Mezzio\Cors\CorsMiddleware;

Somewhere prior to RouteMiddleware being piped add this line:
$app->pipe(CorsMiddleware::class);

In your /autoload/development.local.php file target the correct key:

ConfigurationInterface::CONFIGURATION_IDENTIFIER

If you look here:

Your config is under ‘mezzio-cors’ so I’m not sure if its reading that config at all.

Also, I might mention that it appears you are mixing the two types of configuration under the same key. The package expects a top level key (according to the docs that I mentioned earlier) then within the route definition itself its expecting an additional key: from the docs:

Note this is a single routes definition:

          [
            'name' => 'foo-get',
            'path' => '/foo',
            'middleware' => [
                // ...
            ],
            'options' => [
                'defaults' => [
                    RouteConfigurationInterface::PARAMETER_IDENTIFIER => [
                        'explicit' => true,
                        'allowed_origins' => ['*//someotherdomain.com'],
                        'allowed_headers' => ['X-Specific-Header-For-Foo-Endpoint'],
                        'allowed_max_age' => '3600',
                    ],
                ],
            ],
            'allowed_methods' => ['GET'],
        ],

If none of that helps then I will install the component and track it down.

4

Thank you for this. As soon as I get a minute to myself :wink: I’ll test it out.

Thanks again

1 Like