Lumen: Włącz CORS

Question

Zbudowałem API z Lumen i chcę uzyskać do niego dostęp za pomocą JavaScript i obiektu XMLHttpRequest. Ale za każdym razem moje żądania PUT, GET, POST i DELETE są przekształcane w OPCJE - Żądanie. Czytałem wiele stron internetowych z informacjami o CORS. Buduję middleware o następującej treści:

class CORSMiddleware 
{ 
    public function handle($request, \Closure $next) 
    { 
     $response = null; 
     /* Preflight handle */ 
     if ($request->isMethod('OPTIONS')) { 
     $response = new Response(); 
     } else { 
     $response = $next($request); 
     } 

     $response->header('Access-Control-Allow-Methods', 'OPTIONS, HEAD, GET, POST, PUT, DELETE'); 
     $response->header('Access-Control-Allow-Headers', $request->header('Access-Control-Request-Headers')); 
     $response->header('Access-Control-Allow-Origin', '*'); 
     return $response; 
    } 
} 

Mój kod klienta:

var url = "http://localhost:8000/api/user"; 
var xmlHttpRequest = new XMLHttpRequest(); 
xmlHttpRequest.open('PUT', url, false); 
xmlHttpRequest.send('{"username": "ABC", "password": "ABC","email": "mail@cool.xyz" }'); 
if (xmlHttpRequest.status == 200) { 
    console.log(xmlHttpRequest.responseText); 
} 

Moja prośba-informacja o żądaniu GET:

Host: localhost:8000 
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:43.0) Gecko/20100101 Firefox/43.0 
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 
Accept-Language: de,en-US;q=0.7,en;q=0.3 
Accept-Encoding: gzip, deflate 
Origin: null 
Connection: keep-alive 
Cache-Control: max-age=0 

Moja odpowiedź informacyjna żądania GET:

Access-Control-Allow-Methods: OPTIONS, HEAD, GET, POST, PUT, DELETE 
Access-Control-Allow-Origin: * 
Cache-Control: no-cache 
Connection: close 
Content-Type: text/html; charset=UTF-8 
Date: Sun, 27 Dec 2015 10:36:51 GMT 
Host: localhost:8000 
x-powered-by: PHP/7.0.0 

Moja prośba-informacje żądania PUT:

Host: localhost:8000 
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:43.0) Gecko/20100101 Firefox/43.0 
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 
Accept-Language: de,en-US;q=0.7,en;q=0.3 
Accept-Encoding: gzip, deflate 
Access-Control-Request-Method: PUT 
Origin: null 
Connection: keep-alive 
Cache-Control: max-age=0 

Moje informacje odpowiedź na żądanie PUT:

Cache-Control: no-cache 
Connection: close 
Content-Type: text/html; charset=UTF-8 
Date: Sun, 27 Dec 2015 10:36:51 GMT 
Host: localhost:8000 
x-powered-by: PHP/7.0.0 

W Inspekcji wstępnej nie ma "Access-Control-ce - *" - Nagłówki. Nie wiem dlaczego; Włączyłem go za pomocą mojego lumen-cors-middleware.

Answer 1

W Lumen należy ręcznie skonfigurować trasy OPTIONS dla każdej trasy POST, PUT, DELETE....

Oto, co zrobiłem, aby rozwiązać problem.

$app->options('{all:.*}', ['middleware' => 'cors.options', function() { 
    return response(''); 
}]); 

Powyższa trasa odbierze wszystkie żądane od Ciebie OPTIONS.

W cors.options middleware:

public function handle($request, Closure $next) 
{ 
    return $next($request) 
     ->header('Access-Control-Allow-Origin', $_SERVER['HTTP_ORIGIN']) 
     ->header('Access-Control-Allow-Methods', 'PUT, POST, DELETE') 
     ->header('Access-Control-Allow-Headers', 'Accept, Content-Type,X-CSRF-TOKEN') 
     ->header('Access-Control-Allow-Credentials', 'true'); 
} 

Answer 2

Dodaj następujący nagłówki do publicznego pliku/.htaccess.

Header set Access-Control-Allow-Origin "*" 
Header set Access-Control-Allow-Methods "GET,POST,PUT,DELETE,OPTIONS" 
Header set Access-Control-Allow-Credentials "true" 

Działa to dobrze, aby rozwiązać problem Cross Origin.