Forum > Pas2JS

client doesn't show data

(1/5) > >>

mangakissa:
With this link I build a very basic restserver with time.
The server is located on localhost:9080. With my browser I get a result without problems.
Now I built with pas2js a simple page with one button and a dataset. If I run the restserver in debug mode I can see the clinet is doing a request. The response is sent back to the client. But the client is doing nothing.

I put an writeln in procedure DSOpen() but the writeln will not displaying in browser.
The doGetUrl() and btnTimeClick() are displaying well.

Why will my dataset not open and display data in my browser?

ps:
It's client and server on same domain?

TRon:
Hi mangakissa,

Thank you for your example.

I am completely oblivious with regards to pas2js so I have no idea what I am doing (other then following wiki pages and forum posts).

I added some output messages to the server, then fired it up.

Then I loaded your html page, which loads your script generated by pas2js.

That showed me a button. When I pressed that the server showed:

--- Code: ---2020.06.30 07:27:04:315 : Server: default routing from time
2020.06.30 07:27:04:317 : Server: Send json response

--- End code ---
Which are my output messages.

The browser window (chromium) showed me:

--- Code: ---button clicked
URL :http://localhost:9080/time
loaded.....

--- End code ---

The browser console showed me:

--- Code: ---button clicked
client.js:12458 URL :http://localhost:9080/time
client.js:12458 loaded.....
client.html:1 Access to XMLHttpRequest at 'http://localhost:9080/time' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

--- End code ---

And... that is as far as I was able to comprehend, other than the hint to add a header ?

PascalDragon:

--- Quote from: TRon on June 30, 2020, 06:40:49 am ---The browser console showed me:

--- Code: ---button clicked
client.js:12458 URL :http://localhost:9080/time
client.js:12458 loaded.....
client.html:1 Access to XMLHttpRequest at 'http://localhost:9080/time' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

--- End code ---

And... that is as far as I was able to comprehend, other than the hint to add a header ?

--- End quote ---

The missing CORS header is exactly the problem. You either need to set that header correctly (though I don't know right now how it needs to be set for a local file...) or you need to distribute the HTML file and JS script using the restserver as well. I'd suggest the later.

If you use FPC 3.2.0 you can do this rather easily like this:


--- Code: Pascal  [+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i < x.length; i++) { x[i].style.maxHeight='none'; x[i].style.height = Math.min(x[i].clientHeight+15,306)+'px'; x[i].style.resize = "vertical";}};} ---// add unit fpWebFile to your uses clause of the server project begin  Application.Port := 9080;  HTTPRouter.RegisterRoute('/time', @timeEndpoint, true);  HTTPRouter.RegisterRoute('/greeting/:name', @greetingEndpoint);  // here you need to use the bath to the client data relative to your executable  TSimpleFileModule.BaseDir := ExpandFileName('../client');  // you need a file with mime types, though I *think*  // that FPC 3.2.0 can also do this without  // you'll notice if it works or not if your browser tries to  // download the HTML file instead of displaying it ;)  MimeTypesFile := ExpandFileName('./mime.types');  // pick some route where you want your webserver to serve the  // files from  HTTPRouter.RegisterRoute('/client/*', @TSimpleFileModule.HandleSimpleFileRequest);  Application.Threaded := true;  Application.Initialize;  Application.Run;end.

TRon:
 Thank you PascalDragon.

Unfortunately that seems to complicate matters even more for me .... (do note that i'm easily confused :-) )

I have server and client both located in the same directory so i used:

--- Code: Pascal  [+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i < x.length; i++) { x[i].style.maxHeight='none'; x[i].style.height = Math.min(x[i].clientHeight+15,306)+'px'; x[i].style.resize = "vertical";}};} --- ...  TSimpleFileModule.Basedir := ExpandFileName('./client');  // mimetypes ...needed for 3.2 ?  MimeTypesFile := ExpandFileName('./mime.types');    // pick some route where you want the server to serve the files from  HTTPRouter.RegisterRoute('./*', @TSimpleFileModule.HandleSimpleFileRequest);... html/js response from client is identical as mentioned before, however the console does reply in a different manner:

--- Code: ---client.js:12458 button clicked
client.js:12458 URL :http://localhost:9080/time
client.js:12458 loaded.....
client.js:12331 GET http://localhost:9080/time net::ERR_CONNECTION_REFUSED

--- End code ---

The result from using another route for the filerequest (which i tried first, using previous pasted mimetype and client location):

--- Code: Text  [+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i < x.length; i++) { x[i].style.maxHeight='none'; x[i].style.height = Math.min(x[i].clientHeight+15,306)+'px'; x[i].style.resize = "vertical";}};} ---..  HTTPRouter.RegisterRoute('*', @TSimpleFileModule.HandleSimpleFileRequest);.. resulted in a console output of:

--- Code: ---button clicked
client.js:12458 URL :http://localhost:9080/time
client.js:12458 loaded.....
client.html:1 Access to XMLHttpRequest at 'http://localhost:9080/time' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
client.js:12331 Cross-Origin Read Blocking (CORB) blocked cross-origin response http://localhost:9080/time with MIME type application/json. See https://www.chromestatus.com/feature/5629709824032768 for more details.

--- End code ---

I do not even have an idea of what is the correct routing there..... the last seems more promising, but at the same time seems more wrong to me....

I even tried "/*" but that seems to act in the same manner as the results in my first post. The only difference to that is that after so many repeated (click button) retries it adds the additional message "Cross-Origin Read Blocking (CORB) blocked cross-origin response http://localhost:9080/time with MIME type application/json. See https://www.chromestatus.com/feature/5629709824032768 for more details."

I did had a read about that CORB blocking, and an answer from SO seems to suggest installing an extension/plugin (yet another one) to circumvent this blocking issue, but i'm not that stupid as it should just simply be a matter of proper configuration.

Navigation

[0] Message Index

[#] Next page

Go to full version