使用Vue的axios自定义header时报错处理~

前端Axios的设置处理
当 Content-Type 为 application/json 的时候,会先产生一个 OPTION 请求(如 Network所示)。

可以把 Content-Type 设置为 application/x-www-form-urlencoded。
设置 Auth 请求头,参看官方文档

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

举个栗子~
// 新创建 axios 实例配置
const $axios = axios.create({
    baseURL: 'http://domain.com',
    timeout: 5000,
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'sessionId':  Lockr.get("sessionId"),
        'authKey': Lockr.get("authKey"),
    }
});

// 初始化默认post header
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

前端设置成功后可能会遇到以下问题cross 带option的请求不被服务端所允许,所以就需要后台来处理,可能遇到的问题和处理的方法如下:

1.图片描述

这个报错后的解决办法是后端配置 以下东西~

    HttpServletRequest request = (HttpServletRequest) req;
            HttpServletResponse response = (HttpServletResponse) res;
            String origin = request.getHeader("Origin");
            response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
            response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
            response.setHeader("Access-Control-Max-Age", "3600");
            response.setHeader("Access-Control-Allow-Headers", "x-requested-with,token");
            response.setHeader("Access-Control-Allow-Credentials", "true"); //是否支持cookie跨域
            chain.doFilter(req, res);
            
            response.setHeader("Access-Control-Allow-Headers", "x-

重点在这里
requested-with,token");这个是配置自定义header内的token appid之类的~~
如果有疑问请在下方进行提问,有时间必作答

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值