调用Wynncraft API出现No 'Access-Control-Allow-Origin' CORS错误如何解决？

问题根源 #

你遇到的问题由两个原因导致：

1. Wynncraft公开API未配置允许浏览器跨域访问的CORS响应头，直接从前端发起请求会被浏览器同源策略拦截，触发你看到的CORS错误。
2. 提供的JS代码中未提前声明创建ul元素，直接使用未定义的ul变量执行插入操作，就算接口请求成功也无法正常渲染内容。

解决方案 #

方案1：本地开发配置代理 #

如果你使用Vite、Webpack等前端构建工具开发，可以在工具配置中添加代理规则，转发API请求规避跨域限制，以Vite为例配置如下：

// vite.config.js
export default {
  server: {
    proxy: {
      '/api': {
        target: 'https://api.wynncraft.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
}

修改请求地址为：

const url = '/api/v2/ingredient/list';

如果是纯静态页面本地测试，可以临时关闭浏览器安全模式启动，规避CORS限制，该方法仅适合本地测试使用。

方案2：后端中转请求（生产环境推荐） #

生产环境不要直接从前端请求第三方API，改为请求你自己的后端接口，由后端服务调用Wynncraft API再将结果返回给前端，服务端请求不受浏览器同源策略限制，不会出现CORS问题。

修复JS渲染逻辑 #

原有JS代码缺少ul元素创建和挂载步骤，修改后的完整代码如下：

const url = '/api/v2/ingredient/list'; // 已配置代理后的请求地址
const mainDiv = document.getElementById('container');
// 提前创建ul元素并挂载到容器
const ul = createNode('ul');
append(mainDiv, ul);

fetch(url)
.then((resp) => resp.json())
.then(function(data) {
 let ingredients = data.results;
 return ingredients.map(function(ingredient) {
     let li = createNode('li');
     let span = createNode('span');
     span.innerHTML = `${ingredient.name}`;
     append(li, span);
     append(ul, li);
 })
})
.catch(function(error) {
 console.log(error);
});

function createNode(element) {
 return document.createElement(element);
}

function append(parent, el) {
 return parent.appendChild(el);
}

内容的提问来源于stack exchange，提问作者Jacob R.