Ionic Angular5本地开发遇CORS拦截，JSONP及接口请求失败

你遇到的是HTTPS请求被重定向到HTTP后触发的CORS拦截，而且JSONP方案也没起效，我来帮你拆解问题并给出可行的解决方案：

问题根源分析 #

你的请求从https://example.com/api...被重定向到http://example.com/api...，这里有两个核心问题：

1. 浏览器会严格拦截HTTPS页面发起的HTTP请求（混合内容限制），同时重定向后的HTTP地址没有返回Access-Control-Allow-Origin响应头，直接触发CORS规则。
2. JSONP失效大概率是因为重定向过程丢失了JSONP所需的callback参数，或者目标HTTP接口本身不支持JSONP格式的响应。

解决方案（按优先级排序） #

1. 修复后端接口的重定向逻辑（最优解） #

首先建议联系后端团队调整接口配置：

• 禁止将HTTPS请求重定向到HTTP，这本身就存在安全隐患，应该让接口在HTTPS地址上直接响应请求，避免重定向。
• 如果必须保留重定向，确保重定向目标是HTTPS地址，并且在响应头中添加Access-Control-Allow-Origin，值可以设为你本地开发地址（比如http://localhost:8100），生产环境则指定你的应用域名。

2. 配置Ionic代理转发（本地开发绕过CORS） #

Ionic+Angular自带代理功能，可以让请求通过本地服务器转发，绕过浏览器的CORS检查，步骤如下：

• 在项目根目录创建proxy.conf.json文件，填入以下内容：

{
  "/api": {
    "target": "https://example.com",
    "secure": true,
    "changeOrigin": true,
    "pathRewrite": {
      "^/api": "/api"
    }
  }
}

• 修改ionic.config.json，添加proxyConfig字段关联刚才的配置文件：

{
  "name": "你的应用名称",
  "integrations": {
    "cordova": {}
  },
  "type": "angular",
  "proxyConfig": "proxy.conf.json"
}

• 调整你的请求代码，把原来的完整URLhttps://example.com/api?req1=foo&req2=bar改成相对路径/api?req1=foo&req2=bar
• 重启ionic serve -l，现在请求会通过本地代理转发，不会触发CORS拦截。

3. 排查JSONP配置问题（备选方案） #

如果一定要用JSONP，先确认以下几点：

• 后端接口是否支持JSONP：需要接口能识别callback参数，并返回callbackName(返回数据)格式的JavaScript响应。
• Angular配置是否正确：确保在AppModule中导入HttpClientJsonpModule，并且使用HttpClient.jsonp()方法发起请求，示例代码：

import { HttpClient, HttpClientJsonpModule } from '@angular/common/http';

// 在AppModule的imports中添加HttpClientJsonpModule

// 请求代码
this.http.jsonp('https://example.com/api?req1=foo&req2=bar', 'callback')
  .subscribe(data => {
    // 处理返回数据
  });

• 注意：如果接口重定向时丢失了callback参数，JSONP肯定会失效，这时候还是得先解决重定向问题。

额外注意 #

• 当你打包成APK/IPA部署到设备时，WebView的CORS限制和浏览器不同，大概率不会出现这个问题，但还是建议在生产环境前修复后端的CORS和重定向问题。
• 生产环境不要用*作为Access-Control-Allow-Origin的值，要指定具体的应用域名，避免安全风险。

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