AJAX POST REST call generates CORS error

Question

My SharePoint client JavaScript is calling an external REST API URL, using the code pattern below

$.ajax({
  type: "POST",
  url: 'https:\\theexternal.domain......,
  contentType: "application/json",
  headers: {
      'Accept' : "application/json, */*;",
      'Authorization': 'Basic ' + btoa(username + ':' + password)  
  },
  data: JSON.stringify({
      .
      .
      .
  }),
   success: success,
   error: error
}); 

We have changed the web.xml configuration file of the external domain server, to include the code:

<filter>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
</filter>
<filter-mapping>
  <filter-name>CorsFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping> 

as per the directions on https://tomcat.apache.org/tomcat-7.0-doc/config/filter.html#CORS_Filter.

However, the AJAX POST is still returning the error

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https:\theexternal.domain...... This can be fixed by moving the resource to the same domain or enabling CORS.

What have we missed?

Answer 1

Modern browsers block cross-domain JavaScript requests by design - it's a security feature, not a bug. There exists workarounds for this, which can be used only if you have an access to configure the external domain:

The theexternal.domain source needs to explicitly enable your request by including Access-Control-Allow-Origin: http://siteMakingTheCall.domain to the HTTP header.

There exists more broader explanation of this in e.g. these sources:

• Cross-origin resource sharing (CORS) concept
• “Cross-Origin Request Blocked” - how to bypass for REST queries (includes another suggested workaround)
• Cross-Origin Request Blocked when accessing O365 Rest API (O365 scenario with suggested workarounds)

---

Edit: Using Apache Tomcat as in your case, the configuration might be a bit different. The "minimal configuration" as you seem to have used based on your question should be expanded to include an <init-param>-block for cors.allowed.origins to actually allow the request coming from outside. So, the complete configuration would be the following:

<filter>
  <filter-name>CorsFilter</filter-name>
  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
  <init-param>
    <param-name>cors.allowed.origins</param-name>
    <param-value>*</param-value>
  </init-param>
</filter>
<filter-mapping>
  <filter-name>CorsFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

However, I'd strongly suggest to replace the * to only include the SharePoint's host. If you have multiple hosts to be added, do it by comma-separating - e.g. sp-host1.com, sp-host2.com