Vuejs and Laravel Wyślij wniosek CORS

Question

Nie rozumiem. Walczę z tym od godzin

Używam Vue.js z Laravel i próbuję wysłać żądanie POST do zewnętrznego API.

ale jestem zawsze otrzymuję błąd CORS na moim Vue ofertę kupna

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

ERROR

MLHttpRequest nie może załadować https://www.mollie.com/payscreen/select-method/JucpqJQses. Nr Nagłówek "Access-Control-Allow-Origin" jest dostępny na żądanym zasobie . Pochodzenie "https://payment.dev" jest zatem niedozwolone dostęp.

Zainstalowałem Laravel CORS Package dla mojego backend i dodał middleware do mojej trasie np

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

ale nadal jestem uzyskiwanie błąd. Próbowałem również dodać nagłówki Vue z

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

Z tym samym wynikiem/błędem.

Czy ktoś może mi powiedzieć, co robię źle?

Answer 1

Musisz ustawić nagłówki CORS z oprogramowania pośredniego. Może potrzebujesz dodatkowej konfiguracji?

W każdym razie, można stworzyć swój własny middleware i skonfigurować nagłówki Cors w metodzie jak w poniższym przykładzie 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. 
} 

dodać swój własny middleware do globalnego $middleware tablicy (pod CheckForMaintenanceMode::class) w jądrze Klasa .php i powinieneś być dobry.

Answer 2

Inny sposób (bez tworzenia nowego laravel middleware) jest dodać te nagłówki na początku swojej routes.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'); 

i dodać to przed swoimi przechwytujących na Vue: Vue.http.options.crossOrigin = true