Getting familiar with CodePen

Follow these steps to use CodePen to connect to our API through GET:

  1. Go to https://codepen.io. This will take us to the CodePen website.
  2. Click tab Create and then select the Pen option.
  3. Click the Settings menu, select the Behavior tab, and uncheck the Enabled option under Auto-Updating Preview. This will enable us to Run our code.

Enter the following code in the JS section of the CodePen UI and click Run:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://8vqyyjelad.execute-api.us-east-1.amazonaws.com/dev/greeting/Heartin');
xhr.onreadystatechange = function (event) {
console.log(event.target.response);
}
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send();

We should receive a blank response in the CodePen UI. But if we open the developer tools for our browser (for example, Chrome Developer tools), we should see the actual error message as follows:

This is because CORS is not enabled. We will create an API with CORS enabled and test it again in the How to do it... section. We will also see how we can enable CORS on the current API. 

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.148.144.228