Vue js POST가 onclick 로그인에 실패했습니다. "프리 플라이트에 대한 응답에 유효하지 않은 HTTP 상태 코드 404가 있습니다."

Question

Vue 앱에 대한 RESTfull API를 구축 중이며 사용자 인증에 문제가 있습니다. 아래 오류가 발생합니다.

XMLHttpRequest는 http://localhost:8000/oauth/token/을로드 할 수 없습니다. laravel의 목록입니다 내가받지 못했습니다 많은 방법을 시도

+--------+----------+---------------------------------------------+------+---------------------------------------------------------------------------+---------------+ 
| Domain | Method | URI           | Name | Action                 | Middleware | 
+--------+----------+---------------------------------------------+------+---------------------------------------------------------------------------+---------------+ 
|  | GET|HEAD |/           |  | Closure                 | web   | 
|  | GET|HEAD | api/oauth/authorize       |  | Laravel\Passport\Http\Controllers\AuthorizationController@authorize  | cors,web,auth | 
|  | DELETE | api/oauth/authorize       |  | Laravel\Passport\Http\Controllers\DenyAuthorizationController@deny  | cors,web,auth | 
|  | POST  | api/oauth/authorize       |  | Laravel\Passport\Http\Controllers\ApproveAuthorizationController@approve | cors,web,auth | 
|  | GET|HEAD | api/oauth/clients       |  | Laravel\Passport\Http\Controllers\ClientController@forUser    | cors,web,auth | 
|  | POST  | api/oauth/clients       |  | Laravel\Passport\Http\Controllers\ClientController@store     | cors,web,auth | 
|  | DELETE | api/oauth/clients/{client_id}    |  | Laravel\Passport\Http\Controllers\ClientController@destroy    | cors,web,auth | 
|  | PUT  | api/oauth/clients/{client_id}    |  | Laravel\Passport\Http\Controllers\ClientController@update     | cors,web,auth | 
|  | POST  | api/oauth/personal-access-tokens   |  | Laravel\Passport\Http\Controllers\PersonalAccessTokenController@store  | cors,web,auth | 
|  | GET|HEAD | api/oauth/personal-access-tokens   |  | Laravel\Passport\Http\Controllers\PersonalAccessTokenController@forUser | cors,web,auth | 
|  | DELETE | api/oauth/personal-access-tokens/{token_id} |  | Laravel\Passport\Http\Controllers\PersonalAccessTokenController@destroy | cors,web,auth | 
|  | GET|HEAD | api/oauth/scopes       |  | Laravel\Passport\Http\Controllers\ScopeController@all      | cors,web,auth | 
|  | POST  | api/oauth/token        |  | Laravel\Passport\Http\Controllers\AccessTokenController@issueToken  | cors,throttle | 
|  | POST  | api/oauth/token/refresh      |  | Laravel\Passport\Http\Controllers\TransientTokenController@refresh  | cors,web,auth | 
|  | GET|HEAD | api/oauth/tokens       |  | Laravel\Passport\Http\Controllers\AuthorizedAccessTokenController@forUser | cors,web,auth | 
|  | DELETE | api/oauth/tokens/{token_id}     |  | Laravel\Passport\Http\Controllers\AuthorizedAccessTokenController@destroy | cors,web,auth | 
|  | GET|HEAD | api/test         |  | Closure                 | api   | 
|  | GET|HEAD | api/user         |  | Closure                 | api,auth:api | 
+--------+----------+---------------------------------------------+------+---------------------------------------------------------------------------+---------------+ 

: 프리 플라이트에 대한 응답 유효하지 않은 HTTP 상태 코드 404

내 뷰 코드

<script> 
export default { 
    data() { 
    return { 
     email: '', 
     password: '', 
     error: '' 
    } 
    }, 
    methods: { 
    login() { 
     var data = { 
     client_id: 2, 
     client_secret: 'GWSpaP77kEIFXSG2XklctCc7AXAoWcEq4tPQbneF', 
     grant_type: 'password', 
     username: this.email, 
     password: this.password 
     } 
     this.$http.post('http://localhost:8000/oauth/token/', data).then((response) => { 
     console.log(response) 
     }, (response) => { 
     this.error = 'No response' 
     }) 
/*  this.$http.get('http://localhost:8000/api/test').then((response) => { 
     console.log(response) 
     }, (response) => { 
     this.error = 'No response' 
     }) */ 
    } 
    } 
} 
</script> 

과 경로를 가지고 이것을위한 해결책.

Answer 1

VUE에서 귀하의 URL은 다음과 같습니다 this.$http.post('http://localhost:8000/oauth/token/...

하지만 당신의 루트는 /API를로 시작됩니다

this.$http.post('http://localhost:8000/api/oauth/token/...