1. 程式人生 > >一個Https網站傳送Http的 ajax請求的解決方法

一個Https網站傳送Http的 ajax請求的解決方法

但是在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請求直接被攔截並不傳送到後臺伺服器。

解決方案如下幾種:

  1. 修改https 為 http協議,大部分不可取
  2. 修改後臺的http伺服器為https協議,並修改前端程式碼
  3. 修改前端程式碼請求地址為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了。