Angular Fullstack + CORS：无法加载 XMLHttpRequest

Posted 2023-03-04

【中文标题】Angular Fullstack + CORS：无法加载 XMLHttpRequest

【英文标题】：Angular Fullstack + CORS: XMLHttpRequest cannot load

【发布时间】：2015-05-21 18:09:18

【问题描述】：

我一直在拉头发。

我使用yeoman generator angular-fullstack 在带有 Express 的 nodeJS 服务器上创建了一个小型 Angular 应用程序。我正在使用远程服务，因此我的应用程序中没有编写任何 api 服务器端调用。

工厂：

   var offerServiceURL = "https://www.example.com";
    angular.module("services", ['ngResource'])
    .factory('offerService', function($resource) 
        return $resource(offerServiceURL+'/offers/service/:action/:param1',
        
            action: '@action'
        ,
        

            getOfferEligibility : 
                method: 'POST',
                params: action:'get-offer-eligibility'
            
        );
    ); 

控制器：

angular.module('myApp')
.controller('myCtrl', function($scope, offerService)
   offerService.getOfferEligibility($scope.user, function(data)
         if(data.status == "SUCCESS")
           ....
             
   )
)

Chrome 给了我一个通用错误：

XMLHttpRequest 无法加载 https://example.com/offers/service/get-offer-eligibility。不 请求中存在“Access-Control-Allow-Origin”标头 资源。因此，原点 'http://localhost.digitalink.com:9000' 是 不允许访问。

请求标头使用正确的信息进入 OPTIONS：

请求方法：OPTIONS 状态码：200 OK 响应头 查看源代码 访问控制允许凭据：true 访问控制允许标头：内容类型 访问控制允许方法：GET、POST、OPTIONS 访问控制允许来源：http://localhost.digitalink.com:9000

但是它在 POST 时中断并且没有正确的标题。

事实上，我团队中的其他人能够使用在网页上运行的同一个 Angular 工厂从他们的本地计算机成功访问该服务。我将我的标题与成功 POST 上的标题进行了比较。我的 POST 请求中缺少访问控制标头。

我能想到的唯一差异是他们正在尝试使用端口 8080 的 Java 应用程序。这有什么不同吗？任何见解都会有所帮助！

【问题讨论】：

“理论上，这应该可行。” ——你看过返回的标题吗？你检查过它们是否正确吗？

“我团队中的其他人能够成功地从不同的 IP 访问服务，而不会遇到任何 CORS 问题”——他们是通过在网页中运行的 javascript 来做到这一点的吗？

顺便说一句，您提到的 example.com/offers/service/get-offer-eligibility 返回 404。

@incarnate — 这是因为 example.com 用于示例 URL。真实的 URL 大概是在一个私有的开发网络上。

节点的 CORS 模块效果很好，我会安装它。我不知道 yeoman 生成器是如何设置的，但可能他们在服务器上没有任何 CORS 设置，或者错过了允许 POST。根据我使用的浏览器，我的 CORS 工作/不工作。这可以解释为什么你的团队成员没有问题。无论哪种方式，您都应该在您的服务器上完全启用 CORS。

【参考方案1】：

您可以使用 expressjs 的 cors 模块在您的应用中启用 CORS。

安装

npm install cors

简单使用（启用所有 CORS 请求）

var express = require('express');
var cors = require('cors');
var app = express();
app.use(cors());

更多详情请至https://github.com/expressjs/cors

【参考方案2】：

该问题与客户端的 CORS 问题无关。答案是服务不喜欢我的数据。如果数据错误，API 将返回错误的 CORS 标头，而不是发送数据错误的响应。