This is regarding a GraphQL API setup in azure APIM with websocket enabled (for graphql subscriptions).
https://learn.microsoft.com/en-us/azure/api-management/graphql-api
When the websocket handshake is executed and the requesting client (in our case react-native) is adding an 'Origin' header the handshake fails because APIM is returning an HTTP 200 response without a body instead of the websocket 101 response. Without the 'Origin' header the request is forwarded to the backend and handshake is completed by backend server.
Request without 'Origin' header
Status Code: 101 Switching Protocols
Response Headers
Sec-WebSocket-Protocol: graphql-transport-ws
Sec-WebSocket-Accept: xrmPe7rBEqrAbIvqEI0ZgP7HM2M=
Expires: Fri, 14 Oct 2022 22:14:26 GMT
Cache-Control: max-age=0, no-cache, no-store
Pragma: no-cache
Date: Fri, 14 Oct 2022 22:14:26 GMT
Strict-Transport-Security: max-age=31536000 ; includeSubDomains
Upgrade: websocket
Connection: Upgrade
Request with the 'Origin' header >> 'INCORRECT RESPONSE <<
Status Code: 200 OK
Request Headers
Response Headers
Content-Length: 0
Request-Context: appId=cid-v1:{guid}
Expires: Fri, 14 Oct 2022 22:16:05 GMT
Cache-Control: max-age=0, no-cache, no-store
Pragma: no-cache
Date: Fri, 14 Oct 2022 22:16:05 GMT
Connection: keep-alive
Strict-Transport-Security: max-age=31536000 ; includeSubDomains
I tried adding the policy <set-header name="Origin" exists-action="delete" /> but that did not work. I think it's a bug on graphql api in azure APIM, the websocket api in APIM does not show the same behaviour and just ignores the header.
Any idea on how to fix this (without rewriting the entire react-native library)?
@Andre Haverdings Thank you for reaching out to Microsoft Q&A. Based on your statement, I understand request without 'Origin' header is working as expected (101 response) vs with 'Origin' header, you get 200 response code without body.
This happens when terminate-unmatched-request
is true (by default, this value is true) and Origin
header doesn't match an allowed origin configured in the cors policy. Check docs: CORS configuration issues which has the below note:
Attributes docs:
Review CORS policy and make sure that 'Origin' header is allowed in the policy using allowed-origins
(also refer SO thread for similar discussion). If you still face any issues after validation, feel free to add a comment. We might need to review the entire request and response by enabling a trace (Trace call).
I hope this answers your question and feel free to add a comment if you have any other questions. We would be happy to assist you. Please 'Accept as answer' and ‘Upvote’ if it helped so that it can help others in the community.