Angular2,REST 服务 POST 调用错误:“跨源请求被阻止”

Posted

技术标签:

【中文标题】Angular2,REST 服务 POST 调用错误:“跨源请求被阻止”【英文标题】:Angular2, REST Service POST Call error : "Cross-Origin Request Blocked" 【发布时间】:2017-10-01 11:44:08 【问题描述】:

我正在尝试使用 Angular 2(版本 4.0.0)从开发环境(localhost:4200)调用 REST API

收到以下错误消息: “跨源请求被阻止:同源策略不允许读取位于https://localhost:8000/auth 的远程资源。(原因:CORS 标头‘Access-Control-Allow-Origin’缺失)。”

这里我提供一个代码示例供参考:

var headers = new Headers();
headers.append('Content-Type', 'application/x-www-form-urlencoded;charset=UTF-8');

return this.http.post(this.loginUrl, 'POST_Parameters', 
       headers: headers
).map(res => 
       console.log(res);
);

有人可以帮我找出解决这个问题的方法吗?

【问题讨论】:

How to create cross-domain request (Angular 2)?的可能重复 【参考方案1】:

CORS 必须由后端启用。根据后端框架,通常您必须发送后端可以识别的特定标头。但是,除非您在后端显式启用 CORS 支持,否则发送标头是无用的

【讨论】:

【参考方案2】:

在我的一个项目上,我刚去了我的服务器(linux 16.04 上的 apache2),我刚刚在虚拟服务器配置文件中添加了“Header set Access-Control-Allow-Origin”*“”

【讨论】:

【参考方案3】:

根据浏览器政策,不允许使用 CORS。如果您使用 POSTMAN,则不会发生此错误。

CORS 错误只能由服务器端删除。因此,您应该在后端代码中设置标头。

如果您使用 express 作为后端...

app.use(function(req,res)
    res.header('Access-Control-Allow-Origin', '*'););

【讨论】:

但是按照这里的场景,我无法控制 REST 服务,客户端为我们提供了需要调用的服务。就这样。甚至我自己也不知道创建服务的平台。如果有任何解决方法来获得服务响应将是很大的帮助。【参考方案4】:

您在本地服务器中。您需要在同一台服务器上运行 api 和 angular 应用程序。 当您在同一生产服务器上上传项目时,我希望不会显示此错误。

【讨论】:

以上是关于Angular2,REST 服务 POST 调用错误:“跨源请求被阻止”的主要内容,如果未能解决你的问题,请参考以下文章

Angular2 使用一个 REST 调用的多个组件

我无法在 Angular 中获得 REST 服务响应

REST服务上的错误请求错误使用POST(json数据)调用方法?

Angular 2 Http 删除与 Web API REST 一起使用的标头

使用 Angular2 将文件上传到 REST API

在angular2中上传文件:正文(FormData)为空