前言：在實際開發(fā)中，跨域請求是很常見的問題，特別是前后端分離項目中。如果你使用vue作為前端框架，而laravel作為后端框架，在登錄時可能會出現(xiàn)跨域問題。本文將分享如何解決vue請求登錄laravel跨域失敗的問題。
一、什么是跨域？
簡單來說，跨域就是指兩個不同域名之間的數(shù)據(jù)請求。比如，在本地開發(fā)環(huán)境中，前端請求地址為http://localhost:8080，而后端地址為http://localhost:8000，這兩個地址不同，就可能出現(xiàn)跨域問題。
二、為什么會跨域失敗？
跨域失敗通常是由于瀏覽器的跨域策略所導(dǎo)致的。默認(rèn)情況下，瀏覽器會阻止不同域名之間的數(shù)據(jù)請求，以保護用戶的隱私和安全。解決方法就是要在后端配置允許跨域請求。
立即學(xué)習(xí)“前端免費學(xué)習(xí)筆記（深入）”；
三、Laravel后端設(shè)置允許跨域請求
在Laravel中，可以通過中間件來實現(xiàn)跨域請求，具體步驟如下：
1.找到app/Http/Middleware/下的Cors.php文件，在handle方法中添加以下代碼：
header(‘Access-Control-Allow-Origin: *’); //設(shè)置允許所有源訪問
header(‘Access-Control-Allow-Headers: Origin, Content-Type, Authorization’);//設(shè)置允許訪問的頭信息
header(‘Access-Control-Allow-Methods: GET,POST,PUT,delete’);//設(shè)置允許訪問的方式
return $response;
2.將Cors中間件應(yīng)用到路由中，找到app/Http/Kernel.php文件，添加以下代碼：
protected $middlewareGroups = [
? ‘web’ => [
// ...
],
? ‘api’ => [
'throttle:60,1', IlluminateRoutingMiddlewareSubstituteBindings::class, AppHttpMiddlewareCors::class //添加此處
],
];
至此，后端已經(jīng)允許跨域請求了。
四、Vue前端設(shè)置跨域請求
接下來，就是在Vue中設(shè)置跨域請求。我們可以使用Vue-axios插件來發(fā)送異步請求和處理響應(yīng)。 在Vue項目中執(zhí)行以下命令安裝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項目中發(fā)送異步請求
通過以上設(shè)置，我們已經(jīng)允許了跨域請求。 在Vue項目中可以通過以下方式發(fā)送異步請求：
this.$axios.post(‘/login’, {
? ‘username’: username, // form中傳來的參數(shù)
? ‘password’: password // form中傳來的參數(shù)
}).then(response => {
// 請求成功回調(diào)
// 請求失敗回調(diào)
})
總結(jié)：要想設(shè)置跨域請求，必須在后端設(shè)置允許跨域請求并在前端配置Vue-axios的請求頭。只有采用這兩種方法，才能保證前后端分離的項目能夠順利跑通。
