使用相对路径时，如何解决JavaScript fetch()的协议不一致及混合内容错误？

问题根因 #

页面明明是通过https://domain.name加载的，但使用/api/example这类相对路径发起fetch请求时，浏览器却自动解析为http://domain.name/api/example，触发了混合内容（Mix Content）错误。这种情况大概率是服务器配置存在问题，比如错误设置了HTTPS请求强制跳转至HTTP的规则，或是页面运行环境中有异常的URL解析逻辑干扰了协议继承。

可行解决方案 #

1. 复用当前页面协议拼接路径（不写死完整绝对URL） #

不用硬编码https://，直接提取当前页面的协议和主机地址拼接请求路径，既满足“不使用绝对URL”的要求，又能保证协议一致：

fetch(`${window.location.protocol}//${window.location.host}/api/example`, {
    method: 'POST', 
    body: JSON.stringify({"x":"x"}),
}).then((response)=>{})

这里只是复用了当前页面的协议与域名，没有固定写死完整的绝对URL，完全符合需求。

2. 修正服务器配置（根治问题） #

如果服务器存在将HTTPS请求强制降级为HTTP的规则（比如Nginx/Apache的重定向配置错误），需要针对性修改：

• Nginx：检查配置文件，删除HTTPS跳转至HTTP的规则，同时确保SSL证书配置正常；
• Apache：查看.htaccess或主配置文件中的重定向规则，移除导致协议降级的逻辑。

3. 使用相对协议写法 #

还有一种更简洁的方式，直接省略协议部分，浏览器会自动继承当前页面的协议发起请求：

fetch('//domain.name/api/example', {
    method: 'POST', 
    body: JSON.stringify({"x":"x"}),
}).then((response)=>{})

这种写法没有硬编码http或https，会自动匹配页面的协议，有效避免混合内容错误。

注意事项 #

混合内容错误是浏览器的安全限制机制，HTTPS页面不允许加载任何HTTP资源，必须保证请求协议与页面协议完全一致。如果相对路径本该自动继承HTTPS却未生效，优先排查服务器的重定向或反向代理配置，这是最常见的问题根源。

内容的提问来源于stack exchange，提问作者Chetchaiyan