Angular JS 的跨域请求被阻止

Question

我在 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).

我搜索解决方案，我找到了类似的解决方案

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

上面这段代码，我们需要在-Web.Config中添加

现在，我有一个简单的 Angular 应用程序，我无法理解 Web.config 在哪里以及我应该在哪里创建它？

你能帮我解决一下 - 我应该怎么做？

谢谢，提前。

Answer 1

我不确定您提到的建议解决方案是否适用于客户端（角度应用程序）。

您需要在服务器端配置上述解决方案。 对于客户端（从您的浏览器），您可能需要发送一些可以在 Angular 应用程序中配置的属性。您可以在 $httpProvider 的帮助下配置属性。 根据角度 js 文档

使用 $httpProvider 更改 $http 服务的默认行为。 所以我们可以使用这个服务，并且可以设置每个请求都会传递的属性。您很可能需要配置这些设置

这里我在 app.js 主文件中配置它，它定义了我们的应用程序，命名为 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');
}
})();

希望这会有所帮助。 快乐学习:)

Answer 2

文件 web.config 应该是您的服务器应用程序 (ASP.NET) 的一部分，它可以自定义它（服务器）的行为方式。

Web.config 是 ASP.NET 的主要设置和配置文件 Web应用程序。它是驻留在根目录中的 XML 文档 网站或应用程序的目录，并包含有关如何 Web 应用程序将起作用。

您在问题中提到的代码告诉服务器应用程序它应该在其响应中包含 Access-Control-Allow-Origin 标头。

然后您的 Angular 应用程序会接收它并正常处理其余部分。

请注意，这是一个服务器端解决方案 - 与您的客户端角度脚本无关。

这里有一个关于web.config的教程。