Rails API用fetch在控制台请求报错失败 但地址栏GET可正常获取数据

问题原因 #

这是跨域资源共享（CORS）限制导致的典型异常：浏览器地址栏直接访问URL属于直接导航请求，不受跨域规则限制；但通过fetch从页面发起异步请求时，只要当前页面的域名、端口、协议和接口地址不一致，浏览器就会自动触发CORS校验，Rails后端默认未配置跨域许可时，就会拦截请求，导致fetch抛出Failed to fetch错误。

解决方案 #

步骤1：安装Rack CORS中间件 #

Rails生态标准的跨域解决方案是rack-cors中间件，在项目Gemfile中添加以下内容：

gem 'rack-cors'

保存后执行bundle install完成安装。

步骤2：配置跨域规则 #

在config/initializers/目录下新建cors.rb配置文件，写入以下内容：

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    # 开发环境可临时设置为*，允许所有来源请求；生产环境必须替换为前端实际部署域名
    origins '*'
    # 允许所有接口路径、所有请求头、所有常用请求方法
    resource '*', headers: :any, methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

步骤3：修复fetch代码的笔误 #

你当前的fetch代码存在语法问题，console.log没有执行调用，修改为：

fetch('http://localhost:3000/api/v1/users')
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error('请求错误：', err)) // 建议添加catch捕获异常方便排查

步骤4：重启Rails服务 #

配置修改完成后必须重启Rails服务，新的跨域规则才会生效，重新发起fetch请求即可正常获取数据。

额外排查点 #

如果修改后依然报错，可打开浏览器控制台「网络」标签，查看对应请求的具体报错信息：

• 确认请求的响应头是否携带CORS相关的Access-Control-Allow-Origin字段
• 排查是否存在请求方法、请求头不在许可范围内的问题

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