How to access cross domain resource

PROBLEM STATEMENT:

An AJAX call uses XMLHttpRequest mechanism; such "cross-domain" requests are forbidden by web browsers as per the same origin security policy

SAME ORIGIN SECURITY POLICY

In computing, the same-origin policy is an important concept in the web application security model. The policy permits scripts running on pages originating from the same site – a combination of scheme, hostname, and port number – to access each other's DOM with no specific restrictions, but prevents access to DOM on different sites the same-origin policy also applies to XMLHttpRequest and to WebSocket

HOW IT WORKS AND WHERE IS THE ISSUE:

Above diagram explains the flow of normal AJAX call. In case, the flow is having some method or function to access cross domain resources then due to same origin security policy, browsers block all such type of response and usually throw error such as 403 forbidden etc.

SOLUTION:

                                                                                                                                 

Solution 1: We can write a java servlet and call the cross domain resource through it, later on call that java servlet from Ajax call to fulfill our requirement [line 1]

Solution 2: A Web service can consume the cross domain resource and provide a new API to us with required data [line 2]

Solution 3: We can write a JSONP, however in this solution the cross domain API needs to implement a callback function and in our code we need to call that callback function to access cross domain resource [line 3]

Solution 4: We can use CORS to initiate a cross-domain request, where we need to send request with an ‘Origin’ HTTP header attribute. The value of this header is the domain that served the page. On the other side, cross domain server needs to send an ‘Access-Control-Allow-Origin’ (ACAO) header in its response. The value of the header indicates what origin sites are allowed [line 4]