I'm trying to create a single page app using Angular 1, Nodejs and Express. I'm using Angular's $http post feature to post a request where I pass header values in the request to an API endpoint.
I am encountering an error message in Chrome:
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.
With this request body:
HTTP/1.1 200 OK
X-Powered-By: Express
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET,PUT,POST,PATCH,DELETE
Access-Control-Allow-Headers: Content-Type
Allow: POST
Content-Type: text/html; charset=utf-8
Content-Length: 4
Date: Tue, 23 May 2017 23:32:15 GMT
Connection: keep-alive
To remedy the CORS issue, I've npm installed the cors library.
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:
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({ origin: 'http://localhost:3000' , credentials : true, methods: 'GET,PUT,POST,OPTIONS', allowedHeaders: 'Content-Type,Authorization' }));
// 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:{{ PostDataResponse }}
</div>
</div>
</body>
</html>
However, it still does not work.
Can anyone please advise how and where I need to update my code to fix the 'Access-Control-Allow-Origin' wildcard issue?