Cross-Origin Request Blocked for Angular JS

Question

I am getting following error in the Angular JS.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://192.168.1.28:3000/system/organizations/logos/000/000/001/original/img-user.png?1453890721. (Reason: CORS header 'Access-Control-Allow-Origin' missing).

I search about the solution and I found solution like

  <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="Content-Type" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
      </customHeaders>
    </httpProtocol>

This above code, we need to add in - Web.Config

Now, I have simple angular application, I not able to understand where is Web.config is there and where should I create it?

Can you please help me for - what should I do for the solution?

Thanks, In advance.

check this link : http://stackoverflow.com/questions/23959912/ajax-cross-origin-request-blocked-the-same-origin-policy-disallows-reading-the — Nijeesh, Feb 09 '16 at 06:20

score 0 · Answer 1 · answered Feb 09 '16 at 06:18

0

The file web.config should be a part of your server application (ASP.NET) which can customize the way it(the server) behaves.

Web.config is the main settings and configuration file for an ASP.NET web application. It is an XML document that resides in the root directory of the site or application and contains data about how the web application will act.

The code you have mentioned in your question tells the server application that it should include Access-Control-Allow-Origin header in its response.

Your angular app then receives it and process the rest normally.

Please note that this is a server side solution - nothing to do with your client side angular script.

Here is a tutorial about web.config.

answered Feb 09 '16 at 06:18

Charlie

22,886
11
59
90

I am not used ASP.NET, I have Ubuntu system and I'm ruby on rails developer. It's a general angular application that not dependent on ruby on rails or asp.net. – Feb 09 '16 at 06:23
But the solution you are trying is for ASP.NET. Please understand that accessing cross domain via ajax is not supported unless the response contain the above header. Your server should send it for your angular to continue with the process. – Charlie Feb 09 '16 at 06:24
actually, I fetch image from third party site (through API), that image I want to display in pdf (for pdf I am using pdfmake for angular). – Feb 09 '16 at 06:29
Your third party site should allow you to access it via ajax (send the Access-Control-Allow-Origin header). Or you have to create a php script in your server and access the third party site via the server for you. – Charlie Feb 09 '16 at 06:32
I fetch image from another application and pass into angularjs throgh IP port that I covert base64 image for that I am using XMLHttprequest – Feb 09 '16 at 06:36
Whatever the method you use, the bottom line is, if you need to access another domain via ajax (XMLHttpRequest) - that domain should send you the Access-Control-Allow-Origin header. – Charlie Feb 09 '16 at 06:39

Vatsal · Answer 2 · 2016-02-09T06:32:06.470

I am not sure that the proposed solution that you mentioned will work with client side (angular application) .

You will need to configure the mentioned solution on server side. With client side (from your browser) you may need to send some attributes that you can configure in your angular application. You can configure the properties with the help of $httpProvider. As per angular js documentation

Use $httpProvider to change the default behavior of the $http service. So we can use this service and can set the properties that will be passed with every request. Most likely you will need to configure these setting

Here I am configuring this in the main app.js file which defines our application named as app

(function () {
    'use strict';

angular.module('app', []).config(appConfig).run(appRun)

appRun.$inject = ['$rootScope','$location','$state','$stateParams', '$log'];

appConfig.$inject = ['$httpProvider'];

/**
 * To give http $httpProvider default values
 * @param $httpProvider
 */
function appConfig($httpProvider){
    $httpProvider.defaults.useXDomain = true;
    $httpProvider.defaults.withCredentials = true;
    delete $httpProvider.defaults.headers.common["X-Requested-With"];
    $httpProvider.defaults.headers.common["Accept"] = "application/json";
    $httpProvider.defaults.headers.common["Content-Type"] = "application/json";
}


function appRun ($rootScope, $location, $state, $stateParams, $log) {
    console.info('Inside appRun');
}
})();

Hope this be of some help. Happy Learning :)

Cross-Origin Request Blocked for Angular JS

2 Answers2