Не удается отправить запрос post, когда "Content-Type" установлен в "application / json"

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

Fetch API не может загрузить http://local.moberries.com/api/v1/candidate. Ответ на предварительный запрос не проходит проверку контроля доступа: нет Заголовок "Access-Control-Allow-Origin" присутствует на запрошенном ресурс. Происхождение'http://localhost:3000 ' поэтому не допускается доступ. Если непрозрачный ответ служит вашим потребностям, установите запрос режим "no-cors"для извлечения ресурса с отключенным CORS.

Я даже установил '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  IlluminateHttpRequest  $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');
    }
}

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

2 ответов


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

единственными допустимыми значениями для заголовка Content-Type являются:

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

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

чтобы установить тип контента "application / json", у меня был чтобы задать пользовательский заголовок типа контента в API. Просто удалил последний заголовок и добавил этот:

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

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


вы нарушаете 'Та Же Политика Происхождения'. Сайт www.example.com не могу загрузить ресурсы из любой www.example.net сайт других, чем от себя.

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

  1. переместить свой источник http://local.moberries.com,
  2. или переместите api (к которому вы обращаетесь) на свой localhost.
  3. другое, чем что, есть способы временно отключить ограничения такого рода в некоторых браузерах (esp. Chrome), методы которого обычно требуют все больше и больше усилий в последующих обновлениях браузера. Поиск Google о том, как включить общий доступ к ресурсам Cross-Origin в вашей версии браузера.
  4. или, как подсказывает подсказка об ошибке, ввести заголовок, позволяющий запросы развлекаться от не-происхождения. Более подробная информация находится в документация для управления доступом ПДБС