Включить CORS в Lumen API - PullRequest
Новая
       25

Включить CORS в Lumen API

0 голосов
/ 28 февраля 2020

Я знаю, что это известная проблема, но я попробовал почти все, и я все еще застрял в этом. У меня есть простой проект, структурированный так: 

                [Client]       =>     [Gateway]       =>      [API] 
                Laravel 6              Lumen 6               Lumen 6
             localhost:8000         localhost:8001       localhost:8002

Так как я только начал работать над этим проектом только для того, чтобы доказать, работает ли он, я отключил все auth вещи.

На моем API У меня есть папка в public с именем uploads (в основном в http://localhost:8002/uploads/audio.amr), где у меня есть 1 аудиофайл (.amr), и я пытаюсь Воспроизвести его из представления клиента.

Поскольку html не может воспроизводить файлы .amr, мне пришлось использовать плагин. И я использую этот BenzAMRRecorder .

[Клиентская сторона] Я делаю петицию ajax, чтобы получить URL аудиофайла. клиент через жрет соединяется с шлюзом , а шлюз также делает это с API , и я успешно получил URL http://localhost:8002/uploads/audio.amr . 

 $.ajaxSetup({
     headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
     }
});

$.ajax({
     url : 'client/get_url_audio',
     type : 'GET',
     data : {
     },
     dataType:'json',
     success : function(data) {
         /** Here's the way to play the file */
         var amr = new BenzAMRRecorder();
         amr.initWithUrl(data['url']).then(function() {
            amr.play();
         });

     },

});

Я успешно получил URL, но когда BenzAMRRecorder попытался получить доступ к URL http://localhost:8002/uploads/audio.amr, я получил эту ошибку:

Ошибка :

Доступ к XMLHttpRequest в 'http://localhost: 8002 / uploads / audio.amr ' из источника 'http://localhost: 8000 'был заблокирован политикой CORS: на запрошенном ресурсе отсутствует заголовок' Access-Control-Allow-Origin '.

Я прочитал много способов, чтобы исправить это, и я добавил CorsMiddleware в API с функцией дескриптора следующим образом: 

public function handle($request, Closure $next)
{
    $headers = [
        'Access-Control-Allow-Origin'      => '*',
        'Access-Control-Allow-Methods'     => 'POST, GET, OPTIONS, PUT, DELETE',
        'Access-Control-Allow-Credentials' => 'true',
        'Access-Control-Max-Age'           => '86400',
        'Access-Control-Allow-Headers'     => 'Content-Type, Authorization, X-Requested-With'
    ];

    if ($request->isMethod('OPTIONS'))
    {
        return response()->json('{"method":"OPTIONS"}', 200, $headers);
    }

    $response = $next($request);
    foreach($headers as $key => $value)
    {
        $response->header($key, $value);
    }

    return $response;

}

А затем в bootstrap/app.php добавлено 

$app->middleware([
      App\Http\Middleware\Cors::class
]);

Но я все еще получаю та же ошибка. Я подумал, что когда метод amr.initWithUrl(data['url']) обращается к папке API, он не go получает промежуточное ПО и пытается получить доступ к папкам напрямую без прохождения через промежуточное ПО, но я не не знаю почему. Может кто-нибудь помочь мне решить эту проблему?

РЕДАКТИРОВАТЬ: Я также пытался с github.com/barryvdh/laravel-cors

Ответы [ 3 ]

0 голосов
/ 28 февраля 2020

Я не знаю, работает ли он в Lumen, но для Laravel я добился большого успеха, используя этот пакет neomerx / cors .

0 голосов
/ 28 февраля 2020

Возможно, вы пропустили заголовок X-CSRF-TOKEN из вашего промежуточного программного обеспечения CORS? 

$headers = [
    ....

    // You will need to add ALL headers sent from your client
    'Access-Control-Allow-Headers' => 'Content-Type, Authorization, X-Requested-With, X-CSRF-TOKEN'
];
0 голосов
/ 28 февраля 2020

Добавьте следующее в файл .htaccess с сервера, на котором находится ресурс, к которому вы пытаетесь получить доступ: 

Header Set Access-Control-Allow-Origin "*"
...