VUE axios發(fā)送跨域請求需要注意的問題
更新時間：2017年07月06日 14:09:20 作者：diamonds_A
本篇文章主要介紹了VUE axios發(fā)送跨域請求需要注意的問題，在實際項目中前端使用到vue，后端使用php進(jìn)行開發(fā)。前端使用axios請求請求遇到的問題，有興趣的可以了解一下
在實際項目中前端使用到vue，后端使用php進(jìn)行開發(fā)。前端使用axios請求請求
關(guān)于跨域
跨域的概念這些就不說了，百度一大堆相關(guān)的資料信息。我就只在這里記錄下我在使用當(dāng)中遇到的問題，以紀(jì)念在逝去的幾個小時中資料查找的艱辛。
不多說，直接上代碼~~~~
同理，跨域的解決方案為cros。服務(wù)器 PHP端代碼如下(laravel 中間件進(jìn)行處理)：
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ù)時需要字符串的方式進(jìn)行發(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)文章
這篇文章主要介紹了vue中如何獲取當(dāng)前路由地址，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
vsCode中vue文件無法提示html標(biāo)簽的操作方法
在vsCode中書寫Vue頁面時無法提示,那真是很郁悶的事情,下面這篇文章主要給大家介紹了關(guān)于vsCode中vue文件無法提示html標(biāo)簽的操作方法,需要的朋友可以參考下2023-03-03
這篇文章主要為大家介紹了axios攔截器工作原理源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要介紹了Vue雙向數(shù)據(jù)綁定的原理，幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下2020-10-10
這篇文章主要介紹了Vue3如何獲取來源路由問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
vue如何使用formData傳遞文件類型的數(shù)據(jù)
這篇文章主要介紹了vue如何使用formData傳遞文件類型的數(shù)據(jù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
keepalive?是?Vue?內(nèi)置的一個組件，可以使被包含的組件保留狀態(tài)，或避免重新渲染，也就是所謂的組件緩存，這篇文章主要介紹了說說你對Vue的keep-alive的理解,需要的朋友可以參考下2022-11-11
Vue.js提供了簡潔、易于理解的API，幫助大家快速靈活掌握Vue.js。這篇文章主要介紹了如何在60分鐘內(nèi)輕松學(xué)習(xí)Vue.js，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要介紹了Proxy代理對象詳解,Proxy 是ES6中提供的一個非常強(qiáng)大的功能，可以用來代理另一個對象，從而攔截、監(jiān)視并修改這個對象的各種操作,需要的朋友可以參考下2023-04-04
解決vue-cli3創(chuàng)建使用iview定制主題javascriptEnabled找不到該配置項
這篇文章主要介紹了解決vue-cli3創(chuàng)建使用iview定制主題javascriptEnabled找不到該配置項問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04