如何设置Angular发送HTTP请求而非自动替换为HTTPS请求

你提供的请求代码本身没有逻辑问题，拦截器拿到的请求仍为HTTP协议说明Angular框架层面没有修改请求协议，问题由浏览器规则或服务端配置导致，具体原因和修复方案如下：

问题原因 #

• 前端页面本身运行在HTTPS环境下，且存在不安全请求升级规则：
  要么是Angular 12默认生产构建时自动注入了Content-Security-Policy: upgrade-insecure-requests的meta标签，要么是部署前端的Web服务器（Nginx、Apache等）返回的响应头中携带了该CSP指令，浏览器识别到该规则后会自动把所有HTTP请求替换为HTTPS发送
• 本地开发时使用了ng serve --ssl参数启动服务，前端本身运行在HTTPS协议下，浏览器默认对混合内容请求做了升级处理
• 目标虚拟机服务端配置了301/302重定向，收到HTTP请求后强制跳转到HTTPS地址，看起来像是前端自动替换了协议，可通过浏览器开发者工具的网络Tab查看请求的初始状态码确认该情况

修复方案 #

• 排查CSP规则：
  检查项目根目录下index.html的head标签中是否有如下meta标签，有的话直接删除即可：

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

  如果是前端部署的Web服务器配置的响应头，修改服务器配置移除该CSP指令即可
• 如果是本地开发启用了SSL导致的问题：
  开发环境优先使用HTTP启动Angular服务，去掉ng serve命令后的--ssl相关参数。如果必须用HTTPS启动前端，可针对测试环境的虚拟机域名配置HTTPS访问，直接请求HTTPS地址即可
• 如果是服务端重定向导致的：
  修改虚拟机上部署的服务配置，关闭HTTP强制跳转HTTPS的规则，或者前端直接调用服务端开放的HTTPS接口地址
• 临时调试方案：
  可以在Chrome/Edge浏览器的快捷方式目标后添加参数--unsafely-treat-insecure-origin-as-secure=http://myVirtualMachine，将目标虚拟机地址标记为安全来源，即可避免自动升级

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