Google safe browsing API 403 error: The request is missing a valid API key – Jquery ajax

My ajax code is as follows:

    $("#my_form").submit(function(event){
    event.preventDefault(); //prevent default action 

    var api_url = "https://safebrowsing.googleapis.com/v4/threatMatches:find?"
    var key = 'A..............................s'
    api_url += key

    console.log(api_url);

    var payload = 
    {
        "client":{
            "clientId": "2815.........................apps.googleusercontent.com",
            "clientVersion": "1.0.0",
        },
        "threatInfo": {
            "threatTypes":      ["MALWARE", "SOCIAL_ENGINEERING"],
            "platformTypes":    ["WINDOWS"],
            "threatEntryTypes": ["URL"],
            "threatEntries": [
              {"url": "http://www.pitt.edu/"},
              {"url": "http://www.exchange.pitt.edu/"}
            ]
          }
    };

    $.ajax({
        type: "POST",
        url: api_url,
        contentType: "applicaiton/json; charset=utf-8",
        dataType: "json",
        data: JSON.stringify(payload),
    success:function (data) {
        console.log("ok");
         console.log(data);
    },
    error:function(status){
        console.log("fail");
        console.log(status);
    }
    });

I have the API enabled for my project
API image

And I created credentials for a api key. I’ve tried enabling Oath 2.0 credentials in order to get my client id.

Credentials image