深圳网页设计机构_网页ui设计师培训_seo排名优化联系13火星软件_谷歌关键词搜索

前端代码写死了访问后端的请求为：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 Errorat 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响应

最后也是成功登录了