前端axios踩坑
摘要：
axios 庫是前端非常流行的網路請求庫，下面是我剛使用的時候遇到的坑
本地開發跨域問題（CORS），首先在服務端要接受跨域
header("Access-Control-Allow-Origin: *");
這個時候 ax...
axios 庫是前端非常流行的網路請求庫，下面是我剛使用的時候遇到的坑
本地開發跨域問題（CORS），首先在服務端要接受跨域
header("Access-Control-Allow-Origin: *");
這個時候 axios 在 post/put 的時候會先發起 option 請求。如果伺服器不支援，則返回失敗。為了避免這個，要避免 json 請求。qs 庫可以把 json 解析成 www-form 的樣子，即 a=1&b=2
axios 有兩個資料引數 params 和 data，params 會被放到 url 裡，data 會被放到 body 裡
const qs = require('qs')
if(param.method){
let method = param.method.toUpperCase()
if(method == 'POST' || method == 'PUT'){
param.headers = {
'Content-type': 'application/x-www-form-urlencoded;charset=utf-8'
}
param.data = qs.stringify(param.data, {arrayFormat: 'brackets'})
}
if(method == 'DELETE'){
param.paramsSerializer = params => {
return qs.stringify(params, {arrayFormat: 'brackets'})
}
}
}else{
param.paramsSerializer = params => {
return qs.stringify(params, {arrayFormat: 'brackets'})
}
}
axios(param)
像上面這樣修改後，瀏覽器就不會報跨域錯誤了，而且服務端還能獲得 form 引數，而不是 json。