如何使CORS HTTP请求到Angular App

Question

I have an Angular 5 front end app with a PHP API on separate domains. Most of the time the front end app is requesting data from the API. To enable this, I had to add a CORS Middleware class to the PHP (Laravel) project:

namespace App\Http\Middleware;

use Closure;

class Cors
{
    public function handle($request, Closure $next)
    {
        return $next($request)
            ->header('Access-Control-Allow-Origin', '*')
            ->header('Access-Control-Allow-Headers', 'Authorization, Origin, X-Requested-With, Content-Type, Accept')
            ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH, DELETE, OPTIONS');
    }
}

In a few cases, however, I've needed to generate some HTML through PHP, and I want to request some assets (such as images and fonts) from the Angular app. But when I try this, I get a CORS error. Can you tell me how I can enable CORS requests TO my Angular 5 app?

Answer 1

You can't make a CORS request to the client. The client makes the request. The server makes the response.

If you are getting a CORS related error when a static file is requested, then you need to configure your server to put the appropriate headers in the response.

Since the response isn't handled by PHP, your middleware isn't running. So you'll need to find another approach.

There is plenty of documentation out there on how to configure various servers to set HTTP headers (and plenty which is specific to CORS), so identify which HTTP server you are using and look up how to do it.