What are the steps for implementing CORS?

I recently attempted to set up Ajax calls and stumbled upon the following code snippet:

<!DOCTYPE html>
<html>
<body>

    <p id="demo">Let AJAX update this text.</p>

    <button type="button" onclick="loadDoc()">Update Content</button>

    <script>
    function loadDoc() {
      var xhttp;
      if (window.XMLHttpRequest) {

        xhttp = new XMLHttpRequest();
        } else {

        xhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
      xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
          document.getElementById("demo").innerHTML = xhttp.responseText;
        }
      }
      xhttp.open("GET", "www.google.com", true);
      xhttp.send();
    }
    </script>

    </body>
    </html>

As I tried to access the URL, an error message stating "XHR cannot load" appeared. I understand that it has something to do with CORS. Despite consulting various resources, I am struggling to comprehend the issue. Can someone please clarify and help resolve this matter? Any assistance would be greatly appreciated.

Answer №1

Google prohibits cross-domain access to their search engine. Your approach appears fine, but the URL you are attempting to access does not permit your domain.

Consider testing it with a file hosted on your own local machine instead.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Remove a function tied to an element on a page that has loaded

I have been struggling to remove a function that is attached to an event using both unbind and off, but unfortunately, it has been unsuccessful. To illustrate this issue clearly, I have created a replica on jsFiddle here. The recreated problem closely res ...

The Apollo Client mutation input type is missing data

Currently, I am working with Apollo-client and facing an issue while making a mutation on the client. It seems that when I perform my mutation, the data being passed to the server becomes void. Below is my mutation type: type: recipeType, args:{ ...

Tips for including arguments in pm2 file execution

What steps should I take to run the cluster.js file on pm2 successfully? When I try executing the file locally with 'node cluster.js 0 1' command, it appends two arguments but encountering an error when using 'pm2 start "cluster.js 0 1"&apos ...

Is there a CSS3 Selector With Similar Functionality to jQuery's .click()?

For a few years now, I have been utilizing a pure CSS navigation system. However, with the recent increase in mobile site projects at my workplace, I am encountering issues with drop-down menus not functioning properly on mobile devices. Despite this chall ...

Modifying the sidebar navigation in Ionic for a user who is logged in

Is it possible to modify the side menu content based on whether a user is logged in or not? Example 1 - user not logged in: If a user isn't logged in, this side menu will be displayed. https://i.stack.imgur.com/iY427.png Example 2 - user is logged ...

establishing status within enclosed reaction

In the process of developing a react application, I am encountering difficulties in correctly setting the state with the nested response data received from an api. The state is not aligning as desired. Here is the sample response obtained from the api: [ ...

Could this be a problem within my recursive function?

Struggling to iterate through a stack of HTML Elements, I attempted to write a recursive function with no success. In the code snippet below, I'm facing challenges in returning a value from an if statement and ultimately from the function itself. Wh ...

Unlock the encrypted information in the blockchain

I've been working on encrypting and decrypting values using Node's built-in crypto module. I found a helpful tutorial that showed me how to encrypt the data, but it didn't provide any sample code for decryption. When I tried using code from ...

Picking an element that has a dynamic data attribute, but also considering those with a hyphen

Currently, I am developing a function that will select a span element when clicked based on its data attribute and value. Here is the code snippet: function moveFilterElements(event) { if ($(event).hasClass('active')) { var dataAtt ...

Eliminate item from array based on certain criteria

In certain scenarios, I must update the filters. Under specific data conditions, I am required to eliminate 1 item from an array. Here is the code snippet: useEffect(() => { let canceled = false; const filters = [ new C ...

Is there a glitch in JavaScript when comparing dates?

What's wrong with this code? function test() { var start = new Date(2012, 3, 31, 19, 0, 0); // Start: 3/31/2012 7:00 PM var end = new Date(2012, 4, 1, 1, 0, 0); // End: 4/01/2012 1:00 AM if (end < start) console.log("oops ...

How can you notice when a DOM element is deleted from the page?

I am in the process of creating a custom directive that will ensure only one element is active at a time. Directive: displayOneAtATime Description: This directive can be applied to a DOM node to guarantee that only one element with this directive can be v ...

Having trouble retrieving JSON values from the AJAX success function in my CodeIgniter application

Hey everyone, I'm facing a simple error that's giving me a hard time. No matter what I do, I can't seem to access the JSON values in my code. Whenever I try to alert after parsing the JSON, it just shows me 'undefined'. Can anyone ...

Activating two buttons in jquery will trigger this action

I am currently working on developing a filter button that will perform different actions based on which buttons are pressed. Pressing button1 will trigger one action, while pressing button2 will trigger another action. If button1 is pressed first, followe ...

jqueryajax function returns a boolean value upon completion

Recently, I developed a container method to handle an ajax request: function postRating(formData) { $.ajax({ type: "POST", url: '/api/ratings', data: formData }) .done(function () { return true ...

Preserve content from a hyperlink using JavaScript

How can I store a value to the cache using JavaScript when clicking on an anchor link? The code below sets up the dynamic content: <a align="left" href="projectoverview.html">Test Manager</a> I want to save the text "Test Manager" to the cach ...

Tips for displaying a table with a button click

I am struggling to figure out how to embed a table inside a button in order to display the table when the button is clicked and hide it when clicked again. Below is the code I have been working with: function toggleTable(){ document.getElementById ...

The axios requests are sent to the backend API, but the webpage remains empty without

I am trying to retrieve a base64 encoded image from my local backend by making a local API call. The logging on the backend confirms that axios is successfully calling the API, however, the frontend displays an empty page with no data. What could be caus ...

Show each individual array element in Ajax using a loop

When working with PHP, I often use foreach to loop through an array and then JSON encode it to display all the results at once. However, I ran into a situation where I needed to display each array item one by one while the foreach loop was still running. ...

React Higher Order Components (HOCs) are functioning correctly with certain components but not

I have encountered an issue where using a Higher Order Component (HOC) to bind an action to various types of elements, including SVG cells, results in unintended behavior. When I bind the onClick event handler normally, everything works fine, but when I ap ...