Angular JS的跨源请求被阻止

Cross-Origin Request Blocked for Angular JS

本文关键字：请求 JS Angular      更新时间：2023-09-26

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

现在，我

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

你能帮我吗 - 我应该为解决方案做些什么？

谢谢，提前。

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

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

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

然后，您的角度应用程序会收到它并正常处理其余部分。

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

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

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

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

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

在这里，我在主应用程序中配置它.js该文件定义了名为应用程序的应用程序

(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');
}
})();

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

相关文章：