如何在 Angular js 中启用 CORS答案

【问题标题】：How to enable CORS in angular js如何在 Angular js 中启用 CORS
【发布时间】：2015-05-29 14:25:12
【问题描述】：

我有一个 controller.js

ListNewsCtrl.$inject = ['$http', '$scope', 'datacontext'];
function ListNewsCtrl( $http, $scope, datacontext) {
    $scope.names = [];
    $http.get("http://www.w3schools.com/website/Customers_JSON.php")
                .success(function (response) {$scope.names = response;console.log($scope.names)});
};

我得到了我想要的数据。但是当我切换到另一个站点时，我会收到以下消息：

XMLHttpRequest cannot load https://URL. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3424' is therefore not allowed access. The response had HTTP status code 404.

我尝试访问的信息不需要访问令牌？

【问题讨论】：

“我试图访问的信息不需要访问令牌？” – 谁说过访问令牌？错误消息肯定没有。
如果您查看错误消息，您会收到来自服务器的 404 错误。您请求的 URL 不存在，得到 404，而他们的 404 响应未提供跨站点请求标头。
erikberg.com/mlb/standings.json 我想从此链接获取数据。当我点击我得到数据

标签： javascript angularjs https

【解决方案1】：

CORS 在服务器端启用。您请求的域不允许 CORS 请求，这不是您可以在客户端编辑或配置的内容。

如果域确实允许 CORS，那么您在 localhost 上用于托管本地 Web 服务器的任何内容都不允许。

【讨论】：

但是当我尝试从本地主机访问这个时："http://www.w3schools.com/website/Customers_JSON.php" 我得到了数据。
那么您请求的域不允许 CORS。
我可以通过其他方式访问 web api 而不是 angularjs
$http 使用 XMLHttpRequest，基本上所有 AJAX 实用程序都使用它。如果它在 Angular 中以这种方式失败，那么任何其他 AJAX 请求都会失败。假设您的代码没有其他问题。
我认为网站 des 不允许使用 CORS。但正如我在他们的网站上看到的那样，人们实际上可以访问数据。这就是为什么我很困惑。请你看看这个：erikberg.com/api 并告诉我你的想法

【解决方案2】：

如果允许跨站请求，请尝试

$http.jsonp("http://www.w3schools.com/website/Customers_JSON.php")
    .success(function(data){
        console.log(data);
});

【讨论】：

$http.jsonp - 我收到一个错误，我猜是因为 jsonp: [$injector:modulerr] 无法实例化模块应用程序，原因是：
jsonp（带填充的 JSON）是您用于跨域请求的内容；但是他们的服务器必须允许它才能正常工作。这很烦人，但是如果您想要一个允许您练习 AJAX 请求的解决方法，您可以将客户 JSON 数据保存为 JSON 文件，然后在本地执行调用。您必须使用 Firefox，因为 Chrome 根本不喜欢本地 AJAX 请求。

【解决方案3】：

我不会说它是一种完美的方法，但对于 cors 来说是更好的解决方法。

雅虎！查询语言是一种表达能力强的类 SQL 语言，可让您跨 Web 服务查询、过滤和连接数据。 Yahoo YQL 的优点在于它支持 CORS :)

Client -> YQL -> API Server

在此处运行示例

$.getJSON("http://query.yahooapis.com/v1/public/yql",
  {
    q:      "select * from json where url=\"https://erikberg.com/mlb/standings.json\"",
    format: "json"
  },
  function (data) {
    if (data.query.results) {
      alert(data.query.results.json.standing);
    } else {
      alert('no such code: ' + code);
    }
  }
);

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

Here is a cool Tutorial

这至少会以不同的方式解决你的 cors 问题。

乐于助人！

【讨论】：

@Besa 我刚刚在我的答案中添加了示例可运行代码试试这个，这就是 yql 的工作方式，它在你试图命中的 api 上工作。
why -ve 2 points on this,我试图用更好的解释以及运行演示和教程来回答最好的问题。还是有人不喜欢——奇怪！

【解决方案4】：

我的答案是这样的：

http://blog.novanet.no/angularjs-with-jsonp-and-how-i-get-to-work-on-time/#2

但是，我收到此错误：Uncaught SyntaxError: Unexpected token : I get small syntax issues。但至少我可以看到我的数据

【讨论】：