Невозможно отправить запрос на отправку, когда для параметра «Тип контента» установлено значение «application/json»

Question

Я работаю над приложением React, и я использую fetch для отправки запроса. Недавно я создал форму регистрации, и теперь я интегрирую ее с ее API. Ранее API принимал url-кодированные данные, и все было нормально. но теперь, когда требование изменилось, и API принимает данные в JSON, мне пришлось изменить заголовок типа содержимого с «application/x-www-form-urlencoded» на «application/json». Но я получаю следующее сообщение об ошибке:

Fetch API cannot load http://local.moberries.com/api/v1/candidate . Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://localhost:3000 ' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Я даже установить «Access-Control-Allow-Headers» в API, но он по-прежнему не работает. Вот соответствующий код на стороне клиента:

sendFormData() { 
    let {user} = this.props; 

    var formData = { 
     first_name: ReactDOM.findDOMNode(this.refs.firstName).value, 
     last_name: ReactDOM.findDOMNode(this.refs.lastName).value, 
     city: ReactDOM.findDOMNode(this.refs.currentCity).value, 
     country: ReactDOM.findDOMNode(this.refs.currentCountry).value, 
     is_willing_to_relocate: user.selectedOption, 
     cities: relocateTo, 
     professions: opportunity, 
     skills: skills, 
     languages: language, 
     min_gross_salary: minSal, 
     max_gross_salary: maxSal, 
     email: ReactDOM.findDOMNode(this.refs.email).value, 
     password: ReactDOM.findDOMNode(this.refs.password).value 
    }; 

    var request = new Request('http://local.moberries.com/api/v1/candidate', { 
     method: 'POST', 
     mode: 'cors', 
     headers: new Headers({ 
     'Accept': 'application/json', 
     'Content-Type': 'application/json' 
     }) 
    }); 

    var requestBody = JSON.stringify(formData); 

    console.log(requestBody); 

    fetch(request, {body: requestBody}) 
     .then(
     function (response) { 
      if (response.status == 200 || response.status == 201) { 
      return response.json(); 
      } else { 
      console.log('Failure!', response.status); 
      } 
     }).then(function (json) { 

     var responseBody = json; 

     console.log(typeof responseBody, responseBody); 
    }); 

    } 

А вот соответствующий код API:

class Cors 
{ 
    /** 
    * Handle an incoming request. 
    * 
    * @param \Illuminate\Http\Request $request 
    * @param \Closure $next 
    * @return mixed 
    */ 
    public function handle($request, Closure $next) 
    { 
     return $next($request) 
      ->header('Access-Control-Allow-Origin', '*') 
      ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS') 
      ->header('Access-Control-Allow-Headers: Origin, Content-Type, application/json'); 
    } 
} 

Я действительно не могу понять эту проблему. Любая помощь будет оценена по достоинству.

Answer 1

Оказалось, что CORS допускает использование определенных типов контента.

The only allowed values for the Content-Type header are:

• application/x-www-form-urlencoded
• multipart/form-data
• text/plain

Источник: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Чтобы установить тип содержимого, чтобы быть «приложение/JSON», я должен был установить заголовок типа пользовательского контента в API. Просто удалил последний заголовок и добавил его:

->header('Access-Control-Allow-Headers', 'Content-Type'); 

и все работает хорошо.

Answer 2

Вы нарушаете 'Same Origin Policy'. Веб-сайт www.example.com никогда не сможет загружать ресурсы с любого веб-сайта www.example.net, кроме как из самого себя.

Во время разработки, однако, иногда нужно иметь возможность сделать это. Чтобы обойти это:

1. либо переместить начало координат http://local.moberries.com,
2. или переместить API (который вы обращаетесь) к вашему локальному хосту.
3. Кроме того, есть способы временно отключить ограничения этих типов в некоторых браузерах (особенно Chrome), методы которых обычно требуют все больше и больше усилий в последующих обновлениях браузера. Найдите Google о том, как включить совместное использование ресурсов Cross-Origin в вашей версии браузера.
4. Или, как подсказывает ошибка, введите заголовок, разрешающий запросы, которые будут развлекаться из-за происхождения. Дополнительная информация находится в the documentation for Access Control CORS