求助：Nuxt.js线上环境出现Mixed Content错误，本地运行正常

问题核心 #

报错原因很明确：线上页面通过HTTPS协议加载，但Axios请求的API接口用的是HTTP协议，浏览器出于安全策略会拦截这种混合内容请求；本地环境是HTTP页面请求HTTP接口，所以不会触发该限制。

另外你的Axios配置存在问题：重复定义了axios配置项，后一个会覆盖前一个，导致proxy: true的配置根本没生效。

具体解决方案 #

方案1：使用Nuxt代理（推荐，无需修改后端） #

通过Nuxt的代理功能，让前端请求同域名的HTTPS路径，再由Nuxt服务器转发到后端的HTTP接口，浏览器只会看到HTTPS请求，彻底避免混合内容错误。

修改nuxt.config.js的配置：

export default {
  // 合并Axios配置，避免重复定义
  axios: {
    proxy: true,
    baseURL: '/api' // 前端请求的根路径
  },
  // 配置代理规则
  proxy: {
    '/api/': {
      target: 'http://x.xxx.x1.xxx:x000/api/v1', // 你的后端API地址
      pathRewrite: { '^/api': '' }, // 移除请求路径中的/api后转发到目标地址
      changeOrigin: true // 解决跨域和主机头匹配问题
    }
  }
}

之后前端发起请求时，直接使用相对路径：

this.$axios.get('/users/slots?type=NIGHT&duration=')

方案2：后端启用HTTPS #

如果你的后端支持配置HTTPS，直接把Axios的baseURL改成HTTPS协议地址，同时修复重复配置问题：

export default {
  axios: {
    baseURL: 'https://x.xxx.x1.xxx:x000/api/v1' // 替换为后端的HTTPS地址，注意端口是否对应
  }
}

注意：确保后端的HTTPS证书是有效可信的，否则浏览器依然会拦截请求。

方案3：区分本地/线上环境 #

通过环境变量配置不同的Axios规则，本地直接请求HTTP接口，线上用代理或HTTPS：

export default {
  axios: {
    proxy: process.env.NODE_ENV === 'production', // 仅线上环境启用代理
    baseURL: process.env.NODE_ENV === 'development' 
      ? 'http://x.xxx.x1.xxx:x000/api/v1' // 本地直接请求HTTP接口
      : '/api' // 线上走代理路径
  },
  proxy: {
    '/api/': {
      target: 'http://x.xxx.x1.xxx:x000/api/v1',
      pathRewrite: { '^/api': '' },
      changeOrigin: true
    }
  }
}

内容的提问来源于stack exchange，提问作者Being MR.G