Chrome 扩展将数据发布到 Rails 服务器跨域 XMLHttpRequest答案

【问题标题】：Chrome Extension Post Data to Rails Server Cross-Origin XMLHttpRequestChrome 扩展将数据发布到 Rails 服务器跨域 XMLHttpRequest
【发布时间】：2016-04-23 11:39:11
【问题描述】：

我目前正在尝试开发一个 chrome 扩展程序，该扩展程序可以将文本从 https 网页检索到我的服务器，该服务器仅处理 http。我查看了this tutorial 和这个question。

从这些，我推断出，为了让我能够跨域 xhr 工作，我需要

设置清单权限以包含我的目标网址

为此，我的权限如下所示：

"permissions": [
    "tabs", "<all_urls>"
]

我输入了特定的 url，但在我打包后不得不将它们取出并将我的更改为“”。

创建一个XMLHttpRequest到指定的url

为此，我的代码摘录如下所示：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
   if (xhr.readyState == 4 && xhr.status == 200) {
        document.getElementById("response").innerText = xhr.responseText;
        console.log(xhr.responseText);
   }
};
xhr.open("POST", MY_SERVER_URL, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(message.toString());

MY_SERVER_URL 是我反复检查过的有效网址，但由于许多原因，我无法用这个问题指定；(

message 是一个数组，其中包含我想发送到我的服务器的一系列不同消息。

打包我的扩展代码并安装它

按照 google 的 packaging guide，我已将我的文件夹打包成一个 .crx 文件并将其拖放到我的 chrome://extensions 页面中进行安装。

在我的服务器上，安装了rack cors gem。

我在服务器的 Gemfile 中有以下行：

gem 'rack-cors', :require => 'rack/cors'

然而，当我尝试将数据发送到我的服务器时，我仍然收到以下错误消息

Mixed Content: The page at MESSAGE_PARSING_URL was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint MY_SERVER_URL. This request has been blocked; the content must be served over HTTPS.

我做错了什么？我真的很感激任何帮助。谢谢：D

【问题讨论】：

标签： javascript ruby-on-rails ajax google-chrome-extension xmlhttprequest

【解决方案1】：

如果您从安全页面 (https) 的内容脚本发出不安全 (http) 请求，则会收到 Mixed Content 错误。
你有 3 个选项来解决这个问题：

从内容脚本向您的服务器发出安全请求
仍然使用不安全的请求，但从后台脚本发出。并使用message passing 将结果传递给您的内容脚本
使用 --allow-running-insecure-content 标志启动 chrome。但这不是一个实用的解决方案，仅对开发有用（当您的登台位于 http 上时）。

【讨论】：

【解决方案2】：

您应该为您的服务器申请证书并改用 https。根据W3C Recommendation for Cross-Origin Resource Sharing：

列入黑名单的资源的来源。

已知资源的来源是 Intranet 的一部分。

不支持 URL 。

不允许使用 https 到 http。

由于证书错误，不允许使用 https

【讨论】：