CORS issue in an HTTP Client control

DecSoft NeoPlugins put your VisualNeo projects into another level with +1,000 new actions for your apps.

Take a look at our YouTube channel and subscribe to be notified about new videos!

Save time, resources and money creating apps for Android, iOS and more with the same base of code.

Apache Cordova's official plugins are supported out of the box and there are hundreds of plugins ready to use.

DecSoft HTML Compiler is easy to use: set your project's options and compile your apps and games in a nutshell.

DecSoft HTML Compiler include a convenient Command Line Compiler, so you can compile your apps from the console.

Take a look at some frequently asked questions about us and our products!

DecSoft App Builder integrates an Open AI assistant in order to assist you while developing your apps.

Compile, convert your modern HTML apps and games into Microsoft Windows executable programs without dependencies.

Create multiplatform apps with DecSoft App Builder, including Android and iOS with the same base of code.

Save money by purchasing our NeoPlugins bundles. Five, Ten and even the complete NeoPlugins collection at an incredible price!

Create modern HTML apps and games at another level making things impossible to do even by modern HTML apps and games.

DecSoft NeoPlugins are available in both runtime and designtime flavours to keep your apps as small as possible.

Create apps and expand their capabilities by using the world's popular programming language: Javascript.

Design for small screen devices but deploy also (without changes) in larger devices like tablets.

DecSoft App Builder include a convenient Command Line Compiler, so you can compile your apps from the console.

Peter Bradstreet

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

DecSoft

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.

Purchase one or more licenses of our products if they are useful to you!

Peter Bradstreet

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

DecSoft

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!

Purchase one or more licenses of our products if they are useful to you!

Peter Bradstreet

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

DecSoft

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.

Purchase one or more licenses of our products if they are useful to you!

Peter Bradstreet

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

Peter Bradstreet

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

DecSoft

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.

Purchase one or more licenses of our products if they are useful to you!

DecSoft

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.

Purchase one or more licenses of our products if they are useful to you!

Peter Bradstreet

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

DecSoft

Always thanks you Peter! Thanks for your kindly words!

Purchase one or more licenses of our products if they are useful to you!

Everybody can read the DecSoft support forum for learning purposes, however only DecSoft customers can post new threads. Purchase one or more licenses of some DecSoft products in order to give this and other benefits.