SAPUI5 Cross-origin resource sharing issues while Posting to backend.

[Former Member]

Hello SAPUI5 people,

I'm still having some issues with posting to the SAP backend.

The Problem:

I am using jQuery to post to the SAP backend via the following code:

http://pastie.org/5477802

I added a debugger to the incoming webservice call in SAP and it says Method: OPTIONS instead of Method: POST.

I have tested this from my local webserver & via the sap cloud portal.

The big But

When I simply run that code via an HTML file in Internet Explorer, and look at the debugger it says Method: POST and adds my data the my table.

My local code:  http://pastie.org/5477806

Now the big But, when I run the same file in Firefox / Chrome, the Method turns to OPTIONS again.

What needs to happen (don't know how)

SAP needs to enable cross-origin resource sharing on the online webserver.

Or someone needs to suggest me a better way of doing this.

Temp Fix (bad practice)

I can replace the Method Options to Method Post, hard coded. But this is dirty nasty code.

Temp conclusion

Works:

• Post to SAP Backend via Internet Explorer and simple HTML File

Does not Work:

• Post to SAP Backend via Firefox & Chrome via simple HTML File
• Post to SAP Backend via IE, FF and Chrome on Local SAP Eclipse Webserver.
• Post to SAP Backend via IE, FF and Chrome on SAP Cloud Trial account

More information about CORS:

http://enable-cors.org/

http://stackoverflow.com/questions/1099787/jquery-ajax-post-sending-options-as-request-method-in-fir...

I hope someone can help me, because I spend a lot of time figuring this out.

Kind regards,

Vincent

[former_member270796 · Accepted solution]

Hi Vincent,

your coding works in IE due to your IE settings (Internet Options -> Security -> <select your zone> -> Custom Level -> Miscellaneous -> Access data sources across domains). If you activate it, you should be aware, that all requests across origins are allowed - I suppose that is something you do not really want. By the way, select the "Prompt" options doesn't really help, since IE doesn't tell you which origin tries to send a request to which origin. In IE (less than 10) there exists the XDomainRequest object, which implements CORS (but it has a number of limitations in contrast to XMLHttpRequest with CORS).

But since most of the existing services currently do not support CORS, I would suggest to configure / install a reverse proxy (Apache, SAP Web Dispatcher, ...), which directs the requests to the correct origin (and simulates a single origin to the browser).

We are currently working on an extension to the End2End Tutorial http://scn.sap.com/docs/DOC-33792, which will cover the cross-origin topic.

Hth, Bernhard

[Former Member · Accepted solution]

Haay Bernhard,

I will look into your document, read it and post back any questions I still have.

Kind regards,

Vincent

[former_member270796 · Accepted solution]

Hi Vincent,

sorry, but the document itself just describes the implementation and consumption of OData Services with SAPUI5 within the same system (so there is no validation of the Same-Origin Policy). We have to extend that tutorial with an "Cross-Origin Access" addendum, but it's not ready today.

Do you have some experience configuring Apache or Web Dispatcher?

Kind regards,

Bernhard

[Former Member · Accepted solution]

No I have not .

A friendly developer has described what I am supposed to do in these steps:

1) Send AJAX Call to an url of my webapplication

2) At the controller you need to SEND that request with POST data to the SAP Server (via curl or whatever)

3) The answer you get from the SAP server you need to resend as an local Request.

Short said I need to create a proxy to get this to work.But I don't know how, so I'm currently a little stuck

Kind regards,

Vincent

[former_member270796 · Accepted solution]

OK - you can implement your own proxy (I would name it a tunnel in that case) ... or you can install and configure one. Here is the installation description for Apache on Windows: http://httpd.apache.org/docs/2.2/platform/windows.html or if you already know, that you have to deal with SSL, maybe it's easier to install an xampp (includes Apache, php, mySQL and the like and it just has to be downloaded and unpacked): http://www.apachefriends.org/en/xampp.html. Having done this you have to configure the Apache as a reverse proxy - here is the corresponding Apache tutorial: http://www.apachetutor.org/admin/reverseproxies.

