Capacitor混合内容错误：不安全XMLHttpRequest端点问题如何解决？

这个错误的触发逻辑很明确：当你用Capacitor构建的应用，向HTTP协议的服务器发起XMLHttpRequest（比如GET请求）时，就会触发该混合内容错误。原因是Capacitor基于的WebView遵循现代浏览器的安全规范，默认禁止HTTPS环境下加载HTTP资源的不安全行为。

下面是几种可行的解决办法：

• 生产环境首选：把服务器换成HTTPS
  这是最合规且安全的方案。可以用Let's Encrypt这类工具免费获取SSL证书，配置到你的服务器上，之后把请求地址从http://xxx改成https://xxx即可。

• 开发环境临时方案：修改Capacitor安全配置
  本地测试不想折腾HTTPS的话，可修改capacitor.config.ts（或capacitor.config.json），添加服务器配置来放宽安全限制：

  import { CapacitorConfig } from '@capacitor/cli';
  
  const config: CapacitorConfig = {
    appId: 'com.your.app',
    appName: 'YourApp',
    webDir: 'dist',
    server: {
      cleartextTrafficEnabled: true, // 允许明文HTTP请求
      allowNavigation: ['http://192.168.x.x:3000'] // 替换成你的本地服务器地址
    }
  };
  
  export default config;
  

  注意：这个配置绝对不能用于生产环境，会导致应用暴露在安全风险中。

• 开发环境另一种选择：用前端代理转发请求
  在你的前端开发服务器（比如Vite、Webpack）里配置代理，把前端的HTTPS请求转发到HTTP服务器，避免混合内容问题。比如Vite的vite.config.ts配置示例：

  import { defineConfig } from 'vite';
  
  export default defineConfig({
    server: {
      proxy: {
        '/api': {
          target: 'http://localhost:8080', // 你的HTTP服务器地址
          changeOrigin: true,
          secure: false // 允许代理到非HTTPS目标
        }
      }
    }
  });
  

  之后前端代码里请求/api/xxx，就会被自动转发到http://localhost:8080/api/xxx，不会触发错误。

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