没有 'Access-Control-Allow-Origin' - 节点/Apache 端口问题 [英] No 'Access-Control-Allow-Origin' - Node / Apache Port Issue
问题描述
我已经使用 Node/Express 创建了一个小型 API,并尝试使用 Angularjs 提取数据,但是由于我的 html 页面在 localhost:8888 上的 apache 下运行并且节点 API 在端口 3000 上侦听,因此我收到了 No 'Access-Control-Allow-Origin'.我尝试使用 node-http-proxy
和 Vhosts Apache 但没有太多成功,请参阅下面的完整错误和代码.
XMLHttpRequest 无法加载 localhost:3000.请求的资源上不存在Access-Control-Allow-Origin"标头.因此,不允许访问源 'localhost:8888'."
//使用 Node/Express 的 Apivar express = require('express');var app = express();var 承包商 = [{"id": "1","name": "乔·博格",周":3,"照片": "1.png"}];app.use(express.bodyParser());app.get('/', function(req, res) {res.json(承包商);});app.listen(process.env.PORT || 3000);console.log('服务器运行在端口 3000')
角度代码
angular.module('contractorsApp', []).controller('ContractorsCtrl', function($scope, $http,$routeParams) {$http.get('localhost:3000').then(function(response) {var data = response.data;$scope.contractors = 数据;})
HTML
<div ng-controller="ContractorsCtrl"><ul><li ng-repeat="person in Contracts">{{person.name}}</li>
尝试将以下中间件添加到您的 NodeJS/Express 应用程序中(为了您的方便,我添加了一些注释):
//在定义路由之前添加头部app.use(function (req, res, next) {//您希望允许连接的网站res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8888');//请求您希望允许的方法res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');//请求您希望允许的标头res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');//如果您需要网站在发送的请求中包含 cookie,则设置为 true//到 API(例如,如果您使用会话)res.setHeader('Access-Control-Allow-Credentials', true);//传递给下一层中间件下一个();});
希望有帮助!
i've created a small API using Node/Express and trying to pull data using Angularjs but as my html page is running under apache on localhost:8888 and node API is listen on port 3000, i am getting the No 'Access-Control-Allow-Origin'. I tried using node-http-proxy
and Vhosts Apache but not having much succes, please see full error and code below.
XMLHttpRequest cannot load localhost:3000. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localhost:8888' is therefore not allowed access."
// Api Using Node/Express
var express = require('express');
var app = express();
var contractors = [
{
"id": "1",
"name": "Joe Blogg",
"Weeks": 3,
"Photo": "1.png"
}
];
app.use(express.bodyParser());
app.get('/', function(req, res) {
res.json(contractors);
});
app.listen(process.env.PORT || 3000);
console.log('Server is running on Port 3000')
Angular code
angular.module('contractorsApp', [])
.controller('ContractorsCtrl', function($scope, $http,$routeParams) {
$http.get('localhost:3000').then(function(response) {
var data = response.data;
$scope.contractors = data;
})
HTML
<body ng-app="contractorsApp">
<div ng-controller="ContractorsCtrl">
<ul>
<li ng-repeat="person in contractors">{{person.name}}</li>
</ul>
</div>
</body>
Try adding the following middleware to your NodeJS/Express app (I have added some comments for your convenience):
// Add headers before the routes are defined
app.use(function (req, res, next) {
// Website you wish to allow to connect
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8888');
// Request methods you wish to allow
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);
// Pass to next layer of middleware
next();
});
Hope that helps!
这篇关于没有 'Access-Control-Allow-Origin' - 节点/Apache 端口问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!