web-dev-qa-db-ja.com

React APIと別のOrigin（CORS）を使用するアプリ

Java eeバックエンドレストサーバーを使用し、別のドメインで実行しているリアクションアプリがあります。CORSを有効にしました。

Access-Control-Allow-Origin : http://localhost:3000
Access-Control-Allow-Headers : Origin, content-type, accept, authorization
Access-Control-Allow-Credentials : true
Access-Control-Allow-Methods : GET, POST, PUT, DELETE, OPTIONS, HEAD
Access-Control-Max-Age : 1209600

私はこのようなフェッチで反応を使用しています：

export function get(path, headers) {
    return fetch(apiUrl + path, {
        "metod" : "GET",
        "headers" : headers,
        "credentials" : "include"
    })
}

反応アプリはhttp://localhost:3000で実行されています。ログインすると、サーバーはSet-Cookieを返しますが、再度ログインしようとしない限り、Cookieはサーバーへのそれ以降の要求には含まれません。次に、その特定のログイン要求に含まれます。

助言がありますか？

reactjscookiescorsfetch
7
fonnes

そこで、別のstackoverflowスレッドとrobertklepのコメントを使用して問題を解決しました。前述のとおり、 here ： "localhostで作業する場合、Cookieドメインを完全に省略する必要があります。" robertklepsのアイデアを実装しましたが、ドメインを設定しませんでした。次のようなSet-Cookieになりました：Set-Cookie:kek=7fukucsuji1n1ddcntc0ri4vi; Version=1; Path=/; Max-Age=100000。これは正常に機能します。

1
fonnes

これにより、ローカル開発を簡単にする方法を共有したいと思います postcreate-react-appを使用している場合、メインAPI urlプロキシをpackage.jsに追加するだけで、たとえば"proxy": "http://localhost:8080/API"バックエンドでCORSを設定する必要はありません。

5
praHoc

これをインストールします。

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=es

インストールしたら、BrowserIconをクリックしてオンにします。すべてです。これ以上エラーは表示されません。

編集。本番環境向けのソリューションサーバーから設定する場合（または単にブラウザ拡張機能を追加しない場合は、これを試してください:)

  • Node.jsを使用している場合は、次を実行します。node.jsサーバーファイル：response.writeHead(200, { 'Content-Type': contentType, 'Access-Control-Allow-Origin': '*' })

  • fetch('http://ajax.googleapis.com/ajax/services/feed/load?v=‌​1.0&num=8&q=http://r‌​ss.cnn.com/rss/editi‌​on_entertainment.rss‌​?output=rss', { method: 'get', mode: 'no-cors', }).then(() => { console.log('Works!'); });

  • その他の解決策：PHPを使用している場合は、追加することができます：<?php header('Access-Control-Allow-Origin: *'); ?>をPHPファイルに追加します。そのため、...サーバー（例：Apache）で、次のディレクティブを追加します。設定のヘッダーセットAccess-Control-Allow-Origin *（最初のオプションとして）。

3
JuMoGar