对 Laravel 做出反应 — Cors 中间件不工作

Question

tried lots of things as in other solutions

in route.php

header('Access-Control-Allow-Origin: http://www.campaignpulse.com/');

or

header('Access-Control-Allow-Origin: www.campaignpulse.com/');

or

header('Access-Control-Allow-Origin:  *');
header('Access-Control-Allow-Methods:  POST, GET, OPTIONS, PUT, DELETE');
header('Access-Control-Allow-Headers:  Content-Type, X-Auth-Token, Origin, Authorization');

Route::post('cors', ['middleware' => 'cors',function () { return response()->json(['message' =>'cors'], 200); }  ]);

cors.php

public function handle($request, Closure $next)
    {
      return $next($request)
        ->header('Access-Control-Allow-Origin', 'http://www.campaignpulse.com/')
         or
        ->header('Access-Control-Allow-Origin', 'www.campaignpulse.com/')
         or
        ->header('Access-Control-Allow-Origin', '*')
        ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
        ->header('Access-Control-Allow-Headers:  Content-Type, X-Auth-Token, Origin, Authorization');
    }

kernal.php

  protected $middleware = [
            \App\Http\Middleware\CheckForMaintenanceMode::class,
            \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
            \App\Http\Middleware\TrimStrings::class,
            \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
            \App\Http\Middleware\TrustProxies::class,
            \App\Http\Middleware\Cors::class,
        ];


protected $routeMiddleware = [
        'auth' => \App\Http\Middleware\Authenticate::class,
        'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
        'bindings' => \Illuminate\Routing\Middleware\SubstituteBindings::class,
        'cache.headers' => \Illuminate\Http\Middleware\SetCacheHeaders::class,
        'can' => \Illuminate\Auth\Middleware\Authorize::class,
        'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
        'signed' => \Illuminate\Routing\Middleware\ValidateSignature::class,
        'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
        'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class,
        'cors' => \App\Http\Middleware\Cors::class,
    ];

react part

      return fetch('http://www.campaignserver.com:81/cors', 
    {
        method: 'post',
        credentials: "same-origin",
        headers: {    
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            'Access-Control-Allow-Origin': 'www.campaignpulse.com' },

    }
    ).then(response => response.json())
    .then(resData => {          

        console.log(resData)
    })

and the error is

Access to fetch at ' http://www.campaignserver.com:81/cors ' from origin ' http://www.campaignpulse.com ' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

what else can i try? please suggest

Answer 1

Cross origin requests made by a browser will send a pre-flight OPTIONS request to your server, which has to return at least the Access-Control-Allow-Origin header. It is not sufficient to just return it with the response to a POST route.

I recommend to use a package like https://github.com/barryvdh/laravel-cors to provide the CORS middleware and configuration

Also notice that the origin is a host name or a wildcard.

Valid values for the ACAO header are for example

• *
• https://www.example.org

No URI parts

edit

have to correct myself, apparently protocol and port are valid parts of the ACAO header, which makes sense

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

edit2

To debug this, make sure that both OPTIONS http://www.campaignserver.com:81/cors and POST http://www.campaignserver.com:81/cors

Return a header Access-Control-Allow-Origin: http://www.campaignserver.com:81 or Access-Control-Allow-Origin: *