VUE axios發(fā)送跨域請求需要注意的問題
更新時間：2017年07月06日 14:09:20 作者：diamonds_A
本篇文章主要介紹了VUE axios發(fā)送跨域請求需要注意的問題，在實際項目中前端使用到vue，后端使用php進行開發(fā)。前端使用axios請求請求遇到的問題，有興趣的可以了解一下
在實際項目中前端使用到vue，后端使用php進行開發(fā)。前端使用axios請求請求
關(guān)于跨域
跨域的概念這些就不說了，百度一大堆相關(guān)的資料信息。我就只在這里記錄下我在使用當(dāng)中遇到的問題，以紀(jì)念在逝去的幾個小時中資料查找的艱辛。
不多說，直接上代碼~~~~
同理，跨域的解決方案為cros。服務(wù)器 PHP端代碼如下(laravel 中間件進行處理)：
public function handle($request, Closure $next)
{
if ($request->isMethod('OPTIONS')) {
$response = response('', 200);
} else {
$response = $next($request);
}
if (!method_exists($response, 'header')) {
return $response;
}
$response->header('Access-Control-Allow-Methods', 'HEAD, GET, POST, PUT, PATCH, DELETE, OPTIONS');
$response->header(
'Access-Control-Allow-Headers',
'Content-Type, Content-Length, Authorization, Accept, X-Requested-With, Token'
);
$response->header('Access-Control-Allow-Origin', '*');
$response->header('Access-Control-Max-Age', 86400);
return $response;
}
Vue端 axios 請求：
axios.post('http://XXXX.com',{name:'test'});
這樣寫，在請求的時候就會遇到：
很坑爹有沒有？明明是已經(jīng)設(shè)置好了的啊，為毛是這樣？？？
查找了很多資料才發(fā)現(xiàn)，axios在發(fā)送數(shù)據(jù)時需要字符串的方式進行發(fā)送，也就是說是放在form-data當(dāng)中的。在實際項目中，為了方便，我引入了 qs 來幫助處理這塊數(shù)據(jù)：
解決后的代碼應(yīng)該是：
import qs from 'qs';
axios.post('http://xxxxx.com',qs.stringify({name:'test'})).then(re=>{
console.log(re);
});
OK,問題解決。明明感覺很簡單，但是就是因為自己不懂，導(dǎo)致找了很久才知道原因，之前一直在折騰后臺的設(shè)置，忽略了前端本身的處理。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue3+typescript實現(xiàn)圖片懶加載插件
這篇文章主要介紹了vue3+typescript實現(xiàn)圖片懶加載插件，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-10-10
這篇文章主要介紹了Vue的指令中實現(xiàn)傳遞更多參數(shù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
Vue Element前端應(yīng)用開發(fā)之常規(guī)Element界面組件
在我們開發(fā)BS頁面的時候，往往需要了解常規(guī)界面組件的使用，小到最普通的單文本輸入框、多文本框、下拉列表，以及按鈕、圖片展示、彈出對話框、表單處理、條碼二維碼等等，本篇隨筆基于普通表格業(yè)務(wù)的展示錄入的場景介紹這些常規(guī)Element組件的使用2021-05-05
Vue v-for中:key中item.id與Index使用的區(qū)別解析
這篇文章主要介紹了Vue v-for中:key中item.id與Index使用的區(qū)別解析,推薦使用【:key="item.id"】而不是將數(shù)組下標(biāo)當(dāng)做唯一標(biāo)識,前者能做到全部復(fù)用,本文給大家詳細講解,感興趣的朋友跟隨小編一起看看吧2024-02-02
這篇文章主要介紹了vantUI 獲得piker選中值的自定義ID操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要為大家介紹了effect返回runner單測實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
這篇文章主要給大家介紹了關(guān)于Vue3中emits與attrs區(qū)別的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2021-10-10
最近在寫vue的一個項目要實現(xiàn)過渡的效果,雖然vue動畫不是強項,庫也多,但是基本的坑還是得踩扎實,下面這篇文章主要給大家介紹了關(guān)于Vue中實現(xiàn)過渡動畫效果的相關(guān)資料,需要的朋友可以參考下2023-01-01
這篇文章主要給大家介紹了關(guān)于Vue3父子組件相互調(diào)用方法的相關(guān)資料,vue中我們常常用到組件,那么組件中互相調(diào)用也是經(jīng)常遇到的,需要的朋友可以參考下2023-08-08
使用Vue.js實現(xiàn)一個循環(huán)倒計時功能
在Web應(yīng)用中,倒計時功能常用于各種場景,如活動倒計時、定時任務(wù)提醒等,Vue.js作為一款輕量級的前端框架,提供了豐富的工具和API來實現(xiàn)這些功能,本文將詳細介紹如何使用Vue.js實現(xiàn)一個循環(huán)倒計時功能,需要的朋友可以參考下2024-09-09