Failed to load resource while consuming OData service - sapui5

Question

Hello comunnity i need some help, i have my odata service already running and i have an url like this:
https://myclient:port/sap/opu/odata/SAP/servicename_SRV/MaterialListSet
This is my config, which I suppose is wrong.
manifest.json
"dataSources": {
"invoiceRemote": {
"uri": "https://myclient:port/sap/opu/odata/SAP/servicename_SRV/",
"type": "OData",
"settings": {
"odataVersion": "2.0"
}
}
}
.
.
.
"models": {
...
"invoice": {
"dataSource": "invoiceRemote"
}
}
I get these two errors:
Failed to load resource: the server responded with a status of 401 (Unauthorized)
and
Failed to load https://client:port/sap/opu/odata/SAP/odata_SRV/$metadata?sap-language=ES: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:port' is therefore not allowed access. The response had HTTP status code 401.

Answer 1

This line is not good;
"uri": "https://myclient:port/sap/opu/odata/SAP/servicename_SRV/",
This is because you have to use relative URLs, so it should be
"uri": "/sap/opu/odata/SAP/servicename_SRV/",
The reason behind that is simple: your customer for sure has more than one SAP Gateway/Fiori system. So you shouldn't hard code the domain of your development or production system.
Assuming you will eventually deploy your UI5 application to the SAP NetWeaver system, then that system will contain both the oData service AND the UI5 application. And as they will be hosted in the same server, relative URLs will work just fine.
However inside Web IDE this is not enough because if you use relative URLs than SAP Cloud/Web IDE will understand that you are trying to access a resource in the cloud.
That is why you should add/change your neo-app.json file inside your UI5 project. If you have it already than just change it. If you do not have this file inside your project yet, you can easily create it by right-clicking in the project name and choosing New >> HTML5 Application Descriptor. This will create this file in the root of your project. (outside the webapp folder usually present).
Finally, you will have to add a route in this neo-app.json file, like this
{
"path": "/sap/opu/odata",
"target": {
"type": "destination",
"name": "NAME_OF_YOUR_SAP_CLOUD_DESTINATION",
"entryPath": "/sap/opu/odata"
},
"description": "SAP Gateway System"
}
This tells Web IDE to forward every request to a different system under the destionation specified.
This will only work if you have in place an SAP Cloud Connector linking your SAP Cloud account with your SAP NetWeaver on premise system.