在實際項目中前端使用到vue,后端使用php進行開發。前端使用axios請求請求
關于跨域
跨域的概念這些就不說了,百度一大堆相關的資料信息。我就只在這里記錄下我在使用當中遇到的問題,以紀念在逝去的幾個小時中資料查找的艱辛。
不多說,直接上代碼~~~~
同理,跨域的解決方案為cros。服務器 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'});
這樣寫,在請求的時候就會遇到:
很坑爹有沒有?明明是已經設置好了的啊,為毛是這樣???
查找了很多資料才發現,axios在發送數據時需要字符串的方式進行發送,也就是說是放在form-data當中的。在實際項目中,為了方便,我引入了 qs 來幫助處理這塊數據:
解決后的代碼應該是:
import qs from 'qs';axios.post('http://xxxxx.com',qs.stringify({name:'test'})).then(re=>{ console.log(re);});
OK,問題解決。明明感覺很簡單,但是就是因為自己不懂,導致找了很久才知道原因,之前一直在折騰后臺的設置,忽略了前端本身的處理。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
新聞熱點
疑難解答