Cross-Origin 请求被 Sinatra 和 ReactJS 阻止

Question

我正在使用 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 发出请求？

Answer 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

Cross-Origin 请求被 Sinatra 和 ReactJS 阻止

Cross-Origin Request Blocked with Sinatra and ReactJS

ruby

sinatra

cors