【问题标题】:(CORS) - Cross-Origin Resource Sharing connection issue(CORS) - 跨域资源共享连接问题
【发布时间】:2018-10-04 05:00:56
【问题描述】:

我目前正在为一个大学项目创建浏览器扩展程序。然而,当我写下扩展时,我遇到了一个非常奇怪的问题。为了完全了解我的情况,我需要用债务来描述我的问题出在哪里。

我目前正在开发的扩展程序必须具有检查浏览器是否可以连接到互联网的功能。这就是为什么我决定创建一个非常简单的 AJAX 请求函数,并根据该函数返回的结果来确定用户是否有互联网连接。

这就是为什么我创建了这个非常简单的 AJAX 函数,您可以在下面看到这一行。

$.ajax({
    url: "https://enable-cors.org/index.html",
        crossDomain: true,
    }).done(function() {
        console.log("The link is active");
    }).fail(function() {
        console.log("Please try again later.");
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

到目前为止,只要我了解它在做什么,它就可以正常工作。例如,如果您按原样运行该函数,它将成功连接到该 url 并使用“.done(function...” 如果您将 url 更改为“index273.index”一个不存在的文件它将使用“.fail(function...”进行处理。我对结果很满意,直到我决定进一步测试它并将电缆从我的计算机上拔下。然后当我启动扩展程序时,它返回了从什么时候开始的最后一个结果浏览器已与互联网连接。我的解释为什么该函数这样做是因为它正在缓存 url 结果,如果它无法连接它会给出最后一个缓存的值。我尝试解决这个问题的下一步是添加“缓存: “crossDomain:true”属性之后的false”,但之后当我启动扩展程序时,它会给出以下错误:

跨域请求被阻止:同源策略不允许读取位于https://enable-cors.org/index?_=1538599523573 的远程资源。 (原因:CORS 标头“Access-Control-Allow-Origin”缺失)。

如果有人能帮我解决这个问题,我将不胜感激。我想为我的英语提前道歉,但这不是我的母语。

PS:我正在尝试在弹出菜单中实现此功能,而不是在“content_scripts”类别中。我目前正在 Firefox v62.0.3(我写这篇文章时可用的最新版本)下对此进行测试。

最好的问候, 乔治

【问题讨论】:

    标签: javascript jquery google-chrome-extension cors firefox-addon


    【解决方案1】:

    也许您可以尝试使用 Navigator 对象,而不是调用 URL 来检查 Internet 连接是否可用:https://developer.mozilla.org/en-US/docs/Web/API/Navigator/connection

    【讨论】:

    • 目前只有 Chrome 支持,我正在寻找更通用的解决方案。
    【解决方案2】:

    除非远程服务器允许来源(允许的 cors),否则您将无法访问它,因为这是一个安全问题。

    但您还可以做其他事情:

    1. 您可以加载图像并在加载图像时触发事件
    2. 您可以通过 JSONP 响应访问远程 JSON

    但您无法访问其他页面,因为(除非该服务器允许)这是一个安全问题。

    【讨论】:

    • 本示例中使用的链接指向启用了 CORS 的服务器。否则,将不允许您加载“.done(function...”,并且您可以看到它返回“链接处于活动状态。”我认为,问题来自另一个地方。
    • 您的错误说:“(原因:CORS 标头 'Access-Control-Allow-Origin' 缺失)。”这意味着 CORS 未启用。
    • 只有在我添加“cache: false”时才会出现这个错误。如果您运行我附加的示例,您将看到一切正常。当您拔下电缆并离线尝试时,会出现奇怪的部分。据我所知,它与 CORS 无关。我提供的链接指向启用了 CORS 的服务器。