当前位置：首页 > news >正文

解决浏览器报错Mixed Content

news 来源：原创 2025/6/23 20:14:41

前端代码写死了访问后端的请求为：http://service.xxx.com:8080/api/，前端代码中混合内容（Mixed Content） 导致的。浏览器使用https访问站点时，这个请求会被拦截，并且浏览器打印

在这里插入图片描述

login.vue:151 Mixed Content: The page at 'https://123.123.123.123/#/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://service.xxx.com/battery_admin/user/open/login'. This request has been blocked; the content must be served over HTTPS.
（匿名） @ xhr.js:172
e.exports @ xhr.js:11
e.exports @ dispatchRequest.js:57
Promise.then（异步）
XmWM.l.request @ Axios.js:53
l.<computed> @ Axios.js:78
（匿名） @ bind.js:9
submitForm @ login.vue:151
click @ login.vue:1
Ve @ vue.esm.js:1863
n @ vue.esm.js:2188
a._wrapper @ vue.esm.js:7559
显示另外 9 个框架
收起
login.vue:221 Error: Network Error
    at FtD3.e.exports (createError.js:16:1)
    at h.onerror (xhr.js:81:1)

2.解决方法：通过Nginx添加以下响应头强制升级不安全请求：

server {
  listen 443 ssl;
  server_name XX.COM;
  ssl_certificate   cert/7687638_service.XX.com.pem;
  ssl_certificate_key  cert/7687638_service.XX.com.key;
  add_header Content-Security-Policy "upgrade-insecure-requests";

3.解决原理

Browser->>Nginx: 1. 访问HTTPS页面 (https://47.113.99.62)
Nginx-->>Browser: 2. 返回响应头: Content-Security-Policy: upgrade-insecure-requests
Browser->>Browser: 3. 自动替换所有http://为https://
Browser->>Nginx: 4. 发送升级后的HTTPS请求 (https://service.lvwoxunhuan.com)
Nginx->>Backend: 5. 代理转发HTTP请求 (http://admin)
Backend-->>Nginx: 6. 返回响应
Nginx-->>Browser: 7. 返回HTTPS响应

最后也是成功登录了

在这里插入图片描述