JavaScript CORS – How to Make Cross-Domain AJAX Requests

ajaxjavajavascriptjqueryrest

I am trying to POST to my cross domain *Rest service* via javascript, and realized that's not possible unless I use this specfication;

http://www.w3.org/wiki/CORS_Enabled

But there is very limited documentation how I can implement this, I have a few questions;

1- I use Glassfish Jee6 app server so can I simply add a jetty filter to my web.xml and job is done?

2- And for client side(mobile website), is there any javascript library which helps to implement this specification? Can I still use the existing ajax functions in JQuery or I need something more specific?

Best Answer

Jetty filter:

<web-app>
 <filter>
   <filter-name>cross-origin</filter-name>
   <filter-class>org.eclipse.jetty.servlets.CrossOriginFilter</filter-class>
   <init-param>
       <param-name>allowedOrigins</param-name>
       <param-value>*</param-value>
   </init-param>
   <init-param>
       <param-name>allowedMethods</param-name>
       <param-value>*</param-value>
   </init-param>
   <init-param>
       <param-name>allowedHeaders</param-name>
       <param-value>*</param-value>
   </init-param>
 </filter>
 <filter-mapping>
     <filter-name>cross-origin</filter-name>
     <filter-pattern>*</filter-pattern>
 </filter-mapping>
</web-app>

Related Solutions

jQuery AJAX Request CORS – How to Handle CORS in jQuery AJAX Request?

It's easy, you should set server http response header first. The problem is not with your front-end javascript code. You need to return this header:

Access-Control-Allow-Origin:*

Access-Control-Allow-Origin:your domain

In Apache config files, the code is like this:

Header set Access-Control-Allow-Origin "*"

In nodejs,the code is like this:

res.setHeader('Access-Control-Allow-Origin','*');

jQuery AJAX – Fix Cross-Origin Request Block

Try to use JSONP in your Ajax call. It will bypass the Same Origin Policy.

http://learn.jquery.com/ajax/working-with-jsonp/

Try example

$.ajax({
    url: "https://api.dailymotion.com/video/x28j5hv?fields=title",

    dataType: "jsonp",
    success: function( response ) {
        console.log( response ); // server response
    }

});

Best Answer

Related Solutions

jQuery AJAX Request CORS – How to Handle CORS in jQuery AJAX Request?

jQuery AJAX – Fix Cross-Origin Request Block

Related Question