CORS error

[chipfryer27]

Hi

I'm in no way an expert in HTML so hopefully someone in the forum can assist.

Being bored, and with no hardware I'm limited to simulation. There is a website I use and I created a chart running on a RPi that sends a GET request and after receiving the JSON reply, gives me the pairs of interest. This works fine and i can view activity on console as well as Simulation Debugger as I step through. No issue at all.

I then thought that it would be handy to get that information on my PC/Phone too so attempted to make a Web Developer Chart. I can actually just type in the URL and a browser will return the entire JSON string but an nice app would be better.

It has been a while since I used it but following some guides I created what I thought would work. It didn't

With Web Developer you can't step through, so in Firefox I opened up their web development tools to see what was going on and see that I'm sending OK but due to CORS I'm getting no response. Tried other browsers and they are the same, and I presume it is also why web viewer fails too.

Is there anyway to modify what I'm sending via web developer to get around this issue?

Regards

PS
I am only accessing a PHP script that then returns info.

[chipfryer27]

Hi

It seems that I need to add a header in the server to "Allow Origin" to get rid of the CORS error.

However if it was a server issue, why does it work on any browser if I type in the URL directly or use an embedded device, but not if I create a Web Developer chart. Guessing it is something to do with the Fetch command?

Regards

[chipfryer27]

Hmm...

Opening up Firefox again and connecting to the forum, I noticed the Cross-Site icon in the tab. Killing that, which I presume was a tracking cookie of sorts, I tried my web-chart again, with FF dev tools open..

This time I connected without issue and got my JSON string returned, no mention of CORS.

Chart still didn't do as I wanted but now I at least know that it is receiving the data

Regards

[chipfryer27]

Hi

Strange.... I get the CORS error perhaps six times out of ten. Really unsure about that.

Although I do get the data returned in a browser, I can't seem to get the macro to call. The HTTP Fetch component is supposed to call a particular macro but it never seems to get called. I even changed the macro to just displaying predefined text, but that doesn't work either.

I changed a button to call the macro and that works, so it is looking like the macro isn't getting called by HTTP Fetch.

Regards

[Steve-Matrix]

If you run the Web Developer app directly from the phone then there are likely to be issues. It is very dependent on the browser, its version, and the OS being used.

The best success I have had is to upload the generated file to a website and access it from your phone from there.

If Fetch is not triggering the macro, then there is no return coming back from the server (or more likely it is being prevented due to CORS or similar).

BTW, you can step through a Web Developer flowchart within Flowcode, although it's probably not as intuitive as it should be. And you would need to add in a breakpoint to stop the JavaScript running so you can start to step through. You need to do the following:

1. Create and view the web page
2. Click the debug icon on the web view toolbar
3. Set a breakpoint
4. Trigger the code so the breakpoint is hit

Then you will be able to step through the code. But if you are ok with JavaScript then debugging using browser development tools is fine too.

[chipfryer27]

Hi Steve

The best success I have had is to upload the generated file to a website and access it from your phone from there.

Not sure I understand what you mean by that.

Restating I'm in no way a HTML guru so the following is little more than stabs in the dark

Using FF with web developer tools active (Ctrl+Shift+i) I can see Network activity. Doing nothing, each time I run the page I would either get the CORS error or it would seem all good with the return info available under "Response". No rhyme nor reason for it to error or not, totally random. Irrespective of having a response available or not, the Fetch Macro never gets called.

There is a lot of misleading, confusing and contradictory information on CORS available on the web. One very reliable source we probably all use stated you cannot send a Fetch request to a server having CORS headers. Instead you need to use GET.

So, in the component I went to advanced and switch off "CORS". A couple of tweaks later and I could connect every time, getting my 200 OK, but unfortunately I was not getting any response at all.

At one point I did get the macro to trigger but there was no data returned.

Eventually I gave up and looked at implementing what most info states, to modify the server header. Now this is where I really get confused. As the page is just a PHP file hosted on a server, that only runs a couple of PHP commands that don't access any other files on the server or elsewhere, I don't really understand why I am getting CORS at all. I'd be grateful if someone could explain that.

Reading the much confusing guidance, for security it suggests not to use the "*" wildcard in CORS header, but your own domain. This didn't do any good and I was now getting different CORS errors. As per above I am not accessing any other sites or files so...... Other advice suggested that those citing security concerns regarding the "*" don't understand what is going on. So, using the "*" wildcard all the above problems resolved themselves.

