一個Https網站傳送Http的 ajax請求的解決方法
阿新 • • 發佈:2019-01-08
但是在https網站內傳送http的ajax請求報錯如下
可以看到是在https://127.0.0.1 請求http://kafka1:8080/api/hello便失敗。並且報錯
Mixed Content: The page at ‘https://127.0.0.1/’ was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint ‘http://kafka1:8080/api/hello’. This request has been blocked; the content must be served over HTTPS.
大致意思就是https網站內不可以傳送http請求,並且http請求直接被攔截並不傳送到後臺伺服器。
解決方案如下幾種:
- 修改https 為 http協議,大部分不可取
- 修改後臺的http伺服器為https協議,並修改前端程式碼
- 修改前端程式碼請求地址為nginx地址,使用當前https伺服器對應的nginx轉發前端https請求傳送到後臺http伺服器,從而不用修改http伺服器。
如第三種方案
首先我的hosts如下
127.0.0.1 kafka1
nginx配置如下:
# 配置後臺伺服器地址 upstream kafka1{ ip_hash; server 127.0.0.1:8080; } server { listen 443 ssl; server_name kafka1; ssl_certificate shfqcert.cer; ssl_certificate_key cert.key; ssl_session_cache shared:SSL:1m; ssl_session_timeout 5m; ssl_ciphers HIGH:!aNULL:!MD5; ssl_prefer_server_ciphers on; location / { root html; index index.html index.htm; proxy_redirect off; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; # 轉發到後臺伺服器 proxy_pass http://kafka1; proxy_buffer_size 8k; proxy_buffers 64 32k; } }
然後前端可以傳送請求之後,後臺如果沒有做跨域處理的話需要修改響應的請求頭。
服務端需要設定響應頭Access-Control-Allow-Origin
為*
或者當前訪問後端伺服器的地址
如當前我這裡是這個訪問地址是https://localhost/
如 SpringMVC
的 @CrossOrigin("https://localhost")
,每個語言的都不盡相同,但都是響應頭新增Access-Control-Allow-Origin
罷了
然後就ok了。