如何解决React中Axios部署后自动将HTTP转为HTTPS的问题？

常见原因&对应解决办法 #

• 浏览器自动升级HTTP请求：现代浏览器为了安全，会自动把HTTPS页面里的HTTP请求转成HTTPS。可以临时在浏览器设置里关闭「仅使用HTTPS」模式测试，但这不能解决用户端问题，得从服务端或配置入手。
• 服务器强制HTTPS重定向：检查你的http://myserver.com服务器配置，比如Nginx里有没有return 301 https://$server_name$request_uri;这类重定向规则，有的话移除或调整。同时要确保服务器CORS配置允许https://mywebsite.com跨域请求，不然HTTPS客户端访问HTTP服务器会被拦截。
• Axios配置或拦截器搞的鬼：先检查项目里有没有全局Axios拦截器，会不会有代码把请求URL里的http://替换成https://了。另外可以给Axios实例加个配置，禁止自动跟随重定向：

const privateAPI = axios.create({
  baseURL: "http://myserver.com",
  maxRedirects: 0, // 禁止自动跳过重定向
  validateStatus: function (status) {
    return status >= 200 && status < 300; // 不把重定向状态当成成功请求
  }
});
privateAPI.defaults.timeout = 3000;

这样如果服务器发了HTTPS重定向，Axios不会自动跳转，你能看到具体错误，方便排查服务器问题。

• 托管平台的自动升级设置：如果你客户端部署在Vercel、Netlify这类平台，去平台设置里看看有没有开启「HTTPS自动升级」或「Force HTTPS」的选项，关掉这类会修改请求URL的配置。

内容的提问来源于stack exchange，提问作者B Thiru Yogeshwaran