CORS Error with API and Javascript/jquery

[freddie_cox]

This past year we implemented a 1:1 laptop program in 12 schools with close to 7,000 laptops. We are now in the process of planning the checkin process and I would like to update/store some data in the JSS as part of this.

I have built a site using only HTML and Javascript (with the addition of the jquery library) that allows us to scan our asset tag, update the assignment and make notes about the condition of the laptop and power adapter.

The problem I am running into is Cross Origin Request Security from my internal webserver (IIS 8) to the JSS. http://www.w3.org/wiki/CORS_Enabled#For_Apache_Tomcat_.287.0.41_and_above.29

Has anyone else run into this with the JSS and or Tomcat? If so, what steps did you go through to allow your app to communicate with the JSS. I've gone through the steps above with one of my web-servers (We have 4 in a cluster) and I was still receiving the error.

Any help or recommendations are appreciated. Let me know if I can clarify further.

[freddie_cox · Accepted solution]

I was able to modify tomcat's web.xml file with the following to allow cross domain requests:

<!-- Add CORS Support for Tomcat -->
<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>**Your Web App URL's here**
</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.methods</param-name>
    <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
  </init-param>
  <init-param>
    <param-name>cors.allowed.headers</param-name>
    <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,Authorization</param-value>
  </init-param>
  <init-param>
    <param-name>cors.exposed.headers</param-name>
    <param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
  </init-param>
  <init-param>
    <param-name>cors.support.credentials</param-name>
    <param-value>true</param-value>
  </init-param>
  <init-param>
    <param-name>cors.preflight.maxage</param-name>
    <param-value>10</param-value>
  </init-param>
</filter>
<filter-mapping>
  <filter-name>CorsFilter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

A few things to note:

• You can use "/*" to allow all domains/IP's to connect if you want
• If you have multiple items you wish to allow. Simply separate them by commas.( E.g. http://url.com,https://url.com)
• You must add your JSS URL/s to this list. Otherwise the web app will not load
• CORS sees different ports as a different origin, so you must be specifc. E.g. http://url.com and https://url.com are different.
• You must restart Tomcat to pick up the changes

As always, your mileage may vary and please reach out to your Account Manager to discuss any concerns with modifying this file. Also before making any changes makes sure to backup your Web.xml config file! Should something go wrong, it is easy to replace the original file and restart tomcat.

W3C's Info on CORS support: http://www.w3.org/wiki/CORS_Enabled

[stevevalle]

I know this I a really old post, but I am currently developing a web app that requires activating CORS on the JSS. Using the above XML, I was able to successfully enable CORS, however, I am unable to access data from the API. I keep getting a “Failed to load resource: the server responded with a status of 401 (Unauthorized)” error.

Locally the web page loads fine. I only get the error when uploaded to a web server.

Any chance anyone knows how to resolve this?

[freddie_cox]

This brings back some memories!

Dusting off that portion of my brain, I may have had to base64 encode the username and/or password.

If your password has special characters in it, can you try an alphanumeric password to see if that's maybe causing some issues?

[stevevalle]

Yeah, thought that might be the case. This is the part I am having trouble with!