Angular Fullstack + CORS:无法加载 XMLHttpRequest

Angular Fullstack + CORS: XMLHttpRequest cannot load

我一直在为这个而烦恼。

我使用 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 cannot load https://example.com/offers/service/get-offer-eligibility. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost.digitalink.com:9000' is therefore not allowed access.

请求 header 使用正确的信息进入 OPTIONS:

Request Method:OPTIONS Status Code:200 OK Response Headers view source Access-Control-Allow-Credentials:true Access-Control-Allow-Headers:content-type Access-Control-Allow-Methods:GET, POST, OPTIONS Access-Control-Allow-Origin:http://localhost.digitalink.com:9000

但是它在 POST 处中断并且没有正确的 headers。

事实上,我团队中的其他人能够在网页上使用相同的 angular 工厂 运行 从他们的本地计算机成功访问该服务。我将我的 header 与成功的 POST 的 header 进行了比较。我的 POST 请求中缺少 Access-Control header。

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

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

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

安装

npm install cors

简单使用(启用所有 CORS 请求)

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

有关详细信息,请转到 https://github.com/expressjs/cors