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