エラーが発生しました要求されたリソースに 'Access-Control-Allow-Origin'ヘッダーがありません

Question

ヘッドレスdrupalアプリケーションを作成しようとしています。私は、drupal 8をベッケンドとして使用しており、フロントエンドとして反応しています。私はコアレストサービスモジュールを使用してdrupal 8でRESTサービスを作成しました。問題は、APIを呼び出すときにエラーが発生する場合です。つまり、

フェッチAPIがロードされないhttp://192.168.1.246/headless-react/api/eventsです。プリフライト要求への応答がアクセス制御チェックを通過しない：要求されたリソースに「アクセス制御許可」がない。 Origin 'http://localhost:3000'はアクセスできません。応答にHTTPステータスコード403があります。不透明な応答が必要な場合は、要求のモードを「no-cors」に設定してCORSを無効にしてリソースを取得します。

cors.configのservices.ymlファイルを設定しましたが、まだエラーが発生しています。誰もそれを解決する方法を任意のアイデアを持つことができますか？ありがとう

Answer 1

私はそれのための拡張子を使用しています。別のドメインからapiを呼び出したため、この警告が表示される理由です。または、あなたはnginxを使うことができます。

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Answer 2

あなたはReactJSを使用して、あなたのフロントエンドで使用しているどのようなビルドツールが言及する必要があります。 あなたはWebPACKのを使用している、あなたがそうのように、ルートディレクトリにあるpackage.jsonにプロキシを追加する必要がありますと仮定すると：あなたのサーバがある場合、例えば

package.json

... 
"name": "relay-starter-kit", 
"proxy":"<your-base-remote-server-url-here", 
"private": true, 
... 

https://www.myawesomeserver.comであり、次に "proxy": "https://www.myawesomeserver.com"である。

あなたのケースでは、"proxy":"http://192.168.1.246"が動作するはずです。お使いのアプリケーションで

、あなたがルートにアクセスする必要がある場合、https://www.myawesomeserver.com/home、その後、あなただけのルートとのWebPACKを渡す必要が家の要求は次のようになりますpackage.json にプロキシからベースURLをピックアップし、

const getHome = async() => { 
    try{ 
    const raw = await fetch('/home') 
    const res = await raw.json() 
    } catch(e) { 
    console.log(e) 
} 
} 

これは、webpackを実行すると、そのwebpack devサーバーでreactアプリケーションが実行され、他のサーバーと通信するために、webpackがあなたに代わってリクエストを行う必要があるからです。 ウェブパックを使用していない場合は、これは役に立たないかもしれません。