HTTPS前端无法向HTTP后端发送Axios请求（MERN栈）

你遇到的是浏览器的混合内容安全限制——HTTPS页面不允许发起HTTP请求，这是Chrome等现代浏览器的强制安全策略，目的是防止数据被窃听或篡改，没法让普通用户禁用这个限制（强行让用户改浏览器设置不现实，也不安全）。下面给几个可行的解决办法：

方案1：给后端配置HTTPS（推荐） #

这是最合规的解决方案，让后端也使用HTTPS协议，和前端协议统一：

• 可以用免费的Let's Encrypt证书给后端服务器配置SSL，步骤大致如下：
  1. 在后端服务器安装certbot工具
  2. 申请并部署SSL证书
  3. 修改后端服务监听HTTPS默认端口443，或通过Nginx反向代理处理HTTPS请求转发
• 之后把REACT_APP_SERVER_URL改成后端的HTTPS地址（比如https://your-backend-domain.com），请求即可正常发送。

方案2：用反向代理转发请求 #

如果暂时不想给后端配HTTPS，可以通过反向代理把前端的HTTPS请求转发到后端的HTTP服务：

若前端部署在Netlify #

在项目根目录创建_redirects文件，添加转发规则：

/api/*  http://0.00.000.00/:splat  200

同时修改Axios的baseURL为相对路径：

export const $api = axios.create({
    withCredentials: true,
    baseURL: '/api'
})

这样前端发起的https://your-netlify-domain/api/test请求会被Netlify转发到http://0.00.000.00/test，规避混合内容问题。

若用Nginx做反向代理 #

配置Nginx的server块：

server {
    listen 443 ssl;
    server_name your-frontend-domain.com;

    # SSL证书路径配置
    ssl_certificate /path/to/your/cert.pem;
    ssl_certificate_key /path/to/your/key.pem;

    # 代理后端请求
    location /api/ {
        proxy_pass http://0.00.000.00/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    # 前端静态文件托管
    location / {
        root /path/to/frontend/dist;
        try_files $uri $uri/ /index.html;
    }
}

同样修改Axios的baseURL为/api即可。

方案3：本地开发临时关闭限制（仅个人测试用） #

如果你只是本地开发测试需要，不想改动后端，可以临时关闭Chrome的混合内容拦截：

1. 在Chrome地址栏输入chrome://flags/#allow-insecure-localhost
2. 将Allow invalid certificates for resources loaded from localhost设置为Enabled
3. 重启Chrome
   或者启动Chrome时添加命令行参数：

chrome.exe --allow-running-insecure-content

注意：此方法仅适合个人本地测试，线上项目绝对不能依赖这个方案。

内容的提问来源于stack exchange，提问作者Unnamed.dev