React-AppでAzure 上のGraphQLが読めない

 現象

C#で作成した GraphQL Clientからは Azure上のGraphQLは問題なくデータ取得出来た

React-Appで作成したアプリでGraphQLをCallするとnetwork errorと表示される

 

原因

React-Appを起動する時は Http://localhost:3000

ローカル実行から他のサイト(GraphQL)をCallすると CROSでセキュリティー上NGだった

 

対応

package.jsonにproxyを追加

   "proxy": "http://azure.japaneast.cloudapp.azure.com"

GraphQLをCallしているurlwも変更

   "http://azure.japaneast.cloudapp.azure.com/graphql" -> 

// urql Clientを作成
const client = createClient({
  url: '/graphql', // Proxy経由
  exchanges: [fetchExchange],
});

fetchExchange を追加しないとリモートからデータを取得しない

 

react-appから見たら GraphQLがCROS

Web Browserの開発toolで見るとしっかりと赤字でCROSと表示されていた

CROSを知らなかったことで１日潰してしまった .....Orz