Troubleshooting CORS policy

SYMPTOM

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '<domain>' is therefore not allowed access

CAUSE

1. Implementation API is not paired properly with the intended API in API Manager.
2. Check that the source domain is included in the list of Origins. If not then, proceed adding it.
3. Another cause is the policy has not been applied correctly on the application implementing that API.
4. The preflight request missed the header "Access-Control-Request-Method". Please refer to the article for more details How to Test Cross-Origin Resource Sharing (CORS) And CORS Preflight Request with Curl

SOLUTION

1. Disable CORS policy and from the logs in the console validate if the policy has been applied/unapplied. Tailing the logs it will output a similar line to this:

   Policy cors-304735.xml was correctly un-applied

2. Test from the origin web page (the one that is include in the list of Origins):
   1. Use developer tools in the browser to go to the console tab and run the following code:

      var invocation = new XMLHttpRequest(); 
      var url = '<target API call>'; 
      var body = {<json body>}; 
      invocation.open('POST', url, true); 
      invocation.setRequestHeader('Content-Type', 'application/json'); 
      invocation.send(body);

      Assuming you are POSTing content in JSON ​format. The above code could be changed depending on the specific use case. POST method is assumed to be allowed in CORS policy. If everything is good with the above test, then we can go to the next step. If there is a failure, then this issue is not related to CORS policy. In the latter case it will be required to troubleshoot the problem elsewhere.
3. Enable CORS with Public resource checked. Wait until the policy is applied by checking the logs (mule_ee.log file if on-prem instance). 
4. Apply the procedure in 2.1 and confirm the response is valid.
5. Configure CORS policy to include only the desired origin. Wait until the policy is applied. 
6. Apply the procedure in 2.1 and check the functionality. If the request will fail at this point, then most probably there is an issue with the domain name format.
7. If the issue still persists, then please raise a support case and provide the result of all the steps listed above.

• Getting a CORS policy error while accessing the API from a Javascript application
• Cross Origin Resource Sharing policy is not working - 4.2.2 CH Runtime gets 405 Method Not Allowed
• Resolving CORS Policy Error When Custom Headers Are Passed in the Request API