使用 angularJS 的跨域请求

Posted 2023-02-22

【中文标题】使用 angularJS 的跨域请求

【英文标题】：Cross domain request using angularJS

【发布时间】：2016-03-15 21:59:35

【问题描述】：

我想使用 angularJS 显示来自 API 的数据。在同一台 PC 上运行代码时，此代码可以正常工作。但是当我尝试在另一台 PC 上进行测试时，它显示错误 no access-control-allow-origin' header is present on the requested resource。 angularjs

我使用的是 1.4.8

这是我的代码：

$http(
            method:"get",
            url: 'http://IP/Test_API/index.php/test123_api/empdtl_from_empid/emp_id/'+$scope.empId
        )
        .success( function( response )
            if (response != null || response != 'undefined') 
                $scope.empNm = response.data.emp_name;
            
        )
        .error( function( response ) 
            if(response.statusCode == 404)
            
                $scope.errorEmpNm = "You May Inputted Wrong Employee Id which have not Exist, Please Enter Correct Employee Id...!!!";
            
        )

【问题讨论】：

问题不在于角码，而在于服务器API，你用的是什么语言？

似乎重复了***.com/questions/18053547/…

PHP 与 codeigniter REST API

也许对你有帮助：***.com/questions/11599573/…

AngularJS: No "Access-Control-Allow-Origin" header is present on the requested resource的可能重复

【参考方案1】：

你无法通过 javascript 解决它。您发出请求的服务器必须实施 CORS 以从您的网站访问权限中授予 JavaScript。您的 JavaScript 无法授予自己访问其他网站的权限。

【参考方案2】：

你可以试试$http.jsonp()，它可以进行跨域请求，但是请求方式唯一的选择是GET，你不能用它来承载大的payload，因为浏览器可能限制网址长度。

示例

注意url中的callback=JSON_CALLBACK！

var url = "http://other.domain.com/some/path?callback=JSON_CALLBACK";
$http.jsonp(url, params: param1: value1, param2: value2)
     .success(function(response) 
       // ...
     )
     .error(function(response) 
       // ...
     )

【讨论】：

我已经尝试过 Jsonp，但它对我不起作用，你能举个例子吗？

@Hkachhia 提供示例。

@Thanks：发布数据是否使用相同的语法？

@Hkachhia 正如我所说，您不能使用 jsonp 发送 POST 请求，或 GET 以外的任何类型的请求。

对不起。但是如何在跨域中发布数据？你知道然后帮助我

【参考方案3】：

您必须在响应中启用 CORS。一种解决方法是使用启用CORS plugin for Chrome 但是，请注意，这不是真正客户的解决方案，它会对您的浏览器产生副作用。仅用于测试。

真正的修复是您必须在服务器端执行的操作。在后端启用 Allow-Control-Allow-Origin 的方式取决于后端的体系结构。将“Allow-Control-Allow-Origin”添加到响应的标题中，问题将得到解决。

对于 PHP，将以下内容添加到您的响应标题中

header("Access-Control-Allow-Origin: *");