Nginx 上的 Ionic 应用程序和 Access-Control-Allow-Headers答案

【问题标题】：Ionic app and Access-Control-Allow-Headers on NginxNginx 上的 Ionic 应用程序和 Access-Control-Allow-Headers
【发布时间】：2018-09-12 17:57:59
【问题描述】：

我有一个 Ionic 应用程序，它使用网站上托管的 API，并通过 ionic serve 和 chrome cors 插件，我可以使用该应用程序。
当我在带有ionic cordova run ios 的 ios 模拟器上尝试时，应用程序启动但没有显示任何内容。

使用 safari 作为调试器我发现了问题：

加载资源失败：请求头域User-Agent不是 Access-Control-Allow-Headers 允许。

问题是在我的网站中，这是一个 Wordpress 安装，我有这个代码：

function add_cors_http_header(){
    header("Access-Control-Allow-Origin: *");
    header('Access-Control-Allow-Methods: GET, POST, OPTIONS, DELETE, PUT');
    header('Access-Control-Allow-Headers: Origin, User-Agent, Content-Type, Accept, Authorization, X-Request-With, X-CLIENT-ID, X-CLIENT-SECRET');
    header('Access-Control-Allow-Credentials: true');
}
add_action('init','add_cors_http_header');

如您所见，标题中允许使用 User-Agent。
我该如何解决这个问题？

【问题讨论】：

标签： ionic-framework cors

【解决方案1】：

您应该为 Ionic 使用服务代理配置，而不是随机授予这些权限。

将此添加到您的 ionic.config.json：

...
proxies: [
    {path: "/path/to/resource", proxyUrl: "http://myserver.com/path/to/resource"}
]
...

查看此链接：https://ionicframework.com/docs/cli/configuring.html

我通常将这些 URL 放在一个配置文件中。我维护两个文件供开发和生产使用。将应用部署到设备后，您可以再次使用常规 URL（生产配置文件），因为嵌入式 WebView 中不禁止跨源请求。

【讨论】：