Ajax 调用在 HTTPS 上被阻止 - Chrome 扩展

Posted 2023-02-25

【中文标题】Ajax 调用在 HTTPS 上被阻止 - Chrome 扩展

【英文标题】：Ajax call blocked on HTTPS - Chrome Extension

【发布时间】：2017-09-08 21:55:32

【问题描述】：

我正在编写一个扩展程序，它应该在特定游戏收到更新时通知用户。数据来自 mysql 数据库。

我进行了 ajax 调用来接收 json 数据，由我的 localhost 服务器上的 php 脚本提供（用于测试目的）。

嗯，它在 HTTP 网站上运行良好。但是该脚本被 HTTPS 网站阻止。

消息是“此页面正在尝试从未经身份验证的来源加载脚本”，这会导致来自 Google 的此故障排除页面： Link

有什么建议吗？

清单：

"manifest_version": 2,
"name": "Extension",
"version": "1.0",
"icons": 
    "128": "icon128.png",
    "48": "icon48.png",
    "16": "icon16.png"
,
"page_action": 
    "default_icon": "icon16.png",
    "default_popup": "popup.html"
,
"background":
    "scripts" : ["eventPage.js"],
    "persistent": false
,
"content_scripts": [
    
        "matches": ["<all_urls>"],
        "js": ["content.js", "jquery-3.2.0.min.js"],
        "css": ["content.css"],
        "run_at": "document_start",
        "match_about_blank": true   
    
],
"permissions": [
    "notifications", "http://localhost/*", "tabs"
]

eventPage.js

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) 

chrome.tabs.query(active: true, currentWindow: true, function(tabs)
    chrome.tabs.sendMessage(tabs[0].id, todo: "displayNews");
);
);

content.js

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
if (request.todo == "displayNews")
    $.ajax(
        url: 'http://localhost/database/connect.php',
        type:'POST',
        dataType: 'json',
        success: function(output_string)
                alert(output_string[1].url);
            ,
                error: function (xhr, ajaxOptions, thrownError)
                alert(xhr.statusText);
                alert(thrownError);
                
    );
 //Some other code is executed here
);

【问题讨论】：

You may find this site helpful

不允许 HTTPS 站点对 HTTP API 进行 AJAX 调用。您需要在本地主机上实现 HTTPS 服务器。

【参考方案1】：

根据 Barmar 的评论，我必须将 localhost 配置为 HTTPS - 这就是问题所在。

这是如何使用 XAMPP 归档的答案：How do I use https (SSL) in XAMPP while using virtual hosts

如果 Apache 服务器没有启动，您必须在 httpd.conf 文件中取消注释此行： LoadModule ssl_module modules/mod_ssl.so