Hth, Bernhard

[Former Member · Accepted solution]

Hello Again Bernhard,

Sorry for my late reply, but this will not help me when I am running applications online on SAPUI5.

So I will need to make something similar to this:

http://jquery-howto.blogspot.de/2009/04/cross-domain-ajax-querying-with-jquery.html

But in Javascript so I can use it online at SAPUI5. Do you have any other examples of jQuery Proxy, this will be most helpful.

Kind regerads,

Vincent

[former_member270796 · Accepted solution]

Hi Vincent,

to avoid misunderstandings, please indicate, where you will place your SAPUI5/jQuery code (I suppose its a web server) and which service you would like to use (I suppose it's the urlString in your sample code).

If that's the case you have simply to place your HTML/JavaScript code in the server root of Apache/xampp (e.g. htdocs) and configure a ProxyPass/ProxyPassReverse for your "web service" server.

And I'm really convinced that will help you and it will help you much better, than a self crafted proxy implemented in php or Flash (e.g. what's about authentication - if your service needs that, your proxy has to handle that).

Kind regards,

Bernhard

[Former Member · Accepted solution]

Hi Bernhard,

Well I'm currently using the SAPUI5 Trial webserver, this will be the webserver I think?

So when we get our own SAPUI5 webserver, you think it is as easy as just configuring, that specific webserver.

When I get access to the server can't I simply do this:

http://enable-cors.org/server_apache.html --> Enable Cross Origin Resource Sharing on APACHE Server.

Kind regards,

Vincent

[former_member270796 · Accepted solution]

Hi Vincent,

if you use the Apache as a reverse proxy you don't have to deal with CORS. If the HTML/JavaScript resides on a remote server, you have to add a ProxyPass configuration for this as well:

Pseudo-Example:

ProxyPass /sapui5/ http://<yourUi5Server>:yourUi5Port/sapui5/

ProxyPassReverse /sapui5/ http://<yourUi5Server>:yourUi5Port/sapui5/

ProxyPass /sap/bc/youconsulting/ http://<yourWsServer>:<yourWsPort>/sap/bc/youconsulting/

ProxyPassReverse /sap/bc/youconsulting/ http://<yourWsServer>:<yourWsPort>/sap/bc/youconsulting/

If you have to pass a network proxy additionally, you have to add the ProxyRemote configuration as well.

Another advantage of this solution is, that you don't have to deal with absolute URLs in your coding - you are working everytime relative to your server (which is in fact the reverse proxy).

The above mentioned solution works just for simple requests (and your POST needs a so-called pre-flight request, which is a HTTP OPTIONS). And if you have already an Apache, why not configuring it as an reverse proxy (which is common use).

Hth, Bernhard

[Former Member · Accepted solution]

I will be following this up after my vacation so no worries!

Happy Holidays!

[CarlosRoggan]

Hi,

for those of you who still searching for a solution:
Use App Router to solve CORS
Or: Use Proxy Server to solve CORS
(works locally and in Cloud)

Cheers,
Carlos

[Former Member]

Hi Vincent,

Check the following link.

HTML5 ROCKS - Using CORS

http://www.html5rocks.com/en/tutorials/cors/?redirect_from_locale=en

Preflight Request:

The preflight request is made as an HTTP OPTIONS request (so be sure your server is able to respond to this method)

Hope it helps.

Regards,

Christian

[Former Member]

Hello Christian,

This will not work.

I need todo something with a proxy.

Kind regards,

Vincent

[Former Member]

I have tried this:

	var invocation = new XMLHttpRequest();
	var url = 'http://delyo001.you.local:8000/sap/bc/youconsulting/ws/rest/anonymous/z_names_post';
	var body = '<result><firstname>perthyrtyrtygop</firstname><lastname>sparta</lastname></result>';
	invocation.open('POST', url, true);
	invocation.setRequestHeader('X-PINGOTHER', 'pingpong');
	invocation.setRequestHeader('Content-Type', 'application/xml');
	invocation.send(body);

Works locally only in IE.