AngularJS Web App 缺少 CORS 标头“Access-Control-Allow-Origin”

Posted 2023-03-04

【中文标题】AngularJS Web App 缺少 CORS 标头“Access-Control-Allow-Origin”

【英文标题】：CORS header 'Access-Control-Allow-Origin' missing with AngularJS Web App

【发布时间】：2016-11-02 20:07:29

【问题描述】：

我正在开发一个 AngularJS 网络应用程序，我正在通过在本地运行该应用程序进行测试，例如它不在服务器上。我一直遇到以下错误：

跨域请求被阻止：同源策略不允许读取远程资源（原因：CORS 标头“Access-Control-Allow-Origin”缺失）。1（未知）

我的 SO 研究告诉我这是服务器端的错误，但我已成功从模拟器中运行的 ios 应用程序中获取数据，并成功使用了 Postman。

根据建议，我正在通过 http-server 运行该应用程序。同样的问题。

我添加了一个结果相同的简单测试用例：

$http.get("http://www.yahoo.com")
.then(function (response) 
    alert("Search Results: " + response);
, function(error) 
    alert("Could not get to Yahoo");
);

这完全令人费解。

【问题讨论】：

“本地”是什么意思？您需要一个 http 服务器来执行 ajax 请求。如果您从 file:/// url 加载页面，则无法向服务器发出 ajax 请求

^ 如果您让浏览器从直接文件路径呈现 html，则无法执行异步请求。如果您正在使用 node / apache / python / etc. 等运行本地服务器，那么您可以在本地服务器上启用 CORS 标头，然后您应该在生产服务器上复制它。这里还有一个重要的问题：你是用 Angular 1 还是 Angular 2 开发的？

另外，iOS 是如何参与到您的架构中的？您正在开发 Angular 2 + nativescript 应用程序吗？还是 ionic + Angular 1 应用程序？如果是这种情况，您尝试向哪个服务器发出异步请求，该服务器的环境是什么？

【参考方案1】：

基于此评论：

我正在开发一个 AngularJS 网络应用程序，我正在通过在本地运行该应用程序进行测试，例如它不在服务器上

那么这不起作用的原因很明显：默认情况下，如果您没有从网络服务器运行 javascript（http:// 而不是 file:/// ）。这是几乎所有浏览器都内置的安全措施。您可以通过启动带有某些标志的浏览器来解决此问题；例如，使用 Chrome，您可以从命令行运行 chrome --allow-file-access-from-files file:///[PATH_TO_FILE]

但是，建议您只从网络服务器运行 javascript。这非常简单，您可以使用节点包 http-server 或 Python 的 SimpleHTTPServer 直接从它们所在的目录提供文件。

【讨论】：

我发现了如何使用 Chrome 扩展程序禁用 CORS，非常感谢您的回答。