Netlify部署前端站点fetch请求失败，报500、CORS、JSON解析错误

问题排查与解决方案 #

核心原因定位 #

你遇到的500错误是后端服务内部报错，并非CORS配置问题：你的登录注册请求可以正常执行，说明CORS配置已经生效，请求已经成功到达后端，500是Rails服务内部抛出异常返回的错误响应。Unexpected end of JSON input报错是因为500状态下后端返回的是默认HTML错误页，并非JSON格式，直接调用r.json()解析失败导致的。

排查步骤 #

1. 优先查看Heroku后端日志
   执行本地命令heroku logs --tail，复现请求操作，即可直接看到后端的具体报错信息，是排查效率最高的方式，常见报错原因包括：数据库未迁移、空值调用报错、权限校验失败等。
2. 修复前端请求的错误处理逻辑
   fetch只有在网络异常时才会自动抛错，后端返回非2xx状态码不会进入catch逻辑，需要先手动校验响应状态，同时删除请求头里无效的Access-Control-Allow-Credentials字段（该字段是响应头，不需要前端在请求中携带），修改后的代码如下：

export const getAllPosts = () => {
  return (dispatch) => {
    return fetch("https://photo-sharer-backend.herokuapp.com/api/v1/posts", {
      credentials: "include",
      method: "GET",
      headers: {
        "Content-Type": "application/json"
      },
    })
      .then((r) => {
        if (!r.ok) {
          throw new Error(`请求失败，状态码：${r.status}`)
        }
        return r.json()
      })
      .then((response) => {
        dispatch(setAllPosts(response));
      })
      .catch(err => {
        // 可在此处添加全局错误提示逻辑
        console.error('获取帖子列表失败:', err)
      });
  };
};

3. 常见后端问题自检

• 确认已执行Heroku数据库迁移：本地开发的数据库变更不会自动同步到Heroku，需要执行heroku run rails db:migrate，如果有初始种子数据还要执行heroku run rails db:seed。
• 确认Rails session配置正确：如果/api/v1/posts接口需要登录权限，检查config/initializers/session_store.rb的domain配置，生产环境需要设置为后端域名或者:all，否则登录态cookie不会正常携带，后端校验登录状态失败会抛错。
• 确认Rails生产环境hosts配置：Rails 6及以上版本默认会拦截不在config.hosts列表里的域名请求，需要将你的Netlify前端域名添加到该配置中。

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