How to send AJAX request with headers

Question

How to send AJAX request with headers

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)

1

I explain my drawback: I am trying to consume a API of a page so I make the following request:

    <script>
    var button = document.getElementById("btn_submit");
    button.addEventListener("click", e => {
        e.preventDefault;
        var vin = document.getElementById("id_vin").value;
        console.log(vin);

        var url = 'https://api.mercedes-benz.com/image/v1/vehicles/${vin}/components?apikey=mi_clave';
        $.ajax({
            url: url,
            type: 'GET',
            accepts: "application/json",
            crossDomain: true,
            success: function (result) {
                // process result
                $('#result').html(result.ip);
            },
            error: function (e) {
                 // log error in browser
                console.log(e.message);
            }
        });
    }) 
</script>

But I get the following error:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

For what I read, how to add the header or something like that is my first time working with AJAX so they can guide me, I would really appreciate it.

Greetings: D

UPDATE.

            var url = 'https://api.mercedes-benz.com/image/v1/vehicles/${vin}/components?apikey=xxxx';
        $.ajax({
            url: url,
            type: 'GET',
            accept: "application/json",
            crossDomain: true,
            dataType: 'jsonp',
            success: function (result) {
                // process result
                $('#result').html(result.ip);
            },
            error: function (e) {
                 // log error in browser
                console.log(e.message);
            }
        });
    })

This gives me the following error:

But if I click on the link I can see the result then I do not know how to treat that result so that it prints on the page:

UPDATE 2

when modifying the dataType: "json"

I get the following error:

UPDATE 3 I send my request as

I get the error:

And here's the answer from the Network tab> Hearders

This is the preview of the answer (what I want)

And the answer in json seems to me:

I clarify that my page is hosted locally, that is, I have not uploaded it to any server, I am running it from my local laptop

javascript html5 ajax

asked by Naoto 01.10.2018 в 16:38

source

3 answers

Progress bar in laravel Determine if a matrix can be divided into two such that it has the same number of special characters

score 1 · Answer 1

You should see two things, the first is that you must request an authorization as a token, when you have already sent your token obtained in the header of the request. the second thing is that you have to see if the API allows you to send the credentials in your headers in that case already or you have to send a token but the user that you have been assigned

  <script>
var button = document.getElementById("btn_submit");
button.addEventListener("click", e => {
    e.preventDefault;
    var vin = document.getElementById("id_vin").value;
    console.log(vin);

    var url = 'https://api.mercedes-benz.com/image/v1/vehicles/${vin}/components?apikey=mi_clave';
    $.ajax({
        url: url,
        headers: {
        'Authorization':'token'
        type: 'GET',
        accepts: "application/json",
        crossDomain: true,
        success: function (result) {
            // process result
            $('#result').html(result.ip);
        },
        error: function (e) {
             // log error in browser
            console.log(e.message);
        }
    });
})

score 1 · Answer 2

What you have is a CORS (HTTP access control) error, because you are making the request from a different domain than the one hosting the images. What you have to do is ask those who maintain the API to add your domain to the access list. Since you are working from a local environment, that can be more complicated. Keep in mind that accessing the terminal point (endpoint) directly with the browser is not a problem of CORS, but only when the request is made through AJAX, so you can access the URL of the endpoint with the browser, without problems.

The CSRF control with token, compo suggests other users, is done only for idempotent requests or POST, not for GET.

score 0 · Answer 3

Add the 'jsonp' data type to your request

dataType: 'jsonp',

Your request would be like this:

$.ajax({
        url: url,
        type: 'GET',
        accepts: "application/json",
        crossDomain: true,
        dataType: 'jsonp',
        success: function (result) {
            // process result
            $('#result').html(result.ip);
        },
        error: function (e) {
             // log error in browser
            console.log(e.message);
        }
    });