首页 > 解决方案 > AJAX/JS 表单防止 cookie 被设置

问题描述

解决了:

添加Header add Access-Control-Allow-Credentials: true到 .htaccess 文件,然后将 Access-Control-Allow-Origin 修改为发送 AJAX 调用的域。AJAX 调用必须包括:

xhrFields: {
   withCredentials: true
},

--

我在后端有一个 API 调用,它在浏览器中设置了一个 cookie,如果我通过普通的 HTML 表单提交用户登录详细信息,它工作正常。但是,如果我在表单中添加 AJAX 以防止事件默认值并从服务器获取回复,则不会设置 cookie...

{{-- Log In Form Script --}}
<script>
    $(document).ready(function(){
        $(function() {
            $('#login-form').submit(function(event) {
                // event.preventDefault();

                var formEl = $(this);
                var submitButton = $('input[type=submit]', formEl);

                $.ajax({
                    type: 'POST',
                    url: formEl.prop('action'),
                    accept: {
                        javascript: 'application/javascript'
                    },
                    data: formEl.serialize(),
                    beforeSend: function() {
                        submitButton.prop('disabled', 'disabled');
                    },
                    statusCode: {
                        401: function() {
                            $("#login-button").css('background-color','red');
                            $('#login-submit-label').text('Incorrect Email or Password!');
                            //replace with data.message
                            $("#login-submit-label").show();
                        },
                        403: function() {            
                            $("#login-button").css('background-color','#ffbf00');
                            $('#login-submit-label').text('Account not activated. Check your inbox!'); 
                            //replace with data.message
                            $("#login-submit-label").show();
                        }           
                    }
                }).done(function(data) {    
                    if((data.status == "ACCESS") || (data.status == "COOKIE")){
                        $("#login-button").css('background-color','#1e3296');
                        // var button = document.getElementById("login-button");
                        // button.classList.toggle("btn-custom");
                        $("#log-in-spinwheel").show();
                    }else{
                        //
                    }
                    console.log(data);  
                    submitButton.prop('disabled', false);
                });
            });
        });
    });
</script>

Cookie 设置如下:

setcookie('auth_token', $randomtoken, time() + (86400 * 30), '/');

.htaccess 文件已经有以下代码行用于 CORS 错误:

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

标签: phpajaxcookies

解决方案


推荐阅读