I'm trying to create a single page app using Angular 1, Nodejs and Express. I'm using Angular $http post feature to post a request where i pass header values in the request to an API endpoint.
Using Chromes inspector, I see that it is failing with:
XMLHttpRequest cannot load
http://localhost:7878/EIAMIDSupportREST/EIAMIDSupport/updateEIAMID. The
value of the 'Access-Control-Allow-Origin' header in the response must not
be the wildcard '*' when the request's credentials mode is 'include'. Origin
'http://localhost:3000' is therefore not allowed access. The credentials
mode of requests initiated by the XMLHttpRequest is controlled by the
withCredentials attribute.
To remedy the CORS issue, I've npm installed cors for express js - https://www.npmjs.com/package/cors
In my app.js I have the add the following lines:
var cors = require('cors');
var app = express();
app.use(cors());
Here is my full app.js page
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var index = require('./routes/index');
var users = require('./routes/users');
var cons = require('consolidate');
//enable CORS
var cors = require('cors');
var app = express();
app.use(cors());
// view engine setup
app.engine('html', cons.swig)
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'html');
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', index);
app.use('/users', users);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;
And here is my index.html page
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("app", []);
app.controller("HttpGetController", function ($scope, $http) {
$scope.SendData = function () {
var req = {
method: 'POST',
url: 'http://localhost:7878/EIAMIDSupportREST/EIAMIDSupport/updateEIAMID',
withCredentials: true,
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': 'Basic user:password'
}
}
$http(req)
.then(function(data, status, header, config)
{
$scope.PostDataResponse = data,
console.log($scope.PostDataResponse);
})
.catch(function(data, status, header, config)
{
$scope.PostDataResponse = data,
console.log($scope.PostDataResponse);
});
};
});
</script>
</head>
<body>
<div ng-app="app">
<div ng-controller="HttpGetController">
<button ng-click="SendData()" >Link Accounts</button>
<hr />AND THE RESPONSE IS:
</div>
</div>
</body>
</html>
Can anyone please advise how and where i need to update my code to fix the 'Access-Control-Allow-Origin' wildcard issue?
Thanks!
via fambo
No comments:
Post a Comment