小编典典

当“内容类型”设置为“ application / json”时,无法发送发布请求

reactjs

我正在开发一个React应用程序,并且正在使用fetch发送请求。我最近做了一个注册表单,现在将它与它的API集成在一起。以前,API接受url编码的数据,并且一切正常。但是现在需求已更改,API接受了JSON中的数据,因此我不得不将内容类型标头从“
application / x-www-form-urlencoded”更改为“ application / json”。但我收到以下错误:

提取API无法加载http://local.moberries.com/api/v1/candidate。对预检请求的响应未通过访问控制检查:在所请求的资源上不存在“
Access-Control-Allow-Origin”标头。因此,不允许访问源’ http://
localhost:3000
‘。如果不透明的响应满足您的需求,请将请求的模式设置为“ no-
cors”,以在禁用CORS的情况下获取资源。

我什至在API中设置了“ Access-Control-Allow-Headers”,但仍然无法使用。这是客户端的相关代码:

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');
    }
}

我真的不明白这个问题。任何帮助将不胜感激。


阅读 335

收藏
2020-07-22

共1个答案

小编典典

事实证明,CORS仅允许某些特定的内容类型。

Content-Type标头的唯一允许值为:

  • 应用程序/ x-www-form-urlencoded
  • 多部分/表单数据
  • 文字/纯文字

来源:https : //developer.mozilla.org/en-
US/docs/Web/HTTP/Access_control_CORS

要将内容类型设置为’application / json’,我必须在API中设置一个自定义内容类型标头。刚刚删除了最后一个标头并添加了这个标头:

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

而且一切正常。

2020-07-22