Not sure I will keep the "*" as I was just playing around with Web Developer, and once the above was resolved my chart more or less worked as expected.

Downside is I'm just as confused about CORs as I was before, as I don't see why it would apply in my scenario.
Upside is I have learned a lot about FC Web Developer and how to use it<s>

I've always thought FC itself was very intuative and you could just stumble your way around and get something working, but not so much with WD. It may all be crystal clear if you watch a video, but I'm no fan of them. Admittedly, I just downloaded a couple of examples and tried to get the gist from them, which would probably have worked if I was talking to an embedded device rather than a server.

Regards

PS
Tested the chart OK on a PC running FF and Edge, then on an android running FF, Chrome and DuckDuck Go. No issues.

[Steve-Matrix]

I've always thought FC itself was very intuative and you could just stumble your way around and get something working, but not so much with WD. It may all be crystal clear if you watch a video, but I'm no fan of them. Admittedly, I just downloaded a couple of examples and tried to get the gist from them, which would probably have worked if I was talking to an embedded device rather than a server.

I'm not sure this will help, but here are some of the main differences between 'normal' Flowcode programming and Web Developer:

Creating projects using Flowcode's Web Developer mode does require a change in how you approach things. The main difference is that the underlying code runs within a web browser and this dictates that it behaves differently to how you would program a microcontroller using Flowcode' Embedded mode.

This difference is the code needs to be event-driven and cannot hang around in lengthy loops, as this would block the browser's UI.

So many UI elements use "handlers" to deal with user input, web server responses, etc. For example, the Button component has an "OnClick" macro which will be called when the user clicks a button.

All of your macros will need to work like interrupts - basically do something and then return relatively quickly.

Debugging is also a little different because this essentially works by running the JavaScript code that in a browser, rather than simulating what a microcontroller is doing. This means the 'simulation' actually occurs in the "Html Viewer" window rather than the 2d panel winder where you design the web page.

Breakpoints must be set when the debugger is not active or if it is paused, and one of these needs to be "hit" to allow stepping through the flowchart.

If there are any specific issues you are encountering, please let me know and I'll try to help. I am looking to improve on how things work to make it more intuitive where possible, and having feedback on specific problems will help.

[chipfryer27]

Hi Steve

As I often say, I'm not a programmer I'm a Flowcoder, which is testament to how good your product is.

My last play with anything java was a while back, probably aided by (in my opinion) one of the very good "Easy Steps" books by Mike McGrath. Got enough info to do what I needed.

Again, perhaps if I'd watched a video or if I saw a "Start Here" guide to WD I may have found things a little easier. Instead I just went straight to examples and it was the Vote Feedback system that appeared to do similar to what I wanted to do, have WD access a site and grab some data.

Opening up the chart I thought "what do we have here but more importantly why?".

I had completely forgotten about JS being Object Orientated (well it was a while back) so initially was a little confused as to the "why" things were there and what do they do. Once I remembered / realised that my reply would be considered an "Object" it then became perfectly clear as to why components were there. A proper programmer may know this instinctively, but I'm not one of those.....

Perhaps a little note to that effect?

My next hurdle was in actually obtaining an Object but I found Firefox's web development tools to be a great help (especially Network tab). If I had been connecting to a microcontroller my issues wouldn't have arisen, so quite glad it did as it forced me to examine further.

Before opening up the example I had a blank chart and an equally blank look on my face, but once I realised about Objects, WD isn't as scary as I first imagined <s> Now I need to improve my artistic skills so I can create a nice looking page (don't hold your breath). Now I've figured it out it really is quite simple to use and I can see me using it more often.

I think it would be nice if an example Project was explained in full. By that I mean we are going to use this component and it does this. Then in the command icons explain why your are doing something e.g. Initialise - this sets up the comms channels to........blah blah.

Not every example project, just one so that you get a feel for things.

Regards

[Steve-Matrix]

Thanks for the feedback - much appreciated.

I'll put some time aside to look again at those examples. The "vote" example was one that I put together right at the start of Web Developer's release and things have evolved since and there may be a simpler way of doing things now. I'll also add more explanation in the example.