react to Laravel -- Cors Middleware NOT working - php

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: *