Graphql API fails websocket handshake when 'Origin' header is present in the request

Question

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)?

Answer 1

@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.