CORS issue in an HTTP Client control

Hi David, On to next issue now. I am trying to get communications going between my web app and the ab app. I have created a simple test rest service in my web app that takes 'VesselName' and 'VesselCode' as inputs and responds with a json formatted response giving a VesselToken that I want to grab in the AB app. For example, if I put: https://mymarina.online/iPort/REST/dockit/VesselTokenRequest?VesselName=Horizon&VesselCode=1001 into the browser, it responds with: { "VesselToken": "OxkLCA5fGnVBR0ZCAUpH"} I have made some simple modifications to your HttpForm example and have replaced the httpclient url with: https://mymarina.online/iPort/REST/dockit/VesselTokenRequest I then modified the Send button code to push the two field values: // Prepare the HTTP request progress feedback Show "Progressbar1" // Clear a possible previous request response SetVar "[Textarea3.Value]" "" "String" // Prepare our HTTP request and execute it HttpClearData "HttpClient1" HttpSetData "HttpClient1" "VesselName" "[Input3.Value]" HttpSetData "HttpClient1" "VesselCode" "[Input4.Value]" HttpSetHeader "HttpClient1" "Content-Type" "application/x-www-form-urlencoded" HttpExecute "HttpClient1" However, I get status=-1 and response=null back. Am I missing the boat here? It seems that it should have picked up the VesselToken that was responded? Pete

Hello Peter,

Apparently it's a CORS issue. If you try your sample in Firefox, for example, with the Console Developer opened, you can see that it's a CORS issue. The server side must set the appropriate CORS headers to allows the request from the app.

Depending on the server that you are using or the language that you are using, you can establish the CORS permissions. This website may can help you.

P.S. Probably you no need to use the "HttpSetHeader", but, this is not related with the CORS issue.

---

Okay thanks. It is a Tomcat server and I see that they have instructions for that so I will give it a go. Thanks, Pete

Hello Peter,

You see? For that I place the above link... too many servers, languages... I know how to proceed in some of them, but, for example, don't know how to proceed talking about Tomcat! If you finally got it, please, refer here what you do, so others can get it working too if needed!

---

Hi David, I appreciate that this is beyond the scope of support but I just wondered if you have more experience with Cors than I do which wouldn't be hard because I don't have any.

I have updated the web.xml file to include the information that I gather needs to be added in order to resolve this issue:

<filter> <filter-name>CorsFilter</filter-name> <filter-class>org.apache.catalina.filters.CorsFilter</filter-class> <init-param> <param-name>cors.allowed.origins</param-name> <param-value>*</param-value> </init-param> <init-param> <param-name>cors.allowed.methods</param-name> <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value> </init-param> <init-param> <param-name>cors.allowed.headers</param-name> <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,Access-Control-Allow-Origin</param-value> </init-param> <init-param> <param-name>cors.exposed.headers</param-name> <param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value> </init-param> <init-param> <param-name>cors.support.credentials</param-name> <param-value>true</param-value> </init-param> <init-param> <param-name>cors.preflight.maxage</param-name> <param-value>10</param-value> </init-param> </filter> <filter-mapping> <filter-name>CorsFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> I have found a cors test site at http://www.test-cors.org/#?client_method=GET&client_credentials=false&server_url=https%3A%2F%2Fmymarina.online%2FiPort%2FREST%2Fdockit%2FVesselTokenRequest&server_enable=false&server_status=200&server_credentials=false&server_tabs=remote

If you run this page, it seems to me that it is saying that the correct header is exposed and that it should be good to go however, I am still getting the same error in Firefox when I execute the httpclient. I was wondering if you had any ideas on this one? Cheers, Pete

Hello Peter,

Please, sorry the delay. And don't worry: this is completely related with AB, to say like that. Please, when possible, try to do the following additions to the below XML:

<init-param> <param-name>cors.allowed.headers</param-name> <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,Access-Control-Allow-Origin</param-value> </init-param>

In the above XML "param-value", add the following: Cache-Control, If-Modified-Since. So, the above XML part must be like the below one:

<init-param> <param-name>cors.allowed.headers</param-name> <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,Access-Control-Allow-Origin,Cache-Control, If-Modified-Since</param-value> </init-param>

At this point, save the changes and try the sample app... if you continue having problems, please, change the below XML part too:

<init-param> <param-name>cors.exposed.headers</param-name> <param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value> </init-param>

You must add again the referred new headers, so the above XML must be like the below one:

<init-param> <param-name>cors.exposed.headers</param-name> <param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials,Cache-Control, If-Modified-Since</param-value> </init-param>

Again, save the changes and try the sample app. Then please, post here if that is working for you or not, Peter.

---

Fantastic, the first fix worked! For anybody else working with Tomcat, my working code in the Tomcat web.xml file is now: <filter> <filter-name>CorsFilter</filter-name> <filter-class>org.apache.catalina.filters.CorsFilter</filter-class> <init-param> <param-name>cors.allowed.origins</param-name> <param-value>*</param-value> </init-param> <init-param> <param-name>cors.allowed.methods</param-name> <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value> </init-param> <init-param> <param-name>cors.allowed.headers</param-name> <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,Access-Control-Allow-Origin,Cache-Control, If-Modified-Since</param-value> </init-param> <init-param> <param-name>cors.exposed.headers</param-name> <param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value> </init-param> <init-param> <param-name>cors.support.credentials</param-name> <param-value>true</param-value> </init-param> <init-param> <param-name>cors.preflight.maxage</param-name> <param-value>10</param-value> </init-param> </filter> <filter-mapping> <filter-name>CorsFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> The next issue though is that unlike your original example which is returning:

Status: 200 Status text: OK Response: Array ( [Name] => John [LastName] => Doe ) Array ( )

My example is returning:

Status: 200 Status text: Response: [object Object]

If I just enter https://mymarina.online/iPort/REST/dockit/VesselTokenRequest?VesselName=Horizon&VesselCode=1001 into the browser, I get the following return:

{ "VesselToken": "OxkLCA5fGnVBR0ZCAUpH", "Result": "200 - OK"}

It is perceiving the return to be an object. In my back end, I have control over the named pairs and can return either json or xml. With it set to xml, I am getting the return:

Status: 200 Status text: Response: <?xml version='1.0' encoding='UTF-8' ?> <VesselToken_Response> <VesselToken>No matching vessel found</VesselToken> <Result>400</Result> </VesselToken_Response>

Which raises a second issue, I am finding that the httpclient is not passing the parameters into the rest service. In my server log I can see the request but the two parameters are blank.

So my two questions now are How should I proceed with the format and parsing of the return and How do I resolve the problem with the parameters not being picked up?

? Thanks for all your help, Pete

Hi again, I see the help file stuff now about ObjectGetProp and working with objects so I think that I can deal with the first issue myself. I could use a hand though in figuring out a troubleshooting approach to figure out why the httpclient is not passing the parameters?

Here is the code for the send button:

// Prepare the HTTP request progress feedback Show "Progressbar1" // Clear a possible previous request response SetVar "[Textarea3.Value]" "" "String" // Prepare our HTTP request and execute it HttpClearData "HttpClient1" //The two input fields are called VesselName and VesselCode HttpSetData "HttpClient1" "VesselName" "[VesselName.Value]" HttpSetData "HttpClient1" "VesselCode" "[VesselCode.Value]" HttpExecute "HttpClient1"

Thanks! Pete

Hello Peter,

Apparently "HttpSetData" did not work for GET requests. In this case we can use the URL itself by something like the below:

HttpSetUrl "HttpClient1" "https://mymarina.online/iPort/REST/dockit/VesselTokenRequest?VesselName=123&VesselCode=321" HttpExecute "HttpClient1"

Or may you can / want to change to HTTP POST... then yes, you can use teh "HttpSetData" action.

---

Hello again,

Just a couple of notes... if JSON is available, this is preferible to XML: we can parse XML, for example, using jQuery (which is included by default in our apps), however, JSON is more friendly. In fact, we can access JSON data like objects in a way than the below:

// This is an HTTP Client Success event Alert "" "[HttpClient1.Response.object_prop]"

In other words, we can use the "ObjectGetProp" action if we wanted, but, also can access to simple objects like above.

---

Hi David,

A huge thank you for helping me to get up on my feet with AB. This is working perfectly now and I have the PouchDB/CouchDB stuff working with queries, offline first and live time remote syncing working. These were the two stumbling blocks for me and I think that I am now ready to rock and roll with the new app. I am excited about AB, it is a different paradigm than the development platform than I am used to but I am feeling more comfortable with it every day.

Cheers, Pete

Always thanks you Peter! Thanks for your kindly words!

---