No 'Access-Control-Allow-Origin' header in Angular 2 app

This a problem with the CORS configuration on the server. It is not clear what server are you using, but if you are using Node+express you can solve it with the following code

// Add headersapp.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();});

that code was an answer of @jvandemo to a very similar question.

You can read more about that from here: http://www.html5rocks.com/en/tutorials/cors/.

Your resource methods won't get hit, so their headers will never get set. The reason is that there is what's called a preflight request before the actual request, which is an OPTIONS request. So the error comes from the fact that the preflight request doesn't produce the necessary headers.check that you will need to add following in your .htaccess file:

Header set Access-Control-Allow-Origin "*"

I also had the same issue while using http://www.mocky.io/ what i did is to add in mock.io response header: Access-Control-Allow-Origin *

To add it there just need to click on advanced options

Once this is done, my application was able to retrieve the data from external domain.