Vuejs e Laravel Post Request CORS

Question

Non capisco. Sto lottando con questo da ore

Sto usando Vue.js con Laravel e provo a fare una richiesta POST a un'API esterna.

Ma io sono sempre ottenere un errore CORS sul mio Vue POST Richiesta

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

ERRORE

MLHttpRequest non può caricare https://www.mollie.com/payscreen/select-method/JucpqJQses. No L'intestazione 'Access-Control-Allow-Origin' è presente sulla risorsa richiesta. L'origine 'https://payment.dev' non è pertanto consentita per l'accesso .

ho installato il Laravel CORS Package per il mio backend e aggiunto il middleware per il mio percorso per esempio

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

ma sono ancora ottenere l'errore. Ho anche provato ad aggiungere le intestazioni Vue con

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

Con lo stesso risultato/errore.

Qualcuno potrebbe dirmi cosa sto facendo di sbagliato?

Answer 1

È necessario configurare le intestazioni CORS dal middleware. Forse hai bisogno di qualche setup extra?

Ad ogni modo, è possibile creare il proprio middleware e impostare le intestazioni CORS nel metodo handle() simile al seguente esempio:

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. 
} 

Aggiungi la tua middleware personalizzata al $middleware matrice globale (sotto CheckForMaintenanceMode::class) nel kernel .php class e dovresti essere bravo a farlo.

Answer 2

altro modo (senza creare un nuovo middleware laravel) è aggiungere queste intestazioni all'inizio del vostro 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'); 

e aggiungerli davanti ai vostri intercettori sul vue: Vue.http.options.crossOrigin = true