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. Нет. Заголовок "Access-Control-Allow-Origin" присутствует на запрошенном ресурс. Происхождение'https://payment.Дэв!--16--> ' поэтому не допускается доступ.

Я установил пакет Laravel CORS на мой backend и добавлено middleware на мой маршрут Е.г

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'] = '*';

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

кто-то может сказать мне, что я делаю неправильно?

8
cors laravel vue-resource vue.js

2 ответов

вам нужно настроить CORS-заголовки с middleware. Может, тебе нужна дополнительная настройка?

в любом случае, вы можете создать свое собственное промежуточное ПО и настроить заголовки 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.
}

добавьте пользовательское промежуточное ПО в global $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