如何解决 Unsplash API 调用中的跨域请求被阻止（CORS）错误 返回列表

本文详解因 url 拒绝拼写错误导致的 `cross-origin request blocked` 错误，重点修复 `api.unslpash.com` 这一无效域名，并同步修正 dom 属性拼写问题，使前端可正常调用 unsplash 官方 api。

在使用 Unsplash API 进行前端图像搜索开发时，你遇到的 “Cross-Origin Request Blocked: The Same Origin Policy disallows…” 错误，表面看是 CORS 问题，但实际根源并非浏览器策略限制——而是你向一个根本不存在的域名发起了请求，导致请求被重定向或返回非预期响应，进而触发浏览器的跨域安全拦截。

核心问题在于这行代码中的拼写错误：

const url = `https://api.unslpash.com/search/photos?page=${page}&query=${inputData}&client_id=${accesKey}`;
// ❌ 错误：unslpash.com → 域名不存在，DNS 解析失败或返回 404/301，fetch 实际未到达 Unsplash 服务器

✅ 正确的官方 API 域名是：https://api.unsplash.com（注意是 unsplash，非 unslpash）。请立即更正为：

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

此外，代码中还存在一处 DOM 属性拼写错误，虽不直接引发 CORS，但会影响功能：

imageLink.targer = "_blank"; // ❌ 'targer' 是错别字

应改为标准属性名：

imageLink.target = "_blank"; // ✅ 正确拼写，确保链接在新标签页打开

⚠️ 补充注意事项：

• Unsplash API 允许前端直连（无需服务端代理），前提是使用正确域名、有效 client_id，且请求头符合要求（fetch 默认满足）；
• 确保你的 accessKey 已在 Unsplash Developers 后台正确生成，并启用 search 权限；
• 若后续仍报 CORS 错误，请检查浏览器控制台完整错误信息——若提示 Failed to fetch 或 net::ERR_NAME_NOT_RESOLVED，大概率仍是域名拼写或网络问题，而非真实跨域策略拒绝；
• 生产环境建议对 inputData 做 URL 编码，避免特殊字符（如空格、&、/）破坏请求 URL：

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

修复上述两处关键错误后，你的图像搜索功能即可正常运行。记住：CORS 报错有时只是“症状”，真正的病因往往藏在请求链路的第一环——URL 是否真实可达。