如何在Android模拟器指定端口运行Ionic 5应用以解决CORS问题

我之前开发Ionic应用时完全踩过这个坑！你遇到的问题核心很明确：ionic cordova run android默认不是通过Ionic开发服务器（dev server）运行应用的，所以你加的--port=4200参数根本不会生效——模拟器里的应用本质是打包后的本地资源，请求的origin是http://localhost（不带端口），和你API允许的localhost:4200不匹配，自然触发CORS错误。

下面给你几个靠谱的解决办法，按推荐程度排序：

• 配置Cordova代理（最推荐，适合开发+生产）
  这是官方推荐的绕过CORS的方式，原理是让应用的API请求通过Cordova内置的代理转发到目标API，完全避开浏览器的CORS校验。

  • 第一步：修改项目根目录的config.xml，添加导航权限和主机配置：

    <!-- 允许应用导航到任意地址（开发环境没问题，生产可以限制） -->
    <allow-navigation href="*" />
    <!-- 配置scheme和hostname，确保代理生效 -->
    <preference name="scheme" value="http" />
    <preference name="hostname" value="localhost" />
    

  • 第二步：修改ionic.config.json，添加代理规则，把你的API路径映射到真实地址：

    "proxies": [
      {
        "path": "/api",
        "proxyUrl": "https://你的真实API地址"
      }
    ]
    

    比如你原来的API请求是https://api.example.com/get-data，现在改成/api/get-data，Cordova会自动帮你转发到真实地址。

• 启用Live Reload模式（仅适合开发调试）
  如果你只是想快速调试，不想改代码结构，可以用Live Reload模式运行——这时候应用会通过你电脑上的Ionic dev server加载，端口参数终于能生效了：

  ionic cordova run android --livereload --port=4200
  

  这样模拟器里的应用origin就是http://localhost:4200，正好匹配你API的CORS配置，CORS错误直接消失。不过这个模式只适合开发阶段调试，发布正式应用时还是得用第一种代理方法。

• 修改API的CORS配置（备选）
  如果你有权限修改API的话，可以在开发环境下把http://localhost加入允许的origin列表，或者临时允许所有origin（注意生产环境绝对不能这么做，会有安全风险）：

  Access-Control-Allow-Origin: http://localhost
  或者开发环境临时用：Access-Control-Allow-Origin: *
  不过这个方法不太灵活，毕竟你可能不想因为本地调试就改动API的全局配置，所以优先推荐前两种方法。

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