React对接Rails 5.0.6 API时出现JSON语法错误求助

这个错误几乎可以肯定是：你的前端React应用期望后端返回JSON格式数据，但实际收到的是HTML内容——大概率是Rails的错误页面、404页面，或是跨域问题导致的浏览器拦截提示页面。结合你的技术栈，咱们一步步排查解决：

1. 先确认后端实际返回的内容 #

别光看前端报错，直接验证后端接口的输出：

• 在浏览器地址栏直接访问你的API接口（比如http://localhost:3001/api/drinks，假设Rails跑在3001端口）
• 或者用curl命令测试：

curl -v http://localhost:3001/api/drinks

重点看两个点：

• 响应头的Content-Type是不是application/json
• 响应体是不是合法的JSON字符串，如果是HTML页面，那问题根源就在后端

2. 检查Rails API的路由配置 #

确保你的routes.rb和控制器命名对应，比如控制器是Api::DrinksController，路由要这样写：

Rails.application.routes.draw do
  namespace :api do
    resources :drinks, only: [:index, :show]
  end
end

如果路由写错，后端会返回404的HTML页面，直接触发前端的JSON解析错误。

3. 优化控制器的JSON返回逻辑 #

你的drinks_controller.rb代码可以简化，而且要确保基础控制器继承正确：

• 首先ApiController必须继承自ActionController::API（而非普通的ApplicationController），这样默认不会渲染HTML模板：

class ApiController < ActionController::API
end

• 然后index方法里不需要手动调用to_json，Rails会自动处理ActiveRecord对象的JSON序列化：

def index
  @drinks = Drink.select(:id, :title).all
  render json: @drinks
end

4. 处理跨域（CORS）问题 #

前端跑在localhost:3000，后端如果在另一个端口，必然存在跨域问题，浏览器会拦截请求，导致前端收到的是跨域错误的HTML页面：

1. 在Gemfile里添加rack-cors：

gem 'rack-cors'

运行bundle install安装
2. 在config/initializers/cors.rb里配置允许前端域名的请求：

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'http://localhost:3000' # 你的前端地址
    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

3. 重启Rails服务器生效

5. 检查前端请求的正确性 #

确保前端请求的路径、方法完全正确，比如：

// 示例：假设Rails API跑在3001端口
fetch('http://localhost:3001/api/drinks')
  .then(response => {
    // 先检查响应状态，避免拿到错误页面还强行解析JSON
    if (!response.ok) {
      throw new Error(`请求失败：状态码 ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log('拿到数据:', data))
  .catch(error => console.error('错误详情:', error));

很多时候前端写错接口路径（比如漏写/api前缀），直接导致后端返回404 HTML。

6. 查看Rails错误日志 #

打开log/development.log，里面会记录每个请求的详细信息：请求路径、参数、响应状态、报错堆栈。比如如果是数据库查询错误、模型不存在，日志里会明确告诉你问题出在哪。

按上面的步骤逐一排查，很快就能定位并解决问题。

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