Send a POST request with Basic Authentication in JavaScript

I would like to send a POST request via JavaScript.
The header information requested by the server side is as follows:

Basic Authentication
'Accept' is 'application/json'
'Content-Type' is 'application/json'
'Content-Length' is '*'

email in JSON format as body
So here's my code.

var btn= document.getElementById('btn');

btn.addEventListener('click', function(){

    varclientId="*My ID*";
    varclientSecret="*My PW*";
    vardata={email:"*My email*";

    var authorizationBasic=window.btoa(clientId+':'+clientSecret);

    var request = new XMLHttpRequest();
    request.open('POST', '*Server URL*');
    request.setRequestHeader('Authorization', 'Basic' + AuthorizationBasic);
    request.setRequestHeader('Accept', 'application/json');
    request.setRequestHeader('Content-Type', 'application/json');
    // request.setRequestHeader('Content-Length', '*');
    request.send(JSON.stringify(data));

    request.onreadystatechange=function(){
        if(request.readyState===4){
            alert(request.responseText);
        }
    };

} );

email in JSON format as body
So here's my code.

var btn= document.getElementById('btn');

btn.addEventListener('click', function(){

    varclientId="*My ID*";
    varclientSecret="*My PW*";
    vardata={email:"*My email*";

    var authorizationBasic=window.btoa(clientId+':'+clientSecret);

    var request = new XMLHttpRequest();
    request.open('POST', '*Server URL*');
    request.setRequestHeader('Authorization', 'Basic' + AuthorizationBasic);
    request.setRequestHeader('Accept', 'application/json');
    request.setRequestHeader('Content-Type', 'application/json');
    // request.setRequestHeader('Content-Length', '*');
    request.send(JSON.stringify(data));

    request.onreadystatechange=function(){
        if(request.readyState===4){
            alert(request.responseText);
        }
    };

} );

It doesn't work whether I run HTML or MAC terminal, but what's wrong?
(Chrome cannot set Content-Length as a header when running HTML, which is commented out.)

By the way, when I ran it in HTML, the error was as follows:

No'Access-Control-Allow-Origin' header is present on the requested resource.Origin'null' is there before not allowed access.The response had HTTP status code 404

javascript html http

2022-09-30 20:21

2 Answers

Basic authentication can be requested using the URI below.

http://user:[email protected]/

I think it can be implemented by creating the appropriate URI in the click event handler and specifying it as the second argument of XMLHttpRequest.prototype.open.

2022-09-30 20:21

I'm sorry if I can't see the operating environment.
Error to
When communicating from an application, the server domain becomes localhost, and as a result, it becomes cross-origin communication and you are notified that 'Access-Control-Allow-Origin' is required.

To send BASIC authentication
If an AJAX request requires credentials (sending cookies or BASIC authentication), I think you should include the option request.withCredentials=true; to allow it.
In addition, cross-origin communication requires options such as setRequestHeader ('X-Requested-With', 'XMLHttpRequest'); and the server must output a header (Access-Control-Allow-Origin or other necessary headers).

What I'm curious about
The Content-Type at POST (request method) is usually appapplication/x-www-form-urlencoded. です
Sending send('json_data='+JSON.stringify({test:"1234567890"}) is an example of php, but it's easy to debug with $_POST['json_data'].

2022-09-30 20:21

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656