本地开发遇到的CSP策略陷阱：为什么IP访问空白而localhost正常？问题描述在最近的本地开发过程中，我遇到了一个

问题描述在最近的本地开发过程中，我遇到了一个奇怪的现象：当使用http://172.16.80.102:9010/通过IP地址访问服务时页面完全空白，而使用http://localhost:9010/却能正常加载。经过代码审查，发现页面中设置了如下元标签：

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

定位问题通过浏览器开发者工具检查网络请求时发现两个关键现象：

使用IP地址访问时，控制台出现大量blocked:mixed-content警告
所有资源请求的协议头都变成了https://
实际网络请求显示net::ERR_SSL_PROTOCOL_ERROR

进一步分析CSP策略的执行逻辑： • upgrade-insecure-requests指令会强制升级所有HTTP请求到HTTPS

• localhost在浏览器安全模型中属于可信源（Trusted Origin）

• 172.16.80.102作为普通IP地址，不被视为安全上下文（Secure Context）

解决方案临时解决方案（开发环境）：

# 移除CSP元标签（适用于本地开发）
sed -i '/upgrade-insecure-requests/d' index.html

长期解决方案（生产适配）：

配置本地HTTPS环境

// 基于webpack的配置示例
module.exports = {
    devServer: {
        https: {
            key: fs.readFileSync('./cert/localhost.key'),
            cert: fs.readFileSync('./cert/localhost.crt')
        }
    }
}

环境感知策略配置

<!-- 开发环境禁用CSP -->
<% if (process.env.NODE_ENV === 'production') { %>
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<% } %>

知识点总结

安全上下文分级： • 顶级安全源：https://、localhost、*.localhost

• 非安全源：IP地址、普通HTTP域名

CSP执行优先级：

graph TD
A[HTTP响应头CSP] -->|最高优先级| B[执行策略]
C[Meta标签CSP] -->|次优先级| B
D[浏览器默认策略] -->|最低优先级| B

HTTPS本地化实践： • 使用mkcert创建可信证书

mkcert -install
mkcert localhost 127.0.0.1 ::1

• Chrome强制HTTPS策略：

chrome://flags/#unsafely-treat-insecure-origin-as-secure

思考：可以在构建工具中预设环境检测逻辑，通过process.env变量自动切换CSP策略，确保开发体验与生产安全性的平衡。对于需要多设备联调的情况，更推荐使用localtunnel等工具生成HTTPS代理地址，避免直接暴露HTTP服务。