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

前言：在實際開發中，跨域請求是很常見的問題，特別是前後端分離專案。如果你使用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中文網其他相關文章！