调用公开新闻API遇CORS错误，Nuxt 2项目该如何解决？

无需修改API的替代方案 #

1. 用Nuxt服务器端代理（推荐） #

Nuxt 2自带代理模块，能把前端请求转发到服务器端，绕开浏览器的CORS限制：

• 先安装依赖：npm install @nuxtjs/proxy --save
• 在nuxt.config.js中配置代理规则：

export default {
  modules: ['@nuxtjs/proxy'],
  proxy: {
    '/api/news-proxy': {
      target: 'https://第三方API的实际域名',
      pathRewrite: { '^/api/news-proxy': '' },
      changeOrigin: true
    }
  }
}

• 前端调用时，把请求地址替换为代理路径，比如原请求https://xxx.com/news/list改为/api/news-proxy/news/list，请求会先经过Nuxt服务器转发，服务器端请求不受浏览器CORS规则限制。

2. 在服务器端钩子中发起请求 #

Nuxt的asyncData或fetch钩子在SSR模式下是服务器端执行的，静态生成时则在构建阶段执行，这里的请求由服务器发起，不会触发浏览器CORS检查：

export default {
  async asyncData({ $axios }) {
    const res = await $axios.get('https://第三方API域名/具体接口路径')
    return { newsList: res.data }
  }
}

注意：如果是客户端路由跳转（比如nuxt-link跳转），后续页面渲染可能在客户端执行，此时仍会触发CORS，建议结合代理方案使用。

3. 静态生成预获取数据 #

若新闻内容不需要实时更新，可通过Nuxt的静态生成功能在构建阶段预拉取所有数据，生成静态HTML后无需前端再发请求：

• 在nuxt.config.js中配置生成路由：

export default {
  generate: {
    async routes() {
      const { data } = await $axios.get('https://第三方API域名/news/list')
      return data.map(news => `/news/${news.id}`)
    }
  }
}

• 执行npm run generate生成静态文件，部署后直接提供预渲染好的页面。

什么时候必须要求客户调整API？ #

如果以上方案都无法满足需求（比如必须在客户端实时发起请求，且无法使用代理/SSR），则需要客户调整API：

• 公开API不配置CORS头不符合前端调用规范，即便是公开接口，也需要添加Access-Control-Allow-Origin等必要头，允许目标域名的跨域请求。
• 可以建议客户配置CORS时限制来源域名（而非直接开放*），兼顾安全性和可用性。

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