Запрос перекрестного происхождения заблокирован с помощью Sinatra и ReactJS - PullRequest
Новая
       2

Запрос перекрестного происхождения заблокирован с помощью Sinatra и ReactJS

0 голосов
/ 14 января 2020

Я создаю простой бэкэнд Синатры с ReactJS внешним интерфейсом. Когда я пытаюсь сделать запрос на маршрут в моем проекте Sinatra из приложения React, это вызывает ошибку 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 ошибка, которая выглядит так:
enter image description here

И я получаю эту ошибку в консоли: enter image description here

Что следует Я изменяю в своем проекте Sinatra / React эту работу, чтобы я мог отправлять запросы из React в Sinatra?

1 Ответ

1 голос
/ 15 января 2020

См. https://github.com/britg/sinatra-cross_origin#responding -в-опции . Очевидно, вам нужно добавить собственный код для ручной обработки OPTIONS запросов - потому что сам гем sinatra-cross_origin на самом деле не обрабатывает 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
...