Ionic 3 iOS设备CORS错误：无法访问REST API

我来帮你搞定这个困扰！首先咱们先理清楚问题：你在Ionic 3 iOS构建版本里遇到的CORS错误，本质是因为原生WebView发起请求时，你的API服务器没有返回允许跨域的响应头，而且控制台里显示的Origin localhost:8080，说明你可能还在使用本地开发服务器的地址，这在原生app环境里是不适用的。

下面给你几个靠谱的解决方案，按优先级推荐：

1. 改用Ionic原生HTTP插件（最推荐） #

原生HTTP插件会绕过WebView的XMLHttpRequest限制，直接用iOS原生网络请求，完全不受CORS规则约束，这是Ionic原生app解决跨域问题的标准方案。

步骤： #

• 先安装插件和对应的npm包：

  ionic cordova plugin add cordova-plugin-advanced-http
  npm install @ionic-native/http
  

• 在你的app模块里导入并添加到providers数组：

  import { HTTP } from '@ionic-native/http';
  
  @NgModule({
    ...
    providers: [
      ...
      HTTP
    ]
  })
  export class AppModule {}
  

• 把你原来的Angular HTTP请求代码改成原生HTTP的写法：

  import { HTTP } from '@ionic-native/http';
  import { LoadingController } from 'ionic-angular';
  import { TabsPage } from '../tabs/tabs';
  
  // 假设这是你的登录页面组件
  constructor(
    private http: HTTP,
    private navCtrl: NavController,
    private loadingCtrl: LoadingController,
    private baseurl: YourBaseUrlService // 你的baseurl服务
  ) {}
  
  login() {
    const loading = this.loadingCtrl.create({ content: '登录中...' });
    loading.present();
  
    const apiUrl = this.baseurl.baseurl() + 'parent/parent_login_with_companyname';
    const postData = {
      username: this.username,
      password: this.password,
      device_uuid: 'ionic'
    };
    const headers = {
      'Content-Type': 'application/x-www-form-urlencoded'
    };
  
    this.http.post(apiUrl, postData, headers)
      .then(response => {
        loading.dismiss();
        // 原生HTTP返回的data是字符串，需要解析成JSON
        const parentInfo = JSON.parse(response.data);
        window.localStorage.setItem('parent_info', JSON.stringify(parentInfo));
        this.navCtrl.setRoot(TabsPage);
      })
      .catch(error => {
        loading.dismiss();
        console.error('登录失败:', error);
        // 这里可以添加错误提示给用户
      });
  }
  

  注意：原生HTTP插件会自动处理参数编码，不需要你手动调用encodeURI。

2. 配置API服务器的跨域响应头 #

如果必须用Angular的HTTP模块，那你需要让API服务器返回正确的CORS头：

• 确保服务器返回Access-Control-Allow-Origin，值可以是你的app实际域名（生产环境）或者*（开发环境，不建议生产用）
• 同时要配置Access-Control-Allow-Methods包含POST
• 还要配置Access-Control-Allow-Headers包含Content-Type

举个Node.js/Express的例子：

const cors = require('cors');
app.use(cors({
  origin: '*', // 生产环境替换成你的app域名
  methods: ['GET', 'POST'],
  allowedHeaders: ['Content-Type']
}));

3. 检查并修正API地址配置 #

控制台里的Origin localhost:8080说明你可能还在指向本地开发服务器，在iOS构建版本里，你应该使用正式的API域名，而不是localhost。建议你用Ionic的环境配置来区分开发和生产环境：

• 在src/environments下创建environment.prod.ts和environment.ts
• 在环境文件里配置不同的API地址：

  // environment.ts（开发环境）
  export const environment = {
    production: false,
    apiUrl: 'http://localhost:8080/api'
  };
  
  // environment.prod.ts（生产环境）
  export const environment = {
    production: true,
    apiUrl: 'https://your-production-api-domain.com/api'
  };
  

• 构建iOS生产版本时指定环境：

  ionic cordova build ios --prod --env=prod
  

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