添加 WKWebView 后 IONIC 中的 CORS API 调用问题

Posted 2023-03-15

技术标签:

【中文标题】添加 WKWebView 后 IONIC 中的 CORS API 调用问题【英文标题】：CORS API call issue in IONIC after adding WKWebView 【发布时间】：2017-12-26 10:33:18 【问题描述】：

我已经在我的应用程序中添加了 WKWebView，并且按照 CORS API 调用文档的建议，现在我需要通过 HTTP 调用来调用它。我也添加了必要的标题。但是我在错误块中得到了 200 ok 和 XML 数据。我的代码如下：

    let headers = 
      'Access-Control-Allow-Origin': '*',
      'Content-Type': 'application/rss+xml; charset=UTF-8',
     'Access-Control-Allow-Headers': 'Content-Type, Accept , Origin, X-Requested-With',
     'Access-Control-Expose-Headers': 'X-Custom-header',
     'Access-Control-Allow-Methods': 'GET , POST , OPTIONS'
  ;

    this.httpIonic.get('http://www.myserver.com/blog/feed/', , headers)
      .then(data => 

        console.log("--------------------------res:::::");
        console.log(data.status);
        console.log(data.data); // data received by server
        console.log(data.headers);
        console.log("--------------------------res:::::");

      )
      .catch(error => 

        console.log("--------------------------error:::::" + JSON.stringify(error));

        // console.log("--------------------------error:::::" + error);
        // console.log("--------------------------error:::::" + error.status);
        // console.log("--------------------------error:::::" + error.error); // error message as string
        console.log("--------------------------error:::::" + JSON.stringify(error.headers));
        // console.log("--------------------------error:::::" + error);

      );

问题是当我在 ios 模拟器中运行应用程序时，我得到了错误响应，并且还得到了 xml 值，理想情况下我应该得到响应，但是如果我打印 error.error 它会显示 xml。

【问题讨论】：

您根本没有设置 cors。Access-Control-Allow-Origin 这些标头应该由服务器端而不是您的应用程序发送...阅读developer.mozilla.org/en-US/docs/Web/HTTP/CORS @SurajRao 我检查了许多解决方案，例如：daveceddia.com/…。人们建议，如果在请求我添加此标头时，这应该可以解决我的问题。你应该将它们设置在服务器端.. 【参考方案1】：

首先，您还没有在 API/Web 服务文件中实现 CORS 标头，您所做的只是在 js 文件中编写了这些标头，但这是错误的。您的 CORS 标头是正确的，但文件是错误的。

还有，

您可以使用 ionic native http 插件来解决 cors 问题。

我已在我们的项目中成功使用它来解决 cors 问题。

根据 ionic 官方文档：