ajax全局配置，纯静态网页前后端分离文件不懂配置？，添加token等令牌在request header里，避坑

目录

需求

有的文章写法

解决方法

总结

---

需求

在做纯静态网页前后端分离的时候，不借助任何前端框架，没办法用路由等等做全局配置，然而在实际开发中，我们在每个ajax请求的时候能够自定义一些参数，或者统一修改或添加一些参数进去，比如权限验证，想在request header里加一个token进行验证

有的文章写法

来源：https://www.cnblogs.com/ivan5277/p/11389246.html，最后检查发现，request header中并没有token信息

解决方法

其实，就是在请求发送之前，把token加在XMLHttpRequest的header里去，一定都知道这个方法，来源：https://blog.csdn.net/weixin_39706415/article/details/83652213

function updateType(type) {          
          $.ajax({
                url: mainUrl + "/order/updateType/" + localStorage.orderIds + "/" + type,
                type: "post",
                contentType: "application/json",
                dataType: 'json',
                cache: false,
                async: true,
                beforeSend: function (XMLHttpRequest) {
                    XMLHttpRequest.setRequestHeader("token", localStorage.token);
                },
                success: function (result) {
                    if (result.status === 0) {
                        window.location.href = "my-order.html";
                    } else {
                        alert(result.msg)
                    }
                }
            });
 
 
        }

不妨改一下，在静态网页加载的时候我们可以添加

$.ajaxSetup({
    beforeSend:function (XMLHttpRequest) {
        //可以做一些取cookie的操作，生成签名的操作
        XMLHttpRequest.setRequestHeader("token", "token");
    }
})

为了方便，我们可以把写一个config.js来配置所有的信息，也可以直接在ajaxSetup里把url直接设置了。

//添加全局配置
const config = (function (a) {
    a.host = "http:xxxxxxxxxxxxx";
    a.port = ":xxxx";
    $.ajaxSetup({
        beforeSend: function (XMLHttpRequest) {
            console.log(1)
            XMLHttpRequest.setRequestHeader("token", "token");
        }
    })
    return a;
})
(window.config || {});

但是要确保，每次引入配置文件的时候，这样才能保证配置文件中$符号能够识别到，引入配置的参数只要config.host这样就ok了

来看看最终有没有token

 

总结

开发中处理的一些逻辑，为了尽可能少些重复代码，方便配置，个人愚见，不足之处请指出。