VUE axios發(fā)送跨域請(qǐng)求需要注意的問(wèn)題
在實(shí)際項(xiàng)目中前端使用到vue，后端使用php進(jìn)行開(kāi)發(fā)。前端使用axios請(qǐng)求請(qǐng)求
關(guān)于跨域
跨域的概念這些就不說(shuō)了，百度一大堆相關(guān)的資料信息。我就只在這里記錄下我在使用當(dāng)中遇到的問(wèn)題，以紀(jì)念在逝去的幾個(gè)小時(shí)中資料查找的艱辛。
不多說(shuō)，直接上代碼~~~~
同理，跨域的解決方案為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 請(qǐng)求：
axios.post('http://XXXX.com',{name:'test'});
這樣寫，在請(qǐng)求的時(shí)候就會(huì)遇到：
很坑爹有沒(méi)有？明明是已經(jīng)設(shè)置好了的啊，為毛是這樣？？？
查找了很多資料才發(fā)現(xiàn)，axios在發(fā)送數(shù)據(jù)時(shí)需要字符串的方式進(jìn)行發(fā)送，也就是說(shuō)是放在form-data當(dāng)中的。在實(shí)際項(xiàng)目中，為了方便，我引入了 qs 來(lái)幫助處理這塊數(shù)據(jù)：
解決后的代碼應(yīng)該是：
import qs from 'qs';
axios.post('http://xxxxx.com',qs.stringify({name:'test'})).then(re=>{
console.log(re);
});
OK,問(wèn)題解決。明明感覺(jué)很簡(jiǎn)單，但是就是因?yàn)樽约翰欢瑢?dǎo)致找了很久才知道原因，之前一直在折騰后臺(tái)的設(shè)置，忽略了前端本身的處理。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue中如何獲取當(dāng)前路由地址，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
vsCode中vue文件無(wú)法提示html標(biāo)簽的操作方法
在vsCode中書寫Vue頁(yè)面時(shí)無(wú)法提示,那真是很郁悶的事情,下面這篇文章主要給大家介紹了關(guān)于vsCode中vue文件無(wú)法提示html標(biāo)簽的操作方法,需要的朋友可以參考下2023-03-03
這篇文章主要為大家介紹了axios攔截器工作原理源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要介紹了Vue雙向數(shù)據(jù)綁定的原理，幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下2020-10-10
這篇文章主要介紹了Vue3如何獲取來(lái)源路由問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
vue如何使用formData傳遞文件類型的數(shù)據(jù)
這篇文章主要介紹了vue如何使用formData傳遞文件類型的數(shù)據(jù)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
keepalive?是?Vue?內(nèi)置的一個(gè)組件，可以使被包含的組件保留狀態(tài)，或避免重新渲染，也就是所謂的組件緩存，這篇文章主要介紹了說(shuō)說(shuō)你對(duì)Vue的keep-alive的理解,需要的朋友可以參考下2022-11-11
Vue.js提供了簡(jiǎn)潔、易于理解的API，幫助大家快速靈活掌握Vue.js。這篇文章主要介紹了如何在60分鐘內(nèi)輕松學(xué)習(xí)Vue.js，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要介紹了Proxy代理對(duì)象詳解,Proxy 是ES6中提供的一個(gè)非常強(qiáng)大的功能，可以用來(lái)代理另一個(gè)對(duì)象，從而攔截、監(jiān)視并修改這個(gè)對(duì)象的各種操作,需要的朋友可以參考下2023-04-04
解決vue-cli3創(chuàng)建使用iview定制主題javascriptEnabled找不到該配置項(xiàng)
這篇文章主要介紹了解決vue-cli3創(chuàng)建使用iview定制主題javascriptEnabled找不到該配置項(xiàng)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04