Ax ios Ошибка Cors в VueJs (с использованием платформы Quasar) в Laravel API - PullRequest
Новая
       12

Ax ios Ошибка Cors в VueJs (с использованием платформы Quasar) в Laravel API

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

Я использую этот фреймворк https://quasar.dev/ для моего интерфейса и Laravel для моего интерфейса API. Я пытаюсь войти в систему, используя ax ios POST, но получаю сообщение об ошибке CORS:

На моем Front-End я запускаю npm, запускаю dev и получаю http://localhost: 8080 локальный сервер. Что касается API Laravel, я использую веб-сервер xampp, который находится на http://localhost, но на порту по умолчанию я предполагаю.

Ошибка:

Доступ к XMLHttpRequest в 'http://localhost/vuecommerce-api/api/login' от источника 'http://localhost: 8080 ' был заблокирован политикой CORS: Ответ на запрос предполетной проверки не прошел проверка контроля доступа: значение заголовка «Access-Control-Allow-Origin» в ответе не должно быть подстановочным знаком «*», если режим учетных данных запроса «включить». Режим учетных данных запросов, инициированных XMLHttpRequest, управляется атрибутом withCredentials.

Ax ios вызов: 

const Store = new Vuex.Store({
modules: {
  // example
},

actions: {
  async retrieveToken (context, credentials) {
    var url = 'http://localhost/vuecommerce-api/api/login'
    var post = {
      username: credentials.username,
      password: credentials.password
    }

    return new Promise((resolve, reject) => {
      axios({
        method: 'post',
        url: url,
        mode: 'no-cors',
        headers: {
          'Access-Control-Allow-Origin': '*',
          'Content-Type': 'application/json'
        },
        withCredentials: true,
        credentials: 'same-origin',
        data: post
      })
        .then(response => {
          const token = response.data.access_token

          localStorage.setItem('access_token', token)
          context.commit('retrieveToken', token)
          resolve(response)
          // console.log(response);
          // context.commit('addTodo', response.data)
        })
        .catch(error => {
          console.log('aici error')
          console.log(error)
          reject(error)
        })
    })
    ...

Важно Отметим, что для входа в систему я использую Laravel Паспорт с помощью этого урока https://www.youtube.com/watch?v=GRhkhSzyApc&t=300s

Странная вещь:

У меня есть создал промежуточное программное обеспечение Cors для моего Laravel Back-End и добавил его к конечным точкам: 

<?php

namespace App\Http\Middleware;

use Closure;

class Cors
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        return $next($request)
            ->header('Access-Control-Allow-Origin', '*')
            ->header('Access-Control-Allow-Method', '*')
            ->header('Access-Control-Allow-Headers', '*')
            ->header("Access-Control-Allow-Credentials", true)
            ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
    }
}

На другой странице я делаю запрос Ax ios GET к другой конечной точке для получения продуктов , и это работает.

Если это поможет с чем-либо: 

/**
 * POST Login
 * 
 * @var \Illuminate\Http\Request
 * 
 * @return \Illuminate\Http\JsonResponse;
 */
public function login (Request $request) {
    print response()->header('')
    exit('request');

    $http = new \GuzzleHttp\Client();
    $login_endpoint = config('services.passport.login_endpoint');
    $post = [
                'form_params' => [
                    'grant_type' => 'password',
                    'client_id' => config('services.passport.client_id'),
                    'client_secret' => config('services.passport.client_secret'),
                    'username' => $request->username,
                    'password' => $request->password,
                ]
            ];

    // Request
    print response()->json($request->all());
    exit('request');

    // Oauth
    // print response()->json($post);
    // exit('request');

    try {
        $response = $http->post($login_endpoint, [
            $post
        ]);

        print response()->json($response);
        exit('gata');

        return $response->getBody();
    }
    catch(\GuzzleHttp\Exception\BadResponseException $e) {
        // Error
        // print response()->json($e->getMessage());
        // exit('error');
        if($e->getCode() == 400) {
            return response()->json('Invalid Request. Please enter a username or password.', $e->getCode());
        }
        elseif($e->getCode() == 401) {
            return response()->json('Your credentials are incorrect. Please try again.', $e->getCode());
        }
    }
}

Он никогда не достигает функции php из-за CORS, так что ни один из моих отпечатков и существует работа.

...