CORS 标头有信息，但 Angular js $http.get 不起作用答案

【问题标题】：CORS header has information but Angular js $http.get does not workCORS 标头有信息，但 Angular js $http.get 不起作用
【发布时间】：2016-04-09 11:25:48
【问题描述】：

我正在使用 Angular js 来使用休息服务。其余的 api 确实返回了所需的标头，但我得到了

Response for preflight has invalid HTTP status code 401

在 Mozilla 中我得到了

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the   remote resource at http://testurl.com:8081/v1/users. (Reason: CORS preflight channel did not succeed).

错误

API 头返回给

Server: Apache-Coyote/1.1 
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, PUT, GET, OPTIONS, DELETE
Access-Control-Allow-Headers: x-requested-with, Authorization
Access-Control-Expose-Headers: x-requested-with
Access-Control-Max-Age: 3600
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
Cache-Control: no-cache, no-store, max-age=0, must-revalidate 
Pragma: no-cache 
Expires: 0 
X-Frame-Options: DENY
X-Application-Context: application:8081
Content-Type: application/json;charset=UTF-8 
Transfer-Encoding: chunked 
Date: Tue, 05 Jan 2016 14:57:20 GMT

下面是http请求

 $http({
         method: 'post',
         url: 'http://testurl.com/v1/users',
         data    : data
         }).then(function successCallback(response) {
         object.sucess=true;
         object.massage=response;
         console.log('success');
         }, function errorCallback(response) {
         object.sucess=true;
         object.massage=response;

         });

我做错了什么还是问题出在标题中。

【问题讨论】：

您没有显示您引用的响应标头的状态代码，但浏览器显示它是 401（表示未经授权），因此您需要在服务器上解决该问题。
我的 api 在 rest 客户端上运行良好，但是当我尝试从 angular js 应用程序中使用它时，我得到了这个。服务器从移动或休息 api 都可以
server 正在返回 401。请注意，您发布的代码是 POST，而不是 GET。
"api 在 rest 客户端上工作正常，但是当我尝试从 angular js 应用程序中使用它时，我得到了这个"。所以你需要做的就是在这两种情况下比较标题。很简单。
“我的 api 在 rest 客户端上运行良好，但是当我尝试从 angular js 应用程序中使用它时，我得到了”——嗯，很明显！如果您不使用常规网络应用程序，您将不会发出浏览器说您响应不正确的预检请求！

标签： javascript angularjs ajax cors

【解决方案1】：

当我阅读您的问题时，我也遇到了这个问题，这个问题可以从服务器端解决，也可以通过创建代理服务器从客户端解决。在服务器端，您需要允许系统的 ip。

据我所知，通常它们是 3 种解决方案。

1)。示例：正如我在 NodeJs(API) 中创建 Web 服务时所做的那样：

res.setHeader('Access-Control-Allow-Origin', 'http://hostname.com');
// Request methods you wish to allow
// You can write * also for allowing to access that url from all systems which is not done usually for security purposes
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

// Request headers you wish to allow
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

// Set to true if you need the website to include cookies in the requests sent
// to the API (e.g. in case you use sessions)
res.setHeader('Access-Control-Allow-Credentials', true);

然后你也可以运行 get 和 post request。

2)。您还可以创建代理服务器来处理该帖子并放置请求，以便与该 api 的通信将保持不变

3)。您可以在 chrome 浏览器中安装 CORS 插件并启用它，然后您可以向服务器端查询。 https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?utm_source=chrome-ntp-icon

【讨论】：

您的答案无效。 2.我已经添加了这些标题，请参阅我的标题 2. 代理服务器不是一个选项，因为它会破坏性能，然后 3. 我的 api 将公开给所有人，所以我不能要求所有用户添加 crome 插件。是的，我试过它不起作用:(@Hermant

【解决方案2】：

您已将Authorization 作为允许的标头。这是不正确的，您需要添加Access-Control-Allow-Credentials，这将允许此标头。

此单独设置控制浏览器发送 cookie 以及 Authorization 标头

【讨论】：

也值得一试，使用特定值而不是 * 设置允许来源标头，我之前遇到过问题。您需要获取浏览器发送的原始标头并返回它

【解决方案3】：

我找到了解决方案。它缺少预检选项。我不得不在我的后端添加这些。现在它工作正常。

【讨论】：