Laravel 크로스 도메인 로그인에 대한 Vue 요청 실패에 대한 솔루션

머리말: 실제 개발에서 도메인 간 요청은 특히 프런트엔드 및 백엔드 분리 프로젝트에서 매우 일반적인 문제입니다. Vue를 프런트엔드 프레임워크로 사용하고 Laravel을 백엔드 프레임워크로 사용하는 경우 로그인 시 도메인 간 문제가 발생할 수 있습니다. 이 글에서는 Laravel 크로스 도메인 로그인 실패에 대한 Vue 요청 문제를 해결하는 방법을 공유합니다.

1. 크로스도메인이란 무엇인가요?

간단히 말하면 크로스 도메인은 서로 다른 두 도메인 이름 간의 데이터 요청을 의미합니다. 예를 들어 로컬 개발 환경에서 프런트엔드 요청 주소는 http://localhost:8080이고 백엔드 주소는 http://localhost:8000입니다. 이 두 주소가 서로 다르면 크로스 도메인 문제입니다. 발생할 수 있습니다.

2. 도메인 간 오류가 발생하는 이유는 무엇입니까?

교차 도메인 오류는 일반적으로 브라우저의 교차 도메인 정책으로 인해 발생합니다. 기본적으로 브라우저는 사용자 개인 정보 보호 및 보안을 보호하기 위해 서로 다른 도메인 이름 간의 데이터 요청을 차단합니다. 해결 방법은 도메인 간 요청을 허용하도록 백엔드를 구성하는 것입니다.

3. Laravel 백엔드 설정에서는 도메인 간 요청을 허용합니다.

Laravel에서는 미들웨어를 통해 도메인 간 요청을 구현할 수 있습니다.

1 app/Http/Middleware에서 Cors.php 파일을 찾습니다. /, 핸들 메소드에 다음 코드를 추가합니다:

header('Access-Control-Allow-Origin: *') //모든 소스에서 액세스를 허용하도록 설정
header('Access-Control-Allow-Headers: Origin , Content-Type, Authorization');//접근을 허용할 헤더 정보 설정
header('Access-Control-Allow-Methods: GET,POST,PUT,DELETE');//접근 허용 메소드 설정
return $response;

2. Cors 미들웨어를 경로에 적용하고, app/Http/Kernel.php 파일을 찾아 다음 코드를 추가합니다:

protected $middlewareGroups = [
'web' => ],

'api' => [

  // ...

],];

이 시점에서 백엔드는 도메인 간 요청을 허용했습니다.

4. Vue 프런트엔드에서 도메인 간 요청 설정

다음 단계는 Vue에서 도메인 간 요청을 설정하는 것입니다. Vue-axios 플러그인을 사용하여 비동기 요청을 보내고 응답을 처리할 수 있습니다. Vue 프로젝트에서 다음 명령을 실행하여 Vue-axios를 설치합니다.

npm install --save axios vue-axios

그런 다음 main.js에 다음 Vue-axios 구성을 추가합니다.

import axios from 'axios'

import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)
axios.defaults.withCredentials = true

5. vue 프로젝트에서 비동기 요청 보내기

위 설정을 사용하면 도메인 간 요청이 허용됩니다. . Vue 프로젝트에서는 다음과 같은 방법으로 비동기 요청을 보낼 수 있습니다:

this.$axios.post('/login', {

'username': 사용자 이름, // 매개변수가 형식으로 전달됨

'password': 비밀번호 // 양식에 전달된 매개변수
}).then(response => {

 'throttle:60,1',
 \Illuminate\Routing\Middleware\SubstituteBindings::class,
 \App\Http\Middleware\Cors::class //添加此处

}).catch(error => {

   // 请求成功回调

})

요약: 교차 도메인 요청을 설정하려면 백엔드에 있어야 합니다. 도메인 간 요청을 허용하는 요청 헤더를 설정하고 프런트엔드에 Vue-axios를 구성합니다. 이 두 가지 방법을 채택해야만 프런트엔드와 백엔드가 분리된 프로젝트를 원활하게 실행할 수 있습니다.

위 내용은 Laravel 크로스 도메인 로그인에 대한 Vue 요청 실패에 대한 솔루션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!