Loading of `$metadata` fails due service from https://services.odata.org not supporting CORS

Question

I am trying to consume Northwind R/W OData service link: https://services.odata.org/V3/OData/OData.svc/.

It is working fine on local testing. But without using proxy or mock server, the service reports the following error:

NetworkError: 501 Not Implemented

Controller code:

// ODataModel required from "sap/ui/model/odata/v2/ODataModel"
var oModel = new ODataModel({
  serviceUrl: "https://services.odata.org/V3/OData/OData.svc/",
  headers: {
    DataServiceVersion: "3.0",
    MaxDataServiceVersion: "3.0"
  }
});

Answer 1

As you're using Northwind, I believe it's only for development. So you can make use of https://cors-anywhere.herokuapp.com/ to access cross origin resources.

var oModel = new ODataModel({ // required from "sap/ui/model/odata/v2/ODataModel"
  serviceUrl: "https://cors-anywhere.herokuapp.com/https://services.odata.org/V2/(S(frik5l2zde0sxh4jiifyhqo4))/OData/OData.svc/"
});

Or the other way would be to disable security flag in chrome for development make use of destination settings within SCP.

Answer 2

Update (2021-06-16): for the OData V4 TripPin service, a reverse proxy server is no longer required as the host now supports CORS.

---

Original answer:

The problem is that services from odata.org currently don't support CORS. To learn about what CORS is in general, see Same origin Policy and CORS (Cross-origin resource sharing).

In short, this is what happens in your case:

1. Client sends a preflight request, with the method OPTIONS, to see what kind of requests are allowed by the server.
2. Server responds that it doesn't understand that OPTIONS request.
3. Client reports "OPTIONS ... 501 (Not Implemented)".

One of the options to circumvent this issue is to use a reverse proxy server which can be configured in SAP Business Technology Platform (aka. SAP BTP, formerly known as SAP Cloud Platform or SCP) as well as by using UI5 Tooling in case of local development.

There is an extensive documentation about how to solve this. Please go through the topic Request Fails Due to Same-Origin Policy (Cross-Origin Resource Sharing - CORS) and apply the changes according to your development environment.

If working with UI5 tooling locally, I recommend ui5-middleware-simpleproxy.

---

The public proxy service cors-anywhere.herokuapp.com may seem to work at first, but it preliminarily sends every single request with a preflight request sequentially (i.e. two requests every time) since preflight requests are not cached by that server by default.^src Also the number of requests per period is limited there, so you will get blocked when sending several requests too many times. → UPDATE: cors-anywhere.herokuapp.com is officially no longer usable. See the announcement: https://github.com/Rob--W/cors-anywhere/issues/301