1. 场景：nginx 配置 https证书后，页面报错

Mixed Content: The page at ‘https://domain.com/api’ was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint ‘http://ip_address:port/api’. This request has been blocked; the content must be served over HTTPS.

2. 原因：

前端代码中使用的是http://ip_address:port/api，进行接口调用，而页面要求不能既有域名又有ip_address的url请求；

3. 解决办法：

统一使用域名url请求，需要下面两步：

3.1 前端调整

前端使用 https://domain.com/api ，进行接口调用；

import axios from 'axios';

// 定义接口的基础 URL
 const baseURL = 'https://onlyhuahua.online/api';

// 创建一个 axios 实例
const service = axios.create({
  baseURL: baseURL,
  timeout: 5000 // 请求超时时间
});

// 获取用户信息接口
export const getLog = () => {
  return service.get('/getLog');
};

3.2 nginx.conf 调整

添加代理：

# 前端访问 https://domain.com/api/ ,代理到后端 API ： http://ip_address:port/api/ 
location /api/ {
        # 反向代理到后端 API
        proxy_pass http://162.13.13.13:1020/api/;

        # 配置代理头
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }