beforeSend 出现跨域问题，header里直接设置token就没问题----Day1

最新推荐文章于 2021-08-05 13:12:34 发布

简析

最新推荐文章于 2021-08-05 13:12:34 发布

阅读量2.3k

点赞数 1

分类专栏：前端 layui

本文链接：https://blog.csdn.net/yulongxue/article/details/93708763

版权

前端 layui 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一开始前端调用后端接口出现跨域问题，右键查看元素，会有跨域错误提示，类似下图，后来找后端设置了一下，问题解决。可以登录获取token等参数了。

但是请求设备列表时，beforeSend 中设置token却失败了，没有效果，出错，然后后端程序给的解决方案是在header中设置。

//beforesend这个不行，传不过去
 beforeSend: function(xhr) {
     xhr.setRequestHeader("token", window.sessionStorage.getItem("Token"));

},

是在header里直接设置token就没问题

 headers: { 'Content-Type': 'application/json;charset=utf8', 'token': window.sessionStorage.getItem("Token") },

layui框架 ajax 调用接口，登录，查询设备记录一下

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
    html,
    body {
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin: 0;
        padding: 0;
        background-color: #062F6B;
    }
    </style>
    <script src="../layuiadmin/layui/layui.js"></script>
    <script>
    layui.use(['form'], function() {
        var $ = layui.$,
            form = layui.form;
        window.setInterval(function() {
            refreshToken();
        }, 10 * 60 * 1000); //60*1000 秒  10*60*1000=10分钟 刷新一次token，防止token过期
        function refreshToken() {
            $.ajax({
                type: 'POST',
                url: '/Login/Account/PhoneLogpwd',
                data: { "oldToken": window.sessionStorage.getItem("token") },
                contentType: 'application/json',
                success: function(result) {
                    alert(JSON.stringify(result));
                    if (result.resultCode == "10000000") {
                        //登录成功
                        console.log(result.data);
                        var token = result.data.token;
                        alert(token);
                        //将生成的token重新放入到session中
                        window.sessionStorage.setItem("token", token);
                    }
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert(JSON.stringify(errorThrown))
                }
            });
        }
        
        login();

        function login() {
            $.ajax({
                type: 'POST',
                url: '/Login/AccountPwd',
                data: { "loginName": "haisen", "loginpwd": "123456" },

                dataType: "json",
                success: function(result) {
                    // alert(JSON.stringify(result));
                    if (result.resultCode == "10000000") {
                        //登录成功

                        console.log(result.data);

                        var token = result.data.token;

                        //将token放入到session中
                        window.sessionStorage.setItem("Token", token);

                    }
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert(JSON.stringify(errorThrown))
                }
            });
        }


        getDevices();
        function getDevices() {
            $.ajax({
                type: 'GET',
                url: '/Device/List',
                // data: { "address": "" },
                dataType: 'json',
                headers: { 'Content-Type': 'application/json;charset=utf8', 'token': window.sessionStorage.getItem("Token") },
                
                success: function(result) {
                    alert(result.resultCode);
                    if (result.resultCode == "10000000") {
                        //登录成功
                        //获取设备信息
                        alert("success");
                        console.log(result.data);

                    }
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert(2);
                    if (typeof error_callback == "function") {
                        error_callback(errorThrown); //成功后回调函数

                    }
                }
            });
        }

       


    });

    

 
    </script>
</head>

<body>
</body>

</html>

简析

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
beforeSend 出现跨域问题，header里直接设置token就没问题----Day1

一开始前端调用后端接口出现跨域问题，右键查看元素，会有跨域错误提示，类似下图，后来找后端设置了一下，问题解决。可以登录获取token等参数了。但是请求设备列表时，beforeSend 中设置token却失败了，没有效果，出错，然后后端程序给的解决方案是在header中设置。//beforesend这个不行，传不过去 beforeSend: function(xhr) { ...
复制链接

扫一扫