Vue SPA возвращает 400 неверных запросов при подключении с локального хоста на сервер - PullRequest
0 голосов
/ 25 сентября 2018

Я выполнил и внедрил полуработающий JWT-auth с laravel для учебника Rest and Vue SPA Учебное пособие здесь для справки

Если я запускаю php artisan serve локально и посещаю мойбраузер localhost:8000/ методы регистрации и входа в систему работают нормально - также, если я загружаю файл app.js, это также работает на живом сервере.Если я попытаюсь использовать localhost:8000/ для регистрации, это тоже нормально.проблема возникает, когда я пытаюсь войти с локального хоста и подключиться к серверу для авторизации.

Вывод с консоли:

XHR POST https://test.mydomain.co.uk/api/auth/login?email=test@email.com&password=password [HTTP/1.1 200 OK 391ms]

XHR GET https://test.mydomain.co.uk/api/auth/user [HTTP/1.1 400 Bad Request 121ms]

И локальный на локальный и сервер на сервер работают, ноне локально для сервера

Я не буду размещать вывод рабочей консоли здесь, если не будет запрошено.

/ routs / api.php

<?php

use Illuminate\Http\Request;

Route::middleware('auth:api')->get('/user', function (Request $request) {
    return $request->user();
});

Route::post('auth/register', 'AuthController@register');
Route::post('auth/login', 'AuthController@login');
Route::group(['middleware' => 'jwt.auth'], function(){
    Route::get('auth/user', 'AuthController@user');
    Route::post('auth/logout', 'AuthController@logout');
});

Route::group(['middleware' => 'jwt.refresh'], function(){
    Route::get('auth/refresh', 'AuthController@refresh');
});

/ app / Http / Controllers / AuthController.php

    <?php

namespace App\Http\Controllers;

use App\Http\Requests\RegisterFormRequest;
use App\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use JWTAuth;
use Log;

class AuthController extends Controller
{

    /*
    */
    private function generateVerification($name, $username) {
        return md5( $name.substr(str_shuffle("ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890"), 0, 9).$username );
    }


    public function register(RegisterFormRequest $request){
        $user = new User;
        $user->email = $request->email;
        $user->name = $request->name;
        $user->password = bcrypt($request->password);
        if(!$request->signupcode) {
            $user->registration_voucher = '0';
        } else {
            $user->registration_voucher = $request->signupcode;
        }
        $user->username = $request->name;
        $user->firstname = 'First '.$request->name;
        $user->lastname = 'Last '.$request->name;
        $user->avatar = '';
        $user->bids = '5';
        $user->provider = '0';
        $user->provider_id = '0';
        $user->enabled = '0';
        $user->verification = $this->generateVerification($request->name.$request->name, $request->name);
        $user->save();

        return response([
            'status' => 'success',
            'data' => $user
           ], 200);
        }
    public function login(Request $request){
        $credentials = $request->only('email', 'password');
        Log::debug('Info: '.$request['email'].' - '.$request['password']);
        if ( ! $token = JWTAuth::attempt($credentials)) {
                return response([
                    'status' => 'error',
                    'error' => 'invalid.credentials',
                    'msg' => 'Invalid Credentials.'
                ], 400);
        }
        Log::debug('Success! '.$token);
        return response([
            'status' => 'success'
            ])
            ->header('Authorization', $token);
    }


    public function user(Request $request){
        Log::debug('request '.$request);
        $user = User::find(Auth::user()->id);

        return response([
            'status' => 'success',
            'data' => $user
        ]);
    }

    public function refresh()    {
        return response([
            'status' => 'success'
        ]);
    }

    public function logout(){
        JWTAuth::invalidate();

        return response([
            'status' => 'success',
            'msg' => 'Logged out Successfully.'
        ], 200);
    }

}

httpd.conf (Apache) (включено, поскольку у меня было несколько ошибок cors, которые сейчас имеютисправлено)

<IfModule mod_headers.c>
  <Directory />
    Header set Access-Control-Allow-Origin "*"
    Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
    Header always set Access-Control-Max-Age "1000"
    Header always set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token"
    Header always set Access-Control-Allow-Headers "*"

    Header always set X-XSS-Protection "1; mode=block"
    Header always set x-Frame-Options "SAMEORIGIN"
    Header always set X-Content-Type-Options "nosniff"
    Header always set Strict-Transport-Security "max-age=31536000; includeSubDomains"

    Header always set Referrer-Policy "strict-origin"
  </Directory>
</IfModule>

/ resources / assets / js / app.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import axios from 'axios';
import VueAxios from 'vue-axios';
import App from './App.vue';
import Dashboard from './components/Dashboard.vue';
import Home from './components/Home.vue';
import Register from './components/Register.vue';
import Login from './components/Login.vue';

Vue.use(VueRouter);
Vue.use(VueAxios, axios);
axios.defaults.baseURL = 'https://test.mydomain.co.uk/api';    // 'localhost:8000/api'

const router = new VueRouter({
    routes: [{
        path: '/',
        name: 'home',
        component: Home
    },{
        path: '/register',
        name: 'register',
        component: Register,
        meta: {
            auth: false
    }
    },{
        path: '/login',
        name: 'login',
        component: Login,
        meta: {
            auth: false
        }
    },{
        path: '/dashboard',
        name: 'dashboard',
        component: Dashboard,
        meta: {
            auth: true
        }
    }]
});

Vue.router = router
Vue.use(require('@websanova/vue-auth'), {
   auth: require('@websanova/vue-auth/drivers/auth/bearer.js'),
   http: require('@websanova/vue-auth/drivers/http/axios.1.x.js'),
   router: require('@websanova/vue-auth/drivers/router/vue-router.2.x.js'),
});

App.router = Vue.router new Vue (Приложение).$ mount ('# app');

/ resources / assets / js / components / Login.vue

<template>
    <div>
        <div class="alert alert-danger" v-if="error">
            <p>There was an error, unable to sign in with those credentials.</p>
        </div>
        <form autocomplete="off" @submit.prevent="login" method="post">
            <div class="form-group">
                <label for="email">E-mail</label>
                <input type="email" id="email" class="form-control" placeholder="user@example.com" v-model="email" required>
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password" class="form-control" v-model="password" required>
            </div>
            <button type="submit" class="btn btn-default">Sign in</button>
        </form>
    </div>
</template>

<script>
  export default {
    data(){
      return {
        email: null,
        password: null,
        error: false
      }
    },

    methods: {
      login(){
        var app = this
        this.$auth.login({
            params: {
              email: app.email,
              password: app.password
            },
            success: function () {},
            error: function () {},
            rememberMe: true,
            redirect: '/dashboard',
            fetchUser: true,
        });
      },
    }
  }
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...