request payload => formdata

本文详细介绍了在HTTP请求中设置header使后台能够正确获取post参数username和password的方法,通过将Content-Type设置为application/x-www-form-urlencoded并使用transformRequest进行参数转换。

request payload



 

 

formdata



 

 



这样的post提交,默认是request payload

后台无法取得post的参数username, password

 

解决方案是设置 http request的 header

设置 Content-Type 为application/x-www-form-urlencoded

app.config(['$httpProvider',
    function($httpProvider){
        $httpProvider.defaults.headers.post = {'Content-Type':'application/x-www-form-urlencoded'};
        $httpProvider.defaults.transformRequest = function(obj){
            var str = [];
            for(var p in obj)
                str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
            return str.join("&");
        }
    }]);

 

 

 

import axios from 'axios'; import store from '@/store' import router from '@/router'; // 创建一个 axios 实例 const apiInstance = axios.create({ baseURL: 'http://82.156.202.229:80/prod/admin-api', // 根据你的 API 基本 URL 设置 timeout: 10000, // 请求超时时间 headers: { 'Content-Type': 'application/json', 'tenant-id': '1' }, }); // 请求拦截器 apiInstance.interceptors.request.use( config => { // 获取 Vuex 中的 token,判断用户是否登录 if (store.state.auth.user && store.state.auth.user.accessToken) { const token = store.state.auth.user.accessToken; // 假设 token 存储在 auth 模块中 config.headers['Authorization'] = `Bearer ${token}`; } if (!config.headers['Content-Type'] && !(config.data instanceof FormData)) { config.headers['Content-Type'] = 'application/json'; } // 返回 config 继续请求 return config; }, error => { // 请求错误时,直接返回错误 return Promise.reject(error); } ); apiInstance.interceptors.response.use( response => { // 判断响应体的 code 字段 if (response.data.code === 401) { // 如果返回的 code 是 401,表示需要重新获取 token const originalRequest = response.config; if (!originalRequest._retry) { originalRequest._retry = true; try { // 获取 refresh token const refreshToken = store.state.auth.user.refreshToken; // 使用 refresh token 请求新的 access token return apiInstance.post( `/system/auth/refresh-token?refreshToken=${encodeURIComponent(refreshToken)}`).then( refreshResponse => { // 更新 Vuex 中的 token store.commit('auth/SET_AUTH', refreshResponse.data.data); const newToken = store.state.auth.user.accessToken; // 假设 token 存储在 auth 模块中 // 重试原始请求 originalRequest.headers['Authorization'] = `Bearer ${newToken}`; return apiInstance(originalRequest); // 重新发起原请求 }).catch(err => { // 刷新 token 失败,跳转到登录页面 console.error('Token refresh failed:', err); store.dispatch('auth/logout'); router.push('/login'); return Promise.reject(err); }); } catch (err) { console.error('Error during token refresh process:', err); return Promise.reject(err); } } } // 如果正常的响应,直接返回 return response; }, error => { // 其他错误处理 if (!error.response) { console.error('Network error or CORS issue:', error); return Promise.reject(error); } // 针对其他错误(如请求超时等) console.error('Request failed:', error.response); return Promise.reject(error); } ); // 封装 GET 请求 export const apiGet = (url, params) => { return apiInstance .get(url, { params }) .then(response => response.data) .catch(error => { console.error('API GET Error:', error); throw error; }); }; // 封装 POST 请求 export const apiPost = (url, data) => { return apiInstance .post(url, JSON.stringify(data)) .then(response => response.data) .catch(error => { console.error('API POST Error:', error); throw error; }); }; // 封装 PUT 请求 export const apiPut = (url, data) => { return apiInstance .put(url, data) .then(response => response.data) .catch(error => { console.error('API PUT Error:', error); throw error; }); }; // 封装 DELETE 请求 export const apiDelete = (url, params) => { return apiInstance .delete(url, { params }) .then(response => response.data) .catch(error => { console.error('API DELETE Error:', error); throw error; }); }; 我的api包装可以上传文件吗
最新发布
12-02
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值