我正在开发一个 React 应用程序，并且正在使用 fetch 发送请求。我最近制作了一个注册表单，现在我正在将它与其 API 集成。以前，API 接受 url 编码数据，并且一切正常。但现在要求已更改并且 API 接受 JSON 数据，我必须将内容类型 header 从“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.

我什至在 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'); 
    } 
} 

我实在是想不出问题所在。任何形式的帮助将不胜感激。

请您参考如下方法:

事实证明，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

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

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

一切正常。