Javascript 在 HTTPS 页面中运行 HTTP AJAX 操作时“混合内容被阻止”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33507566/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
"Mixed content blocked" when running an HTTP AJAX operation in an HTTPS page
提问by StormRage
I've a form which I'm submitting (through GET as it is required this way) to a crm (ViciDial). I can successfully submit the form however if I do that the processing file at crm will just echo a success text and that's it.
我有一个表单，我正在向 crm (ViciDial) 提交（通过 GET，因为它需要这种方式）。我可以成功提交表单，但是如果我这样做，crm 处的处理文件只会回显成功文本，仅此而已。
Instead of that text, I want to display a thank-you page on my website, so I decided to use AJAX to submit the form and redirect it to the page I need, however I'm getting this error on my browser:
我想在我的网站上显示一个感谢页面而不是那个文本，所以我决定使用 AJAX 提交表单并将其重定向到我需要的页面，但是我在浏览器上收到此错误：
Mixed Content: The page at 'https://page.com' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://XX.XXX.XX.XXX/vicidial/non_agent_api.php?queries=query=data'. This request has been blocked; the content must be served over HTTPS.
混合内容：“ https://page.com”页面已通过 HTTPS 加载，但请求了不安全的 XMLHttpRequest 端点“ http://XX.XXX.XX.XXX/vicidial/non_agent_api.php?queries=query=data'。此请求已被阻止；内容必须通过 HTTPS 提供。
This is my AJAX script:
这是我的 AJAX 脚本：
<script>
SubmitFormClickToCall = function(){
jQuery.ajax({
url: "http://XX.XXX.XX.XX/vicidial/non_agent_api.php",
data : jQuery("#form-click-to-call").serialize(),
type : "GET",
processData: false,
contentType: false,
success: function(data){
window.location.href = "https://www.example.com/thank-you";
}
});
}
</script>
Just setting https in the URL won't work, is there any way in which I can submit the data via GET and redirect the user to my thankyou page?
仅在 URL 中设置 https 不起作用，有什么方法可以通过 GET 提交数据并将用户重定向到我的感谢页面？
============================
============================
Problem here was mixed content, this means that I loaded a page through HTTPS and was trying to hit via AJAX an API that was in HTTP. But the browser wont allow us to just do that.
这里的问题是混合内容，这意味着我通过 HTTPS 加载了一个页面，并试图通过 AJAX 访问 HTTP 中的 API。但是浏览器不允许我们这样做。
So if you can't set the API to be HTTPS (this was my case) we can still approach this in a different way.
因此，如果您不能将 API 设置为 HTTPS（这是我的情况），我们仍然可以以不同的方式处理此问题。
The Main Problem was not the mixed content issue it was that I wanted to submit data to an API and redirect the users to a fancy thank you page. Instead of using AJAX, i made a php file that receives the data sends it using curl to the API (as this is being done server side there is no mixed content issue) and redirects my happy user to a fancy thank you page.
主要问题不是混合内容问题，而是我想将数据提交到 API 并将用户重定向到一个漂亮的感谢页面。我没有使用 AJAX，而是制作了一个接收数据的 php 文件，使用 curl 将其发送到 API（因为这是在服务器端完成的，没有混合内容问题）并将我的快乐用户重定向到一个漂亮的感谢页面。
采纳答案by Mikel Bitson
If you load a page in your browser using HTTPS, the browser will refuse to load any resources over HTTP. As you've tried, changing the API URL to have HTTPS instead of HTTP typically resolves this issue. However, your API must not allow for HTTPS connections. Because of this, you must either force HTTP on the main page or request that they allow HTTPS connections.
如果您使用 HTTPS 在浏览器中加载页面，浏览器将拒绝通过 HTTP 加载任何资源。正如您所尝试的那样，将 API URL 更改为使用 HTTPS 而不是 HTTP 通常可以解决此问题。但是，您的 API 不得允许 HTTPS 连接。因此，您必须在主页上强制使用 HTTP 或请求它们允许 HTTPS 连接。
Note on this: The request will still work if you go to the API URL instead of attempting to load it with AJAX. This is because the browser is not loading a resource from within a secured page, instead it's loading an insecure page and it's accepting that. In order for it to be available through AJAX, though, the protocols should match.
请注意：如果您转到 API URL 而不是尝试使用 AJAX 加载它，该请求仍然有效。这是因为浏览器不是从安全页面中加载资源，而是加载不安全页面并接受它。但是，为了通过 AJAX 使用它，协议应该匹配。
回答by Sky
I resolved this by adding following code to the HTML page, since we are using the third party API which is not controlled by us.
我通过向 HTML 页面添加以下代码解决了这个问题，因为我们使用的是不受我们控制的第三方 API。
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
Hope this would help, and for a record as well.
希望这会有所帮助，并为记录。
回答by Juanma Menendez
If you are just visiting a webpage that you trust and you want to move forward fast, just:
如果您只是在访问您信任的网页并且想要快速前进，只需：
1- Click the shield icon in the far right of the address bar.
1- 单击地址栏最右侧的盾牌图标。
2- In the pop-up window, click "Load anyway" or "Load unsafe script" (depending on your Chrome version).
2- 在弹出窗口中，单击“仍然加载”或“加载不安全的脚本”（取决于您的 Chrome 版本）。
If you want to set your Chrome browser to ALWAYS(in all webpages) allow mixed content:
如果要将 Chrome 浏览器设置为始终（在所有网页中）允许混合内容：
1- In an open Chrome browser, press Ctrl+Shift+Q on your keyboard to force close Chrome. Chrome must be fully closed before the next steps.
1- 在打开的 Chrome 浏览器中，按键盘上的 Ctrl+Shift+Q 强制关闭 Chrome。在下一步之前必须完全关闭 Chrome。
2- Right-click the Google Chrome desktop icon (or Start Menu link). Select Properties.
2- 右键单击 Google Chrome 桌面图标（或开始菜单链接）。选择属性。
3- At the end of the existing information in the Target field, add: " --allow-running-insecure-content" (There is a space before the first dash.)
3- 在目标字段中现有信息的末尾，添加：“--allow-running-insecure-content”（第一个破折号前有一个空格。）
4- Click OK.
4- 单击确定。
5- Open Chrome and try to launch the content that was blocked earlier. It should work now.
5- 打开 Chrome 并尝试启动之前被阻止的内容。它现在应该可以工作了。
回答by Sobhan Niroula
The reason for this error is very simple. Your AJAX is trying to call over HTTP whereas your server is running over HTTPS, so your server is denying calling your AJAX. This can be fixed by adding the following line inside the head tag of your main HTML file:
这个错误的原因很简单。您的 AJAX 试图通过 HTTP 调用，而您的服务器通过 HTTPS 运行，因此您的服务器拒绝调用您的 AJAX。这可以通过在主 HTML 文件的 head 标记中添加以下行来解决：
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
回答by mcmacerson
If your API code is running on a node.jsserver then you need to focus your attention there, not in Apache or NGINX. Mikel is right, changing the API URL to HTTPS is the answer but if your API is calling a node.js server, it better be set up for HTTPS! And of course, the node.js server can be on any unused port, it doesn't have to be port 443.
如果您的 API 代码在node.js服务器上运行，那么您需要将注意力集中在那里，而不是在 Apache 或 NGINX 中。Mikel 是对的，将 API URL 更改为 HTTPS 是答案，但是如果您的 API 正在调用 node.js 服务器，最好设置为 HTTPS！当然，node.js 服务器可以在任何未使用的端口上，不必是端口 443。
回答by Proneet Ray
Instead of using Ajax Post method, you can use dynamic form along with element. It will works even page is loaded in SSL and submitted source is non SSL.
您可以将动态表单与元素一起使用，而不是使用 Ajax Post 方法。即使页面在 SSL 中加载并且提交的源是非 SSL，它也能工作。
You need to set value value of element of form.
您需要设置表单元素的值。
Actually new dynamic form will open as non SSL mode in separate tab of Browser when target attribute has set '_blank'
实际上，当目标属性设置为“_blank”时，新的动态表单将在浏览器的单独选项卡中以非 SSL 模式打开
var f = document.createElement('form');
f.action='http://XX.XXX.XX.XX/vicidial/non_agent_api.php';
f.method='POST';
//f.target='_blank';
//f.enctype="multipart/form-data"
var k=document.createElement('input');
k.type='hidden';k.name='CustomerID';
k.value='7299';
f.appendChild(k);
//var z=document.getElementById("FileNameId")
//z.setAttribute("name", "IDProof");
//z.setAttribute("id", "IDProof");
//f.appendChild(z);
document.body.appendChild(f);
f.submit()
