web-dev-qa-db-ja.com

「Content-Type」が「application / json」に設定されている場合、投稿リクエストを送信できません

Reactアプリケーションで作業しています。フェッチを使用してリクエストを送信しています。最近サインアップフォームを作成し、それを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：30 'はアクセスを許可されていません。不透明な応答でニーズが満たされる場合は、要求のモードを「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');
    }
}

私は本当に問題を理解できません。どんな種類の助けも歓迎されます。

jsonreactjscorsfetchcontent-type
10
Arslan Tariq

CORSでは、特定のコンテンツタイプのみが許可されていることがわかります。

Content-Typeヘッダーに許可される値は次のとおりです。

  • application/x-www-form-urlencoded
  • multipart/form-data
  • テキスト/プレーン

ソース： https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

コンテンツタイプを「application/json」に設定するには、APIでカスタムコンテンツタイプヘッダーを設定する必要がありました。最後のヘッダーを削除して、これを追加しました：

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

そしてそれはすべてうまくいっています。

22
Arslan Tariq

「 Same Origin Policy 」に違反しています。ウェブサイトwww.example.comは、それ以外のウェブサイトwww.example.netからリソースをロードすることはできません。

ただし、開発中には、それを可能にする必要がある場合があります。これをバイパスするには：

  1. originを http://local.moberries.com に移動するか、
  2. または、（アクセスしている）APIをローカルホストに移動します。
  3. それ以外に、一部のブラウザー（特にChrome）でこれらの種類の制限を一時的にオフにする方法があります。通常、その方法では、ブラウザーの後続の更新にますます手間がかかります。ブラウザのバージョンでクロスオリジンリソース共有を有効にする方法については、Googleを検索してください。
  4. または、エラープロンプトが示すように、ヘッダーを導入して、要求を非オリジンから楽しませることができます。詳細は Access Control CORSのドキュメント にあります
0
Abdul Wasae