Nuxt.js应用部署至Netlify后本地API正常线上fetch请求返回404

这不是CORS问题。
本地运行正常是因为启动Nuxt本地开发服务时，你写在api/index.js里的逻辑作为服务端中间件随Node服务运行，能正常拦截处理/api/*路径的请求。但Netlify是静态站点托管平台，默认不会运行你项目里自定义的Node.js服务端中间件代码，部署后所有发往/api/info/*的请求找不到对应资源，会直接返回Netlify默认的404 HTML页面。
你看到的SyntaxError: Unexpected token < in JSON at position 0报错，就是因为fetch拿到的响应是<html>开头的404页面内容，不是预期的JSON格式，调用response.json()解析时直接失败。

• 把原来的API逻辑迁移为Netlify Functions
  1. 在项目根目录创建netlify/functions文件夹，新建info.js文件，把原来的第三方接口请求逻辑迁移进去：

const rp = require('request-promise');
const apiKey = process.env.POLICY_API_KEY;

exports.handler = async (event, context) => {
  const stateAbbr = event.path.split('/').pop();
  try {
    const response = await rp({
      uri: `https://third-party-api-here.com/states/${stateAbbr}/`,
      method: 'GET',
      headers: { 
        'token': apiKey,
      },
      json: true
    });
    return {
      statusCode: 200,
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(response)
    }
  } catch (err) {
    return {
      statusCode: 500,
      body: JSON.stringify({ error: err.message })
    }
  }
}

2. 在项目根目录创建netlify.toml配置文件，添加路径重写规则，把原来的/api/info/*请求转发到上面写的函数，同时配置正确的构建命令和产物目录：

[build]
  command = "nuxt generate"
  publish = "dist"
  functions = "netlify/functions"

[[redirects]]
  from = "/api/info/*"
  to = "/.netlify/functions/info/:splat"
  status = 200

3. 去Netlify站点的后台环境变量配置页，添加POLICY_API_KEY，值和你本地用的接口密钥保持一致。

• 移除原来nuxt.config.js里针对api/index.js的serverMiddleware配置，避免本地和线上逻辑不一致。
• 重新触发站点部署即可。

补充说明：如果是CORS问题，浏览器控制台会明确输出跨域资源共享相关的拦截报错，不会返回404状态码，404状态码已经明确说明请求路径对应的资源在服务端不存在。

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