跨域请求被 Sinatra 和 ReactJS 阻止答案

【问题标题】：Cross-Origin Request Blocked with Sinatra and ReactJS跨域请求被 Sinatra 和 ReactJS 阻止
【发布时间】：2020-01-15 21:28:14
【问题描述】：

我正在使用 ReactJS 前端构建一个简单的 Sinatra 后端。当我尝试从 React 应用程序向我的 Sinatra 项目中的路由发出请求时，它给了我 CORS 错误。我尝试像这样在我的项目中启用 CORS，但它不起作用：

require 'sinatra'
require 'sinatra/cross_origin'
require 'json'

configure do
    enable :cross_origin
end

set :allow_origin, :any
set :allow_methods, [:get, :post, :options]
set :allow_credentials, true
set :max_age, "1728000"
set :expose_headers, ['Content-Type']

get '/' do 
    'Hello!'    
end

post '/download' do
    content_type :json

    return {res: params['songs']}.to_json
end

所以当我从 React 发出这样的请求时：

axios.post('http://localhost:4567/download', {}, {
    songs: this.state.songs
}).then(res => {
    console.log(res.data)
})

我收到如下所示的 CORS 错误：

我在控制台中收到此错误：

我应该在我的 Sinatra/React 项目中进行哪些更改才能完成这项工作，以便我可以从 React 向 Sinatra 发出请求？

【问题讨论】：

尝试添加before { response.headers['Access-Control-Allow-Origin'] = '*' }
@maxpleaner 仍然无法正常工作
您确定这是 CORS 错误吗？我在您的问题中看不到实际错误
@maxpleaner 抱歉，我将在控制台中截取错误。让我更新问题
@maxpleaner 我更新了问题

标签： ruby cors sinatra

【解决方案1】：

见https://github.com/britg/sinatra-cross_origin#responding-to-options。显然您需要添加自己的代码来手动处理OPTIONS 请求——因为sinatra-cross_origin gem 本身实际上并不处理OPTIONS 请求。具体来说，您显然需要添加以下内容：

options "*" do
  response.headers["Access-Control-Allow-Methods"] = "HEAD,GET,PUT,POST,DELETE,OPTIONS"
  response.headers["Access-Control-Allow-Headers"] = "Content-Type"
  200
end

【讨论】：