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
我一直在为这个而烦恼。
我使用 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