Handle CORS issue temporarily in jquery ajax call

How to handle CORS issue temporary

In this post we will discuss, how to call API service in a cross domain using jQuery ajax.




What is same origin policy :-

Browsers allow a web page to make AJAX requests only with in the same origin. This is called same origin policy.

Browsers does not allow cross domain ajax requests.
The following 2 URLs have the same origin
http://localhost:1111/api/products
http://localhost:1111/products.html

The following 2 URLs have different origins, because they have different port numbers (1111 v/s 1234)
http://localhost:1111/api/products
http://localhost:1234/products.html

The following 2 URLs have different origins, because they have different domains (.com v/s .net)
http://learntechwitheasy.com/api/products
http://learntechwitheasy.net/products.html

The following 2 URLs have different origins, because they have different schemes (http v/s https)
https://learntechwitheasy.com/api/products
http://learntechwitheasy.net/products.html

Step 1 :-

 I have an HTML page. Name it "MyPage.html". Copy and paste the following HTML and jQuery code.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js" type="text/javascript">         </script>
</head>
<body>
<button onclick="fun()">Click on this button</button><br/>
<textarea name="txtArea" wrap="soft" rows="10" cols="50" style="overflow:scroll" id="res">              </textarea>

<script>
function fun() {
               $.ajax({
                              type: "GET",
                           url:'https://joke-api-strict-cors.appspot.com/jokes/random',
                              dataType: "json",
                              success: function(object) {
                                   $('#res').html("");
                               $('#res').html(JSON.stringify(object));
                              },
                              error: function(object) {
                                   $('#res').html("");
                               $('#res').html(JSON.stringify(object));
                              }
                    });
}
</script>
</body>
</html>
Run this code on Chrome browser.
When you click "Click on this button" button on "MyPage.html" page, you get the following error. To see the error 
right click on browser and click on "Inspect" and go on "Console" tab

Access to XMLHttpRequest at 'https://joke-api-strict-cors.appspot.com/jokes/random' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

this error comes because browsers does not allow cross domain ajax requests.

and this "https://joke-api-strict-cors.appspot.com/jokes/random" API is not CORS enabled.

To solve this issue follow second step.




Step 2 :-

In Chrome browser, go to this link


and here we will search "Allow CORS" and in "Allow CORS: Access-Control-Allow-Origin" we will click on "Add to Chrome" button
this process will add this "Allow CORS" extension on "Chrome browser", like this :-


Initially this extension is OFF, we will have to ON this extension so click on this extension and turn ON it. When this will be ON its color will be changed. see below image :-


Step 3 :-

 Now we will run again our "MyPage.html" file with "chrome browser" and now we will be able to get response from the API successfully.


Comments

Post a Comment

Popular posts from this blog

Call CRUD(GET, POST, PUT, DELETE) API using WebClient in c#

          Here We will see how we can call all CRUD methods (GET, PUT, POST, DELETE) with the help of WebClient in c#. you will need to add reference of "System.Web.Extensions" assembly to your project. 1. Call POST API :-     string apiUrl = "http://localhost:26404/api/POSTAPI";     object input = new     {         Name = txtName.Text.Trim()     };     string inputJson = (new JavaScriptSerializer()).Serialize(input);     WebClient client = new WebClient();     client.Headers["Content-type"] = "application/json";     client.Encoding = Encoding.UTF8;     string json = client.UploadString(apiUrl + "/PostCustomers","POST", inputJson); 2. Call GET API :-     string apiUrl = "http://localhost:26404/api/GETAPI";     WebClient client = new WebClient();     client.Headers["Content-type"] = "app...
Read more

Asp.Net MVC 5 authentication and authorization using claims principal

Asp.Net MVC 5 authentication and authorization using claims principal :- Step1 : File -> New Project -> Asp.Net Web Application -> Asp.Net 4.5.2 Templates Choose empty MVC project template Step2 : Install following nuget packages Microsoft.AspNet.Identity.Core Microsoft.AspNet.Identity.Owin Microsoft.Owin Microsoft.Owin.Host.SystemWeb Microsoft.Owin.Security Microsoft.Owin.Security.Cookies Microsoft.Owin.Security.OAuth Owin Step3 : Create a Owin Startup class and decorate with assembly attribute OwinStartup. using Microsoft.AspNet.Identity; using Microsoft.Owin; using Microsoft.Owin.Security.Cookies; using Owin; [assembly: OwinStartup(typeof(AspNetMVC5Authorization.Startup))]  // here "AspNetMVC5Authorization" is the name of project namespace AspNetMVC5Authorization { public class Startup { public void Configuration(IAppBuilder app) { ConfigureAuthenticat...
Read more