从 SAPUI5 访问 Northwind OData 服务时出现 Access-Control-Allow-Origin 错误？答案

【问题标题】：Access-Control-Allow-Origin error when accessing Northwind OData service from SAPUI5?从 SAPUI5 访问 Northwind OData 服务时出现 Access-Control-Allow-Origin 错误？
【发布时间】：2018-10-14 04:48:45
【问题描述】：

我在在线编辑器中创建了一个示例 SAPUI5 应用程序

Check this link to view my code

I am getting this below error -

> XMLHttpRequest cannot load
> http://services.odata.org/V2/Northwind/Northwind.svc/Products?$format=json.
> No 'Access-Control-Allow-Origin' header is present on the requested
> resource.

有人可以帮我解决这个问题吗？我知道这是 CORS 问题，可以通过禁用 chrome 中的安全性来解决。

但是 - 我不会禁用 chrome 的安全功能。那么，有没有其他方法（可能通过传递一些标头）来解决这个问题。

提前感谢您的帮助。

P.S.：我已经查看了这些链接 -

http://scn.sap.com/community/developer-center/front-end/blog/2013/06/29/solving-same-origin-policy-issue-in-different-ways

http://scn.sap.com/community/gateway/blog/2014/09/23/solve-cors-with-gateway-and-chrome

【问题讨论】：

其他读者：见stackoverflow.com/a/53878337/5846045
这能回答你的问题吗？ Loading of `$metadata` fails due service from https://services.odata.org not supporting CORS

标签： google-chrome cors odata sapui5

【解决方案1】：

在您的 hcp 帐户的 DESTINATIONS 选项卡下添加 northwind odata 服务作为目标。然后使用相对路径（即 /destination/.....）对北风服务进行 ajax 调用或者制作您自己的 java 应用程序作为代理，它允许源作为并将有效负载重新路由到正确的目的地。

基本上，destination 也是为 sap 开箱即用提供的代理

【讨论】：

我没有使用 Hana hcp。但是，我只是在我的示例应用程序中使用在线编辑器
那么除非您可以请求 odata 服务提供商添加 CORS 标头作为响应，否则您将不得不创建一个 java 应用程序（或任何其他后端应用程序）。您的 UI 将与此 java 应用程序而不是 odata-service 提供程序进行通信。在 java servlet 中，存在执行 CORS 时调用的 doOptions() 方法。在此添加所需的标题作为响应。然后，一旦 pre-flight 被批准，实际请求将到达您的 servlet 的 doPost() 方法。在这里，您必须编写代码以从 odata 服务提供商处请求所需的值。

【解决方案2】：

如果这只是为了测试，下面的解决方案应该是最简单的。

使用添加所需标头的代理服务，例如：https://github.com/Rob--W/cors-anywhere

使用真的很简单，只要在你的OData URL前加上代理服务的URL即可：

var uri = "https://cors-anywhere.herokuapp.com/https://services.odata.org/V2/Northwind/Northwind.svc/Products?$format=json";

【讨论】：

我正在尝试这个解决方案，但是当访问 URL cors-anywhere.herokuapp.com/https://services.odata.org/V2/… 时，它给了我以下消息：“缺少所需的请求标头。必须指定以下之一：origin,x-requested-with”。请帮忙，谢谢。
@DanielCarpioContreras 直接打开 URL 不起作用。进行 fetch 调用确实有效。因此，将其用作 OData 模型也应该可以。