完成 XMLHttpRequest 需要哪些标头？

Question

I am trying to access images from a Google Photos album and populate a webpage with those images. This goal has been completed before , but implemented with Axios (which I'm not very familiar with). My issue is that my origin (currently a local port) is not allowed by Access-Control-Allow-Origin. From the tutorials and examples I've followed, including this one from MDN , I thought my implementation allows the port I'm running on, but I still run into the same issue.

// This is not the actual album url; for privacy I have changed it
const ALBUM_URL = "https://my-google-photos-album-url";


$(document).ready(function()
{
    GetAlbum();
});

function GetAlbum()
{
    const xhr = new XHRHttpRequest();
    xhr.open("GET", ALBUM_URL);
    // Set the origin to the port we will be using
    xhr.setRequestHeader("Access-Control-Allow-Origin", "http://localhost:8000");

    xhr.onreadystatechange = function(data)
    {
        console.log(data);
    }

    xhr.send();
}

Expected Behavior: Print a string of HTML and JS as was shown in the linked example .

Actual Behavior: Gives an error indicating that "http://localhost:8000" is not allowed. Exact details are given below.

Error log:

Origin http://localhost:8000 is not allowed by Access-Control-Allow-Origin.

XMLHttpRequest cannot load https://my-google-photos-album-url due to access control checks.

Failed to load resource: Origin http://localhost:8000 is not allowed by Access-Control-Allow-Origin.

What am I missing here? I have also tried setting "Access-Control-Allow-Origin" to "*", but without any luck. Any and all help is useful, thanks!

Answer 1

The CORS error that you get is returned by the server that you are trying to access - the server behind the https://my-google-photos-album-url .

If you have access to this server, you should set there the CORS policy that will allow the client ( http://localhost:8000 in your case) to access its resources. Otherwise, I'm not sure you can access it.