REST API call to Octopus using Javascript

[mounica.gandlaparthi.consultan (Mounica Gandlaparthi Consultant)]

Hi,

I was trying to create a web page for my company which requires me to get some data from Octopus. I tried to use JavaScript to make REST API calls. But I get an error “Failed to load resource: the server responded with a status of 404 (Not Found)”. The same API call works in postman, but returns an error in the browser. Below is the sample JavaScript code for reference. Please let me know if there is something I need to add or change to get the data.

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log(xhttp.responseText);
}
};
xhttp.open(“GET”, “https://cors-anywhere.herokuapp.com/http://abcd-octopusdeploy.aws-emwn.company.net/api/Spaces-1/projectgroups/ProjectGroups-123/projects”, true);
xhttp.setRequestHeader(“X-Octopus-ApiKey”, “API-ABCD123EFG”);
xhttp.send();

Thank you for looking into this.
Regards,
Mounica

[Ziaul.Islam]

Hi Monuica,

Sorry to see you are having this issue.

The error was telling you:

Missing required request header. Must specify one of origin, x-requested-with.

By adding this into the SetRequestHeader, you will be able to get the API results.

var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
    console.log(xhttp.responseText)
    }
    };
    xhttp.open("GET", "https://cors-anywhere.herokuapp.com/https://YourOctopusServer.com/api#/projects", true)
    xhttp.setRequestHeader("X-Octopus-ApiKey", "API-abc123456789", "origin", "x-requested-with");
    xhttp.send()

I would look at this guide here for further information. I found it very useful to understand how the calls are made :

How to Connect to an API with JavaScript

By looking at the Documentation for Cors-Anywhere, it will give you a better understanding of how these calls are made:

GitHub - Rob--W/cors-anywhere: CORS Anywhere is a NodeJS reverse proxy which...

I hope this information has been useful to you.

If you require any further assistance, please feel free to reach out.

Kind regards,
Ziaul

[mounica.gandlaparthi.consultan (Mounica Gandlaparthi Consultant)]

Hi Ziaul,

I still get the same error “Missing required request header. Must specify one of: origin,x-requested-with” even after changing the SetRequestHeader to xhttp.setRequestHeader(“X-Octopus-ApiKey”, “API-abc123456789”, “origin”, “x-requested-with”); please let me know how to proceed.

Thanks,
Mounica

[Ziaul.Islam]

Hi Mounica,

Sorry to see the issue is persisting,

Could you tell me which browser you are using to run this on?

I’ve done some further testing for this issue here.

The first thing that comes to my mind when I look at the code you have sent to me I’m not sure if this was done inside this forum, but the quote marks which are typically associated with java-script do not look like:

“x-requested-with”

but rather look like this:

"x-requested-with"

it’s a subtle difference which could cause an error.

Could you please confirm if the quote marks around within the java-script code are correct?

I look forward to your response.

Kind regards,
Ziaul