Netlify部署vue-cli项目出现Mixed Content混合内容错误如何解决？

问题本质 #

你遇到的报错属于混合内容拦截，优先级高于普通跨域报错：HTTPS站点下禁止主动请求HTTP资源，浏览器会直接拦截该类请求，不会走到CORS校验步骤。本地开发时站点为HTTP协议，因此不会触发该拦截。

解决方案 #

方案1：优先确认接口HTTPS支持（成本最低）

如果你的接口服务apiserver.net支持HTTPS访问，直接修改request.js中的baseURL配置即可：

// ----------in request.js--------------------
// 将原来的http协议改为https
const baseURL = 'https://apiserver.net/'

修改后重新打包部署即可解决问题。

方案2：使用Netlify自带代理功能（接口不支持HTTPS时使用）

不需要服务端控制权，利用Netlify自带的重定向代理能力即可同时解决混合内容和跨域问题，操作步骤如下：

1. 在vue项目的public目录下新建名为_redirects的无后缀文件
2. 在文件中添加如下配置：

/api/*  http://apiserver.net/:splat  200

该配置会将Netlify站点下所有/api开头的请求，自动代理转发到http://apiserver.net/对应的路径，Netlify会处理协议转换，返回给前端的内容走HTTPS协议，不会触发混合内容拦截，也不存在跨域问题。
3. 修改request.js中的baseURL配置：

const baseURL = '/api/'

4. （可选）保证本地开发环境兼容，在vue.config.js中添加开发代理配置：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://apiserver.net/',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  }
}

配置完成后重新打包部署到Netlify即可生效。

内容的提问来源于stack exchange，提问作者QIAN TANG