I recently developed a Single Page Application (SPA) and utilized Azure AD for user storage along with the ADAL-JavaScript library according to instructions found on a to integrate with my AngularJS code. The authentication process worked smoothly, however, when attempting to call a third-party API exposed through APIGEE, I encountered the following error messages:
Failed to load resource: the server responded with a status of 502 (Bad Gateway)
XMLHttpRequest cannot load http://webapiexposedusingapigee. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '' is therefore not allowed access. The response had HTTP status code 502.
Upon checking in Fiddler, I noticed the following fault string: "faultstring=Received 405 Response without Allow Header"
and a warning stating:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://test.apigee.net/v1/selectop/myapi. This can be fixed by moving the resource to the same domain or enabling CORS.
I have already added the necessary headers on APIGEE:
<Header name="Access-Control-Allow-Origin">*</Header>
<Header name="Access-Control-Allow-Credentials">true</Header>
<Header name="Access-Control-Allow-Headers">Origin, X-Requested-With, Content-Type, Accept</Header>
<Header name="Access-Control-Max-Age">3628800</Header>
<Header name="Access-Control-Allow-Methods">GET, PUT, POST, DELETE, OPTION</Header>
Any assistance with resolving this issue would be greatly appreciated.
Thank you.