Vuejs и Laravel Post запрашивают CORS

Я не понимаю. Я борюсь с этим уже несколько часов

Я использую Vue.js с Laravel и попытайтесь сделать POST-запрос к внешнему API.

Но я всегда получаю ошибку CORS на моем запросе Vue POST

methods: {
            chargeCustomer(){
                this.$http.post('/api/chargeCustomer', this.payment).then(function (response) {
                    console.log(response.data)
                },function (response) {
                    console.log(response.data)
                });
            }
        }

Ошибка

MLHttpRequest не удается загрузить https://www.mollie.com/payscreen/select-method/JucpqJQses . нет Доступ-контроля-разрешить-происхождение заголовка' присутствует на запрошенный ресурс. Происхождение "https://payment.поэтому dev ' не допускается доступ.

Я установил пакет Laravel CORS для моего бэкенда и добавил промежуточное ПО к моему маршруту, например 

Route::group(['middleware' => 'cors'], function(){
    Route::post('/api/chargeCustomer', 'BackendPaymentController@chargeCustomer');
});

Но я все еще получаю ошибку. Я также попытался добавить заголовки Vue с помощью

Vue.http.headers.common['Access-Control-Allow-Origin'] = '*';
Vue.http.headers.common['Access-Control-Request-Method'] = '*';

С тем же результатом / ошибкой.

Может ли кто-нибудь сказать мне, что я делаю не так?
2 8
vue.js cors laravel vue-resource

2 ответа:

Вам нужно настроить заголовки CORS из промежуточного ПО. Может быть, вам нужна дополнительная настройка?

В любом случае, вы можете создать свое собственное промежуточное ПО и настроить заголовки CORS в методе handle(), как показано в следующем примере: 

public function handle($request, Closure $next) 
{
    return $next($request)
           ->header('Access-Control-Allow-Origin', 'http://yourfrontenddomain.com') // maybe put this into the .env file so you can change the URL in production.
           ->header('Access-Control-Allow-Methods', '*') // or specify `'GET, POST, PUT, DELETE'` etc as the second parameter if you want to restrict the methods that are allowed.
           ->header('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type, Authorization') // or add your headers.
}

Добавьте ваше пользовательское промежуточное ПО в глобальный массив $middleware (под CheckForMaintenanceMode::class) в ядре.php класс, и вы должны быть хороши, чтобы пойти.

4

Другой способ (без создания нового промежуточного по laravel) - добавить эти заголовки в начале ваших маршрутов.php 

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');

И добавьте это перед вашими перехватчиками на vue: Vue.http.options.crossOrigin = true

1