Https網站中請求Http內容
Https網站中無法請求Http資源（靜態資源、接口等）
今天遇到個問題：```Mixed Content: The page at ‘https://*****’ was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint ‘http://*****’. This request has been blocked; the content must be served over HTTPS```
突然意識到出問題的網站服務器配置了https，請求的一個接口部署的服務器爲http環境。
分析
如果一個https網站中的某個頁面內容如下，這個頁面部署在配置了https的服務器中，但是頁面加載時請求了有js、css、圖片和接口四個http協議的資源：```http://cdn.staticfile.org/animate.css/4.1.0/animate.compat.css```、```http://cdn.staticfile.org/react/16.13.1/cjs/react.development.js```、```http://ww4.sinaimg.cn/bmiddle/6910ab7bgw1egloghsfi3j20b40b40t6.jpg```、```http://getjson.cn/api/get/nkK3HHTUieWI25fA```
<html>
<head>
<meta charset="UTF-8">
<title>https-http</title>
<link href="http://cdn.staticfile.org/animate.css/4.1.0/animate.compat.css" type="text/css" >
<script src="http://cdn.staticfile.org/react/16.13.1/cjs/react.development.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<img src="http://ww4.sinaimg.cn/bmiddle/6910ab7bgw1egloghsfi3j20b40b40t6.jpg"/>
<script type="text/javascript">
const url = "http://getjson.cn/api/get/nkK3HHTUieWI25fA";
$(document).ready(function () {
$(document.body).attr('style', 'cursor:pointer;');
$.ajax({
url: url,
async: true,
success: function (result) {
try {
var jsonResult = JSON.stringify(result);
console.log(jsonResult);
} catch (err) {
console.log(err);
}
}
});
});
</script>
</body>
</html>
訪問後，控制檯報錯：Mixed Content: The page at ‘https://*****’ was loaded over HTTPS, but requested an insecure ****. This request has been blocked; the content must be served over HTTPS。加載的js和請求的接口被拒絕了，圖片可以加載出來，但是也有警告⚠️。
https地址中，如果加載了http資源，瀏覽器將認爲這是不安全的資源，將會默認阻止。
解決方法
以下情況假設不存在跨域問題
1、如果在https網站中請求的http資源本身就支持https，可以在html頁面加入<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">，瀏覽器在解析請求的時候會自動把http請求轉化爲https請求。
2、如果如果在https網站中請求的http資源本身不支持https，可以把https網站換成http協議。（當我沒說🙊）
3、如果如果在https網站中請求的http資源本身不支持https，但是請求的http資源在屬於自己的服務上（非第三方服務），並且不考慮改爲https協議帶來的性能問題，可以把要請求的http資源協議改爲https。
4、如果在https網站中請求的http資源本身不支持https，並且這些被請求的http資源都是靜態資源（比如js、css等），可以考慮把這些資源下載下來放到現有的https服務器中，也可以尋找https協議的資源，很多免費的cdn服務都同時提供了https和http協議的靜態資源。
5、如果在https網站中請求的http資源是動態資源（比如請求http接口），且是第三方接口（自己無法變更這個第三方接口是http協議的事實），可以用nginx代理的方式。
以上面分析的html爲例，在https網站中請求了一個http協議的第三方接口，可以通過讓配置了https的nginx代理那個http接口，然後讓前端訪問接口的時候先訪問nginx，nginx再訪問第三方http服務。
的搞一臺配置了https的nginx（如果沒有的話），添加proxy_pass配置：
server {
location jsonapi/ {
proxy_pass http://getjson.cn/api/;
}
}
然後前端發起請求的地址，改成nginx代理的地址
<script type="text/javascript">
const url = "nginx的地址/jsonapi/get/nkK3HHTUieWI25fA";
$(document).ready(function () {
$(document.body).attr('style', 'cursor:pointer;');
$.ajax({
url: url,
async: true,
success: function (result) {
try {
var jsonResult = JSON.stringify(result);
console.log(jsonResult);
} catch (err) {
console.log(err);
}
}
});
});
</script>
當然網頁中靜態的http資源也可以由nginx來代理：
server {
location /httpresource {
proxy_pass http://cdn.staticfile.org/;
}
}
然後前端請求靜態資源的地址，改成nginx代理的地址
<head>
<meta charset="UTF-8">
<title>https-http</title>
<link href="nginx的地址/httpresource/animate.css/4.1.0/animate.compat.css" type="text/css" >
<script src="nginx的地址/httpresource/react/16.13.1/cjs/react.development.js"></script>
</head>