从远程服务访问数据时，Angular JS中出现Access Control Allow Origin错误

Question

我有一个服务，它有另一台计算机的url，我在使用Ip地址访问其他计算机的响应时遇到此错误。。

$http({method : 'post',
url : 'http://xxx.xxx.0.xxx:8080/hms/spring/user/users'
data : ''}).then(function(response) {
$scope.patient_data = response.data;
});

获取此错误：

XMLHttpRequest cannot load http://xxx.xxx.0.xxx:8080/hms/spring/user/users. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

Answer 1

Access Control Allow Origin是一个CORS(跨来源资源共享)标头。

当站点A尝试从站点B获取内容时，站点B可以发送Access Control Allow Origin响应标头，告诉浏览器该页面的内容可由某些来源访问。(原点是一个域，加上一个方案和端口号。)默认情况下，任何其他原点都无法访问站点B的页面；使用Access Control Allow Origin(访问控制允许原点)标头打开一扇门，供特定请求原点进行跨原点访问。

对于站点B希望让站点A访问的每个资源/页面，站点B应为其页面提供响应标头：

Access-Control-Allow-Origin: http://siteA.com

现代浏览器不会完全阻止跨域请求。如果站点A从站点B请求页面，浏览器将在网络级别上实际获取请求的页面，并检查响应标头是否将站点A列为允许的请求者域。如果站点B没有指示允许站点A访问此页面，则浏览器将触发XMLHttpRequest的错误事件，并拒绝向请求的JavaScript代码提供响应数据。

非简单请求：

网络级别上发生的事情可能比上面解释的稍微复杂一些。如果请求是"非简单"请求，浏览器首先发送一个无数据的"preflight"OPTIONS请求，以验证服务器是否会接受该请求。当其中一个(或两个)：时，请求是不简单的

使用非简单请求头使用除GET或POST之外的HTTP谓词(例如PUT、DELETE)；唯一的简单请求标头是：Accept Accept Language Content Language Content Type非简单动词和/或非简单头，然后浏览器发送实际请求。

假设站点A想要发送一个对/somePage的PUT请求，其中非简单的Content-Type值为application/json，浏览器将首先发送一个preflight请求：

OPTIONS /somePage HTTP/1.1
Origin: http://siteA.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: Content-Type

注意，Access-Control-Request-Method和Access-Control-Request-Headers是由浏览器自动添加的；您不需要添加它们。此OPTIONS飞行前获得成功的响应标头

访问控制允许来源：http://siteA.com访问控制允许方法：GET、POST、PUT访问控制允许标头：内容类型发送实际请求时(飞行前完成后)，行为与处理简单请求的方式相同。换言之，飞行前成功的非简单请求将被视为与简单请求相同的请求(即，服务器仍必须为实际响应再次发送Access Control Allow Origin)。

浏览器发送实际请求：

PUT/somePage HTTP/1.1原产地：http://siteA.com内容类型：application/json

｛"myRequestContent"："JSON太棒了"｝服务器发送回一个访问控制允许来源，就像它发送一个简单的请求一样：

访问控制允许来源：http://siteA.com有关非简单请求的更多信息，请参阅通过CORS理解XMLHttpRequest。

我相信这将帮助您更好地了解CORS问题和解决方案。