The page at https://www.dfer.top/ was not allowed to run insecure

本文探讨了HTTPS的安全机制,特别关注了开启HTTPS后不安全URL被屏蔽的情况。此外,文章还介绍了如何通过浏览器设置禁用特定的跨源访问限制。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  • https的安全机制,对于开启了https的站点,不安全的网址调用会被屏蔽
  • cnzz的统计功能在https下会被屏蔽
  • 在safari的开发菜单里开启“停用跨源限制”可以禁用该限制
### Nginx 配置支持前端 H5 页面访问及反向代理到后端服务 为了实现 Nginx 支持前端 H5 页面的正常访问以及通过反向代理将 API 请求发送至后端服务,可以通过以下方式完成配置: #### 前端静态资源加载 Nginx 能够高效地提供静态文件的服务。对于纯前端项目(HTML + JS),需要指定项目的根目录并设置默认索引文件。以下是基本配置示例[^3]: ```nginx server { listen 80; server_name your-domain.com; # 设置前端项目的根目录 root /path/to/frontend/dist; # 默认首页文件 index index.html; # 当请求未匹配任何location时返回index.html (适用于单页应用SPA) location / { try_files $uri /index.html; } } ``` 上述配置中 `try_files` 的作用在于处理 SPA 应用中的路由问题。如果用户直接访问某个子路径(如 `/about` 或 `/contact`),由于这些路径实际上是由前端框架管理而非真实存在的文件,因此需要将其重定向回 `index.html`。 #### 后端接口反向代理 为了让前端能够无跨域障碍地调用后端接口,需在 Nginx 中定义一个专门用于转发 API 请求的 `location` 条目。例如,假设所有的 API 接口都以前缀 `/api/` 开始,则可按如下方式进行配置[^1]: ```nginx server { listen 80; server_name your-domain.com; # 前端部分保持不变... # 定义API请求的反向代理规则 location /api/ { proxy_pass http://backend-server-url/; # 添加必要的头信息以确保正确通信 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-NginX-Proxy true; # 解决WebSocket连接问题(如果有需求的话) proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; } # 错误页面或其他额外配置项可根据实际情况补充 error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } ``` 此段代码设置了针对 `/api/` 路径下的所有请求都将被转发给 `http://backend-server-url/` 处理,并附加了一些常用的 HTTP Header 参数来增强兼容性和安全性[^4]。 #### 实际案例分析 下面是一个更具体的例子,展示了一个完整的 Nginx 配置文件片段,其中包含了 HTML 文件的位置设定、错误页面指向以及对特定 URL 模式的反向代理操作[^5]: ```nginx server { listen 82; server_name localhost; # 前端静态资源配置 location / { root /usr/soft/nginx/html/threephone; index index.html index.htm; } # 对/prod-api/开头的URL做反向代理 location /prod-api/ { proxy_pass http://ip:8080/; } # 自定义错误页面位置 error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } ``` 以上实例展示了如何在一个简单的场景下同时满足前端页面显示和后端数据交互的需求。 ### 注意事项 - 确保所指代的物理路径 (`root`) 存在并且有读取权限。 - 如果涉及到 HTTPS 加密传输,请记得启用 SSL/TLS 并相应调整监听端口号为 443 和证书相关参数。 - 测试完成后建议重启 Nginx 使更改生效:`sudo systemctl restart nginx` 或者 `nginx -s reload`.
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值