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.

Answer 1

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 .

Answer 2

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 :)