Search code examples
javascriptcorsconsole.log

Cross-Origin Request Blocked: The Same Origin Policy disallows (unsplash API)


I am new to web developing and I am trying to make a web application which generates images, I am using unsplash API from which I can fetch data and show on my web, but when I press the submit button after entering image I am getting this error. Can you look at my code and tell me what am I doing wrong?

const accesKey = "JN39ryZJTydJj6gvXs29muFzRQTYSWa-L7NhuTDK8Wo";
// for storing form
const formEl = document.querySelector("form");
// for storing input section
const inputEl = document.getElementById("search-input");
//for storing images
const searchResults = document.querySelector(".search-results");
// for storing showmore btn
const showMore = document.getElementById("show-more-btn");
//for storing input data

let inputData = "";
let page = 1;

async function searchImages() {
  inputData = inputEl.value;
  const url = `https://api.unslpash.com/search/photos?page=${page}&query=${inputData}&client_id=${accesKey}`;

  const response = await fetch(url);
  const data = await response.json();

  const results = data.results;

  if (page === 1) {
    searchResults.innerHTML = "";
  }

  results.map((result) => {
    const imageWrapper = document.createElement("div");
    imageWrapper.classList.add("search-result");
    const image = document.createElement("img");
    image.src = result.url.small;
    image.alt = result.alt_description;
    const imageLink = document.createElement("a");
    imageLink.href = result.links.html;
    imageLink.targer = "_blank";
    imageLink.textContent = result.alt_description;

    imageWrapper.appendChild(image);
    imageWrapper.appendChild(imageLink);
    searchResults.appendChild(imageWrapper);
  });

  page++;

  if (page > 1) {
    showMore.style.display = "block";
  }
}

formEl.addEventListener("submit", (event) => {
  event.preventDefault();
  page = 1;
  searchImages();
});

showMore.addEventListener("click", () => {
  searchImages();
})

I am asking the question first time so excuse me mistakes,


Solution

  • Based on the code you provided, I can see the issue. The error you're encountering is likely due to a typo in the URL of the API you're calling. It seems like you misspelled "unsplash" in the URL, which is causing a CORS (Cross-Origin Resource Sharing) error.

    To fix the issue, update the API URL from:

    const url = `https://api.unslpash.com/search/photos?page=${page}&query=${inputData}&client_id=${accesKey}`;
    

    to:

    const url = `https://api.unsplash.com/search/photos?page=${page}&query=${inputData}&client_id=${accesKey}`;
    

    Notice that I changed unslpash to unsplash in the URL. With this fix, the CORS error should be resolved, and your application should be able to fetch data from the Unsplash API successfully.

    Additionally, there is a small typo in your code for setting the target attribute on the imageLink. It should be spelled as target instead of targer:

    imageLink.target = "_blank";
    

    Make sure to correct this as well to open the image links in a new tab when clicked.