在 AngularJS 中出现 CORS 错误答案

【问题标题】：Getting CORS error in AngularJS在 AngularJS 中出现 CORS 错误
【发布时间】：2015-12-09 11:15:54
【问题描述】：

我正在尝试使用基于 https 的 API，该 API 在 POSTMAN 和其他 REST 客户端中成功运行，但在我的 AngularJS 应用程序中却没有。

以下是代码-

var req = {
    method: 'POST',
    url: 'https://agXXXXX.com/api/contact/',
    headers: {
        'Content-Type': undefined
    },
    data: user,
    withCredentials: true
};
$http(req)
    .then(function(data){
        console.log("--Data--");
        console.log(data);
    })

在关注了几篇与堆栈 CORS 相关的文章后，我也将其包含在 .config() 中，但没有运气 -

$httpProvider.defaults.useXDomain = true;
$httpProvider.defaults.headers.common = {Accept: "application/json, text/plain, */*"};
$httpProvider.defaults.headers.post = {"Content-Type": "application/json;charset=utf-8"};

以下是我面临的错误 -

让我知道我做错了什么，或者在这里遗漏了什么。

【问题讨论】：

浏览器不会让您的 JavaScript 代码访问该 URL，除非它的服务器响应访问控制标头允许它这样做。
如果是 https 调用，我认为您不能使用 $http。通过保持代码相同但尝试访问开源 http 来测试它。
@JoeLloyd 这不是http 与https 的问题，除非源域相同，并且尝试访问的页面不是http 但服务是。
@Pointy 请检查屏幕截图，因为服务器正在响应 Access-Control-Allow-Origin 标头
@JoeLloyd 不是http的情况

标签： javascript php angularjs cors angularjs-http

【解决方案1】：

如果您只需要测试您的应用，您可以使用这个 chrome 插件：

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

但是如果你在生产中需要这个，你需要配置你的服务器。如果您使用的是 SPRING：

HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST,PUT, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Headers", "Authorization,Content-Type");
        chain.doFilter(req, res);

【讨论】：

如果服务器不接受跨域请求，那将无济于事。
@Ivan 你确定该插件会帮助我吗？正如我之前提到的，我将从 POSTMAN/REST 客户端成功访问 API 吗？
是的，我确定。但这不是解决方案，只是一个补丁。你需要配置你的服务器

【解决方案2】：

您应该添加服务器代码头以启用 cors。

您可以在此站点中阅读有关它的信息，并根据后端中的语言获取实现它的代码：

http://enable-cors.org/

【讨论】：

TL;DR 你能检查一下屏幕截图并告诉我缺少哪个标题吗？
嗯。好像您添加了该标题。也许你添加了一个错字？