How to create webpage button to call REST API

ChirpStack Application Server
1

Hi,
I would like to create a button on a web page to send POST Rest API command to the loraserver. I tried with XMLHttpRequest and fetch(). Both can’t go through.

I have tried with 3 methods. All can’t go through.

Inside the button function, this line $headers_jwt[] = ‘Content-Type: application/json’; has caused the webpage unable to load.

If I tried with the below in the button function, the webpage is loaded but with “Cross-Origin Request Blocked: The Same Origin Policy” Error in browser. I tried with enabling Access-Control-Allow-Origin , be it in the header or in the apache.conf file or in the 000-default.conf file (following this link, enable cross-origin resource sharing), still can’t work.

             var data_jwt = {'email': 'admin', 'password': 'admin'};

            var xhttp_jwt = new XMLHttpRequest();

            xhttp_jwt.open('POST', 'http://192.168.1.38:8080/api/internal/login', true);

            xhttp_jwt.setRequestHeader('Accept', 'application/json');

            xhttp_jwt.setRequestHeader('Content-type', 'application/json');                

            xhttp_jwt.send(JSON.stringify(data_jwt));

            alert(xhttp_jwt.responseText);

If I tried with the fetch() function inside the button function, I get Failed to load resource: the server responded with a status of 400 (Bad Request)

const response = fetch(‘http://192.168.1.38:8080/api/internal/login’, {

                body: {'email': 'admin', 

                       'password': 'admin'

                },

                headers: {

                  Accept: 'application/json',

                  'Content-Type': 'application/json'

                },

                mode: 'no-cors',                     

                method: 'POST'

            });

What did I do wrongly? Could you please guide me?

Hope to hear from you soon.

Regards,
Nelson

2

application-server configuration:

  # Allow origin header (CORS).
  #
  # Set this to allows cross-domain communication from the browser (CORS).
  # Example value: https://example.com.
  # When left blank (default), CORS will not be used.
  cors_allow_origin=""

maybe adding your origin there helps

3

Hi @chopmann ,
Thanks for coming back.
Where am I supposed to add that line?

Hope to hear from you soon.

Regards

4

in the application-server config.

  [application_server.external_api]
  # ip:port to bind the (user facing) http server to (web-interface and REST / gRPC api)
  bind="0.0.0.0:8080"

  # http server TLS certificate (optional)
  tls_cert=""

  # http server TLS key (optional)
  tls_key=""

  # JWT secret used for api authentication / authorization
  # You could generate this by executing 'openssl rand -base64 32' for example
  jwt_secret=""

  # Allow origin header (CORS).
  #
  # Set this to allows cross-domain communication from the browser (CORS).
  # Example value: https://example.com.
  # When left blank (default), CORS will not be used.
  cors_allow_origin=""