### 解决方案 在 Django 开发过程中，使用 `runserver_plus` 进行开发服务器的启动并结合 Vue.js 部署时，可能会因为 SSL 证书问题而触发浏览器风险页面提示。这种现象通常是由于自签名证书未被信任所导致。以下是详细的解决方案： #### 1. 自定义生成可信的 SSL 证书 默认情况下，`runserver_plus` 使用临时生成的自签名证书来启用 HTTPS 功能。然而，大多数现代浏览器会识别此类证书为不可信，并向用户显示警告页面。为了消除这一问题，可以手动创建受信任的本地测试证书[^1]: - **生成私钥和公钥** ```bash openssl req -newkey rsa:2048 -nodes -keyout domain.key -x509 -days 365 -out domain.crt ``` 在此命令执行期间，需填写一些基本信息（如国家、省份、城市等），其中最重要的是 Common Name 字段应填入目标主机名（例如 localhost 或具体的 IP 地址）。 - **将新证书应用至 runserver_plus** 随后，在运行 `runserver_plus` 时指定刚刚生成的 `.crt` 文件作为认证文件： ```bash python manage.py runserver_plus --cert domain.crt 127.0.0.1:8000 ``` #### 2. 将自签证书加入操作系统信任列表 为了让浏览器接受自签名证书而不弹出警告，可将其导入系统的根证书存储区[^2]。不同平台的操作方法如下： - **Windows**: 导入步骤可通过控制面板 -> Internet Options -> Content Tab 下的信任管理器完成。 - **macOS/Linux**: 对于 macOS 用户而言，双击 .crt 文件并通过钥匙串访问程序添加；Linux 则依据发行版有所不同，一般涉及更新 `/etc/ssl/certs` 路径下的 CA 存储。 #### 3. 配置 Vue 应用忽略 HTTPS 不安全警告 尽管解决了后端服务层面的问题，前端框架也可能存在类似的校验逻辑。对于基于 Node.js 构建工具链上的 Vue CLI，默认会对非正式渠道颁发的 TLS 凭证发出告警。可以通过修改其配置抑制这类行为[^3]: 编辑 vue.config.js 添加以下内容: ```javascript module.exports = { devServer: { https: true, disableHostCheck: true, // 禁止主机检查以防额外错误干扰 } }; ``` 另外注意同步调整 axios 请求实例或者其他 HTTP 客户端库的相关选项以适配新的 API URL 方案。 --- ### 总结 综上所述，要彻底解决 Django + Vue 整合场景下由 SSL 引起的风险页面提醒难题，主要从三个方面入手：一是构建可靠的本地测试环境所需的安全连接机制即定制化 SSL/TLS 认证材料；二是让客户端设备认可这些自制凭证从而避免拦截；最后还需兼顾前端工程体系内部潜在的影响因素予以适当调节优化用户体验流程。 --- ### 示例代码片段 #### 创建证书 ```bash openssl req -newkey rsa:2048 -nodes -keyout domain.key -x509 -days 365 -out domain.crt ``` #### 启动 Django Server ```bash python manage.py runserver_plus --cert domain.crt 127.0.0.1:8000 ``` #### Vue Configuration ```javascript module.exports = { devServer: { https: true, disableHostCheck: true, } }; ``` ---