首頁 > php框架 > Laravel > Vue請求登入Laravel跨域失敗的解決方法

Vue請求登入Laravel跨域失敗的解決方法

PHPz
發布: 2023-04-14 17:37:19
原創
1164 人瀏覽過

前言:在實際開發中,跨域請求是很常見的問題,特別是前後端分離專案。如果你使用Vue作為前端框架,而Laravel作為後端框架,在登入時可能會出現跨域問題。本文將分享如何解決Vue請求登入Laravel跨域失敗的問題。

一、什麼是跨域?

簡單來說,跨域就是指兩個不同網域之間的資料請求。例如,在本機開發環境中,前端請求位址為http://localhost:8080,而後端位址為http://localhost:8000,這兩個位址不同,就可能出現跨域問題。

二、為什麼會跨域失敗?

跨域失敗通常是由於瀏覽器的跨域策略所導致的。預設情況下,瀏覽器會阻止不同網域之間的資料請求,以保護使用者的隱私和安全。解決方法就是要在後端設定允許跨域請求。

三、Laravel後端設定允許跨域請求

在Laravel中,可以透過中間件來實現跨域請求,具體步驟如下:

1.找到app /Http/Middleware/下的Cors.php文件,在handle方法中加入以下程式碼:

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' => [

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

],
];

至此,後端已經允許跨域請求了。

四、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

五、在vue專案中發送非同步請求

透過以上設置,我們已經允許了跨域請求。在Vue專案中可以透過以下方式傳送非同步請求:

this.$axios.post('/login', {
  'username': username, // form中傳來的參數
  'password': password // form中傳來的參數
}).then(response => {

   // 请求成功回调
登入後複製

}).catch(error => {

   // 请求失败回调
登入後複製

})

總結:若要設定跨網域請求,必須在後端設定允許跨網域請求並在前端設定Vue-axios的請求頭。只有採用這兩種方法,才能確保前後端分離的專案能夠順利跑通。

以上是Vue請求登入Laravel跨域失敗的解決方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板