csrftoken如何解决AJAX跨域问题答案

【问题标题】：How to solve AJAX cross-domain problems with csrftokencsrftoken如何解决AJAX跨域问题
【发布时间】：2023-10-07 08:32:01
【问题描述】：

想用csrf_token解决ajax的跨域问题，但是遇到了一些问题

这是我的 json：

{
    "id": 1, 
    "distribution_box_id": "abc123", 
    "timestamp": "2019-07-11T07:00:00", 
    "lock1": 0, 
    "lock2": 0, 
    "temperature": 26.0, 
    "humidity": 10.0, 
    "latitude": 35.15409152643205, 
    "longitude": 109.45553839575084, 
    "smoke_detector": 0
}

<script>
$.ajax({
    url: 'http://localhost/app1/distributionboxdata/1',
    method: 'post',
    headers: {
        'Csrf-Token': '@play.filters.csrf.CSRF.getToken.map(_.value)'
    },
    data: {
        name: '@name'
    },
    success: function (data, textStatus, jqXHR) {
        location.reload();
    },//I don't know what to put here
    error: function (jqXHR, textStatus, errorThrown) {
        debugger;
    }
});
</script>

【问题讨论】：

您能否使您的代码清晰易读……您的问题是什么？控制台出错？
控制台错误是：访问 XMLHttpRequest at 'localhost/app1/distributionboxdata/1' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested资源。
我尝试使用csrf_token解决ajax的跨域问题
看起来你只需要修复服务器上的 CORS 标头。
如果您的网页是使用file:/// 协议加载的，那么您可能无法轻松修复CORS

标签： javascript html django ajax

【解决方案1】：

用于获取 csrf 令牌

 <script>
        function getCookie(cname) {
            var name = cname + "=";
            var ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i];
                while (c.charAt(0) == ' ') {
                    c = c.substring(1);
                }
                if (c.indexOf(name) == 0) {
                    return c.substring(name.length, c.length);
                }
            }
            return;
        }
        </script>

在ajax调用中

     $.ajax({
                url: '/app1/distributionboxdata/1',
                type: 'POST',
                data: data,

                headers: {"X-CSRFToken": getCookie('csrftoken')},

                success: function (data) {

                   console.log("");
                },
})

【讨论】：

【解决方案2】：

您调用的 API 应该是跨域兼容的。您需要设置 HTTP 标头以允许从浏览器进行跨域调用，否则由于同源策略，浏览器将不允许进行此调用。如果您尝试从域调用此 API，例如“hello.com”，那么在 API 的服务器代码中，您应该将 Access-Control-Allow-Origin 的标头设置为“hello.com”，以便调用允许从该域到 API。如果设置为 * 则任何站点都可以调用此 API，不推荐使用。

【讨论】：