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

ysl_unh 发布于2019-08-21 17:49 / 890人阅读

前端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的请求不被服务端所允许，所以就需要后台来处理，可能遇到的问题和处理的方法如下：

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

    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之类的~~
如果有疑问请在下方进行提问，有时间必作答

海外云主机云服务器 cdn自定义header 自定义镜像的使用 tomcat启动时报错 php自定义异常处理

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90053.html

Vue+Typescript中在Vue上挂载axios使用时报错

摘要：也就是说我们手动在原型身上挂载无法识别到。这样就完美避免了报错的问题。说明使用进行开发的过程中，会遇到各种各样的报错问题，希望记录下来，避免下次再次踩坑，也希望帮助其他人。 Vue+Typescript中在Vue上挂载axios使用时报错在vue项目开发过程中，为了方便在各个组件中调用axios，我们通常会在入口文件将axios挂载到vue原型身上，如下：main.ts import...

AaronYuan 2019-08-26 10:37 评论0 收藏0
vue项目中使用element-ui下拉框选项值为对象时报错

摘要：在做后台管理时，使用了搭配，请求方法使用了插件，在使用下拉框时，因为我需要获取选中的选项中的其他值，因此需要传入对象。在做后台管理时，使用了vue搭配elementUI，请求方法使用了axios插件，在使用下拉框时，因为我需要获取选中的选项中的其他值，因此需要传入对象。对select下拉框的文档没有读的很仔细，百度过几篇文章，也没有理解他们表达的意思，然后自己又去看文档，把他的属性看...

Drummor 2019-08-26 10:57 评论0 收藏0
猫头鹰的深夜翻译：从1000+JS项目中汇总的10个最容易出现的错误(以及如何解决)

摘要：常出现的错误前十位为了可读性，错误名称进行了一定的简写。让我们深入了解每个错误发生的原因以及解决方法。这个问题很容易解决。当未捕获的错误跨越违法跨域策略的域边界时，会发生脚本错误。这是当你在中试图调用的方法时出现的错误。 JavaScript常出现的错误前十位 showImg(https://segmentfault.com/img/bV3Z1z?w=1116&h=691); 为了可读...

eccozhou 2019-08-26 11:46 评论0 收藏0
vue开发项目完全指南

摘要：有两种方法，一种是在开发环境中设置通过的，另一种是在服务器上修改的配置设置。这样我们以后使用访问接口就可以不加了，打包后访问也不用手动去除统一管理在项目开发过程中，会涉及到很多接口的处理，当项目足够大时，就需要统一管理接口。这篇文章总结了vue项目的所遇到的问题，包括跨域、用户认证、接口统一管理、路由配置、兼容性处理，性能优化等内容。项目github地址 : 前端 https:...

leoperfect 2019-08-23 16:16 评论0 收藏0
后端开发者的Vue学习之路（五）

摘要：由服务器提供的响应来自服务器响应的状态码来自服务器响应的状态信息服务器响应的头是为请求提供的配置信息所以请求返回后，我们可以通过来获取响应情况。拦截器拦截器拦截器用于拦截发起的请求或用于拦截返回的响应。目录上节内容回顾使用第三方组件库如何发起请求请求错误处理请求带参 ...

jay_tian 2019-04-23 11:51 评论0 收藏0