Connecting to JSON API


#1

I am new to working with API’s (I have some ASP/JavaScript/SQL knowledge) and have spent the last week or so looking at lots of different solutions to access the JSON API located here https : // api. beds24 . com / json

The API is for a property booking solution and I’m looking to add properties, retrieve properties and bookings etc. I’m not looking for help achieving all the different API options, this one I am starting and struggling with is adding a new property to my property portfolio at the API endpoint found here https://api.beds24.com/json/createProperties

Once I have this working I should be able to work out the rest. I was hoping to use jQuery and Ajax as I need to eventually update an SQL database with my results from the API but for now just small steps, and to be honest will take what ever the best method is.

I have checked so many forums topics relating to the ‘Access-Control-Allow-Origin’ message in the log below and the API I am working with does this, they say (Yes they are allowed, we include the following header “Access-Control-Allow-Origin: *”) which I have added. I am working on a Windows Server my side and therefore PHP isn’t really an option.

Any help would be greatly appreciated. The system I am working on is a test system and this is the live API key so feel free to run the code. https://democontrol.wiredcontact.co.uk/apitest/index2.html Thanks for looking.

My code below and console errors to follow in the next post as I can’t have more than 2 links in a post :frowning:

<html>

<head>
<meta charset="UTF-8"> 
<title> Ajax and Json | Tutorial</title>

<style>
body{

    font-family: sans-serif;
}
    .ajax-container{
    width: 50%;
    margin: 50px auto;
}
#btnAjaxCall{
    height: 50px;
    width: 120px;
    border: none;
    border-radius: 6px;
    color: white;
    background: #3498db;
    outline: none;
    font-size: 22px;
    opacity: 0.7;
    padding: 10px;
}
#btnAjaxCall:hover{
    cursor: pointer;
    opacity: 1;
}
.item-details{
    margin-top: 10px;
    border: 1px solid #ddd;
    padding: 6px;
}

</style>
</head>

<body>
<form method=post>
<div class="ajax-container">
    <input type="button" id="btnAjaxCall" value="Ajax Call" />
    <div class="display-data">

    </div>
</div>
</form>

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script>
var count = 0;
$("#btnAjaxCall").click(function(){
    fetchDataAndDisplay();
});

function fetchDataAndDisplay(){
    $.ajax({

        headers: { 
                    'content-type': 'application/x-www-form-urlencoded',
                    'Access-Control-Allow-Origin': '*',
                    'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE',
                    'Access-Control-Allow-Headers': 'Content-Type, Authorization',
                    'content-type': 'application/json; charset=UTF-8'

                    },

        url:"https://api.beds24.com/json/createProperties",
        method:"POST",
        dataType: 'json',

        data: {
              "authentication": {
                   "apiKey": "************************"
                   },
              "createProperties": [{

                "name": "AAAAbbbb 1",
                "propKey": "2222222222888889",
                "notifyUrl": "http:\/\/www.AAAAbbbb.com\/api\/newbookings",
                "roomTypes": [{
                    "name": "Ab 1xx",
                    "qty": "1",
                    "minPrice": "10.00"
                    },
                    {
                    "name": "Ab 2xx",
                    "qty": "3",
                    "minPrice": "10.00"
                    }]
            }]
        },

    })
}

</script>
</body>
</html>

#2

Console Errors:

index2.html:1 Failed to load //api.beds24.com/json/createProperties: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘//democontrol.wiredcontact.co.uk’ is therefore not allowed access.

jquery-3.3.1.min.js:2 Cross-Origin Read Blocking (CORB) blocked cross-origin response api.beds24.com/json/createProperties with MIME type text/html. See www.chromestatus.com/feature/5629709824032768 for more details.


#3

Well for starters, the initial request negotiation uses the verb OPTIONS.
Second, the header is on the RESPONDING end of the request, not the REQUESTING end. You cant magically make the other server allow the origin :stuck_out_tongue:


#4

Thanks for that but I have no idea what you meant there :slight_smile: Kind of hoping for some guidance on getting a working solution.