'Content-Type'が 'application/json'に設定されていると投稿要求を送信できません

Question

私はReactアプリケーションで作業していますが、フェッチを使用してリクエストを送信しています。最近私はサインアップフォームを作成しましたが、今はそれをAPIに統合しています。これまでAPIはURLエンコードされたデータを受け入れていましたが、うまくいきました。しかし、要件が変更され、APIがJSONでデータを受け入れるようになったので、content-typeヘッダーを '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の「アクセス制御 - 許可 - ヘッダ」を設定しているが、それはまだ動作しません。ここでは、クライアント側に関連するコードは次のとおりです。

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）では、これらの種類の制限を一時的に無効にする方法があります。その方法では、その後のブラウザの更新に多くの労力が必要になります。お使いのバージョンのブラウザでCross-Origin Resource Sharingを有効にする方法についてGoogleを検索してください。
4. エラープロンプトに示されているように、非発信元からのリクエストを楽しめるヘッダーを導入してください。詳細はthe documentation for Access Control CORS