登录网站并使用 jQuery 和 JSON

Question

我有一个信息屏幕解决方案，其中计算机有一个本地存储的 HTML 页面，该页面将外部模板（包括功能性 Javascript 等）加载到浏览器中。

这个页面是本地的原因是如果在没有网络连接的情况下启动计算机，或者例如。服务器宕机，过一段时间再试。

但是，有时这台电脑需要登录，所以我传递了登录凭据，并返回了一个 cookie。

<script type="application/javascript">
    url = "http://192.168.1.27:9000/carousel/1/template?user=test&password=test";

    function loadTemplate() {
        $( "#error" ).html("Loading...");
        $( "#message" ).html("");
        $('body').load(url, function( response, status, xhr ) {
            if ( status == "error" ) {
                $( "#error" ).html("<h3>Sorry but there was an error:<br/></font></h3>" + " Description: " + xhr.statusText + " (" + xhr.status + ")");
            }
        });
    }
</script>

但是，在后续请求（作为此模板加载的一部分）中，此 cookie 似乎没有被传递。

我尝试加载使用：

$.ajax("${dataUrl.raw()}",
{
    xhrFields: {
        withCredentials: true
    }, crossDomain: true
}).done(function(data) {
});

但是他的结果出现如下错误：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://192.168.1.27:9000/carousel/1/data.json. (Reason: CORS header 'Access-Control-Allow-Origin' does not match '*').

在没有 xhrFields 的情况下加载它加载正常，但用户未登录，表明请求中未传递 cookie。我可以选择在每个数据请求中包含登录凭据，但我更愿意只在启动时执行一次并使用具有较长生命周期的 cookie。

[编辑:] 我尝试为 'Access-Control-Allow-Origin' 添加不同的值，但传入 'file://' 这似乎是从本地文件系统调用的情况下的起源不起作用，因为据说不匹配，或者铬说 t'null' 是不允许的（从技术上讲，我认为这是因为我在 'file://' 之后什么都没有。）

Answer 1

在 CORS 请求中，服务器 (http://192.168.1.27:9000) 需要允许使用发送 cookie，否则将抛出错误。要启用此功能，服务器需要响应以下 header

Access-Control-Allow-Credentials: true

您可以在此处阅读有关此 header 的更多信息：https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Access-Control-Allow-Credentials

另外，你可以从 localhost 提供这个页面吗？我不确定 file:// 如何与 CORS headers 一起玩。

此外，请确保您的服务器正在传递此 header

Access-Control-Allow-Origin: *

* 将允许任何网站，但您可以将其范围限定为单个域。

登录网站并使用 jQuery 和 JSON

Logon to a website and the use of jQuery and JSON

javascript

cookies

jquery

cross-domain