如何解决Nuxt.js应用中的CORS策略问题？

浏览器的CORS策略会阻止前端直接请求未配置跨域头的第三方API，这就是你遇到的问题——Jikan API没有允许http://localhost:3000的跨域访问，所以前端请求被拦截。以下是几种可行的解决方法：

1. 用Nuxt代理转发请求（推荐） #

Nuxt3支持通过代理模块将前端请求转发到服务器端，绕开浏览器的CORS限制。

配置步骤： #

• 在nuxt.config.ts中添加代理配置：

export default defineNuxtConfig({
  modules: ['@nuxtjs/proxy'],
  proxy: {
    '/api/jikan': {
      target: 'https://api.jikan.moe/v4',
      changeOrigin: true,
      pathRewrite: { '^/api/jikan': '' }
    }
  }
})

• 修改你的请求代码，把API地址换成代理路径：

const fetchData = async (page) => {
  const { data: recommendations } = await useFetch(
    `/api/jikan/top/anime/?page=${page}`
  );
  return recommendations;
};

这样请求会先经过Nuxt服务器，再转发到Jikan API，服务器端请求不受浏览器CORS约束。

2. 用Nuxt服务器路由做中间层 #

创建一个服务器端的API路由作为中转，由服务器发起请求到Jikan API，再把结果返回给前端。

操作步骤： #

• 在项目根目录创建server/api/jikan/top/anime.get.ts文件，内容如下：

export default defineEventHandler(async (event) => {
  const page = getQuery(event).page || 1;
  return await $fetch(`https://api.jikan.moe/v4/top/anime/?page=${page}`);
});

• 前端请求改为调用这个服务器路由：

const fetchData = async (page) => {
  const { data: recommendations } = await useFetch(
    `/api/jikan/top/anime?page=${page}`
  );
  return recommendations;
};

3. 临时方案：no-cors模式（不推荐） #

如果只是需要获取不透明的响应（不需要解析数据），可以设置请求模式为no-cors，但这个方案对你的场景没用——因为你需要读取返回的推荐数据，所以不建议用：

const fetchData = async (page) => {
  const response = await fetch(`https://api.jikan.moe/v4/top/anime/?page=${page}`, {
    mode: 'no-cors'
  });
  // 无法读取response中的数据，因为是不透明响应
  return null;
};

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