Ruby on Rails部署Heroku API遇跨域错误：无Access-Control-Allow-Origin头

嘿，我之前开发Rails应用调用Heroku上的API时也碰到过一模一样的问题！这个错误其实是浏览器的同源策略在搞鬼——你的前端跑在http://localhost:3000，而API在Heroku的域名下，两个域名不一样，浏览器就会拦截请求，除非API返回Access-Control-Allow-Origin响应头允许你的前端域名访问。另外错误里还提到“请求的资源不存在”，之后也别忘了检查下API的路由是不是写错了，先把CORS问题解决了再说。

下面是具体的解决步骤：

1. 添加rack-cors gem #

Rails官方推荐用rack-cors中间件来处理跨域请求，先把它加到你的Gemfile里：

# Gemfile
gem 'rack-cors'

然后在本地终端运行：

bundle install

如果是部署到Heroku，push代码后Heroku会自动执行bundle install，不用额外操作，但本地先装好方便测试。

2. 配置CORS规则 #

在config/initializers目录下创建一个cors.rb文件（如果没有的话），然后添加以下配置代码：

# config/initializers/cors.rb
Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    # 这里填允许访问API的前端域名，开发环境填localhost:3000，生产环境换成你的实际前端域名
    origins 'http://localhost:3000', 'https://your-production-frontend.com'
    
    # 允许所有路径的请求，你也可以指定特定路径比如'/api/*'
    resource '*',
      headers: :any, # 允许所有请求头
      methods: [:get, :post, :put, :patch, :delete, :options, :head] # 允许所有常用HTTP方法
  end
end

⚠️ 注意：生产环境别用*作为origins（除非你的API是完全公开的），否则会有安全风险，一定要指定具体的前端域名。

3. 重启服务并部署到Heroku #

• 本地开发的话，重启你的Rails服务器，测试下请求能不能正常发送。
• 确认没问题后，把代码提交并部署到Heroku：

git add .
git commit -m "Fix CORS issue by adding rack-cors configuration"
git push heroku main

（如果你的主分支不是main，换成对应的分支名就行）

额外检查点 #

• 如果还是报错，去Heroku查看日志确认中间件是否加载成功：

heroku logs --tail

• 别忘了检查API的路由是否正确，错误里提到“请求的资源不存在”，可能是你调用API的URL拼写错误，或者HTTP方法不匹配（比如前端用POST，但API只定义了GET路由）。

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