使用Unsplash API遇跨域请求拦截，请求排查代码问题

你的代码里有几个关键问题，直接导致了跨域错误和功能异常：

1. API地址拼写错误 #

你写的API地址是https://api.unslpash.com/search/photos，这里的unslpash拼写错误，正确域名是unsplash。错误的域名会让浏览器认为是无效的跨域请求，触发你看到的拦截提示。正确地址应该是：

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

2. 数据属性拼写错误 #

• 图片地址调用错误：result.url.small应该是result.urls.small，Unsplash返回的图片链接存在于urls对象下，不是url，这个错误会导致图片无法加载。
• 链接属性错误：imageLink.targer应该改为imageLink.target，写错属性名会导致点击链接无法在新窗口打开。
• 变量名不规范：accesKey建议改为accessKey，虽然不影响功能，但能避免后续混淆。

3. 额外的健壮性修复建议 #

• 空输入不发起请求，避免无效调用
• 添加请求错误捕获，防止页面无响应
• 无搜索结果时显示提示信息

修复后的完整代码：

const accessKey = "JN39ryZJTydJj6gvXs29muFzRQTYSWa-L7NhuTDK8Wo";
const formEl = document.querySelector("form");
const inputEl = document.getElementById("search-input");
const searchResults = document.querySelector(".search-results");
const showMore = document.getElementById("show-more-btn");

let inputData = "";
let page = 1;

async function searchImages() {
  inputData = inputEl.value.trim();
  if (!inputData) return; // 空输入不发起请求

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

  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`请求错误: ${response.status}`);
    }
    const data = await response.json();
    const results = data.results;

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

    if (results.length === 0) {
      searchResults.innerHTML = "<p>未找到相关图片，请尝试其他关键词</p>";
      showMore.style.display = "none";
      return;
    }

    results.map((result) => {
      const imageWrapper = document.createElement("div");
      imageWrapper.classList.add("search-result");
      const image = document.createElement("img");
      image.src = result.urls.small;
      image.alt = result.alt_description || "无描述图片";
      const imageLink = document.createElement("a");
      imageLink.href = result.links.html;
      imageLink.target = "_blank";
      imageLink.textContent = result.alt_description || "查看原图";

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

    page++;
    showMore.style.display = "block";
  } catch (error) {
    console.error('图片搜索失败:', error);
    searchResults.innerHTML = "<p>图片搜索失败，请稍后重试</p>";
    showMore.style.display = "none";
  }
}

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

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

内容的提问来源于stack exchange，提问作者Sarib Jawad