Access Control Allow Origin Issue in Angular 2

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 headers
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();
});

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

Access Control Allow Origin issue in Angular 2

Access-Control-Allow-Origin is a response header, not a request header.

You need to have it appear on the response, not the request.

You have attempted to put it on the response:

resp.setHeader('Access-Control-Allow-Origin','*') 

… but it hasn't worked.

This is probably because you haven't put it on the response to the right request. The error message says:

Response to preflight request doesn't pass access control check

You have done something to make the request preflighted. This means that before the browser makes the GET request you are trying to make, it is making an OPTIONS request.

This is, presumably, being handled by a different piece of code on your server so the line resp.setHeader('Access-Control-Allow-Origin','*') isn't being hit.

One thing that causes a preflighted request to be made is the addition of request headers (other than a small number of exceptions). Adding Access-Control-Allow-Origin to the request will trigger a preflighted request, so the first thing to do to try to fix the problem is to remove Access-Control-Allow-Origin from the request.

If that fails, then you need to set up your server so it can respond to the OPTIONS request as well as the GET request.

Access Control Allow Origin issue in Angular 2 http services

If you are using apache then you need to allow the origin access i.e.

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

include this in .htaccess file.

How to enable Access-Control-Allow-Origin for angular 5/nodejs?

**Set headers to allow CORS origin in Express **

=> Add code in the server.js file or mail file.

app.use(function(req, res, next) {
   res.header("Access-Control-Allow-Origin", "*");
   res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
 });

CORS (Cross-Origin Resource Sharing) is an HTML5 feature that allows one site to access another site’s resources despite being under different domain names.

The W3C specification for CORS actually does a pretty good job of providing some simple examples of the response headers, such as the key header, Access-Control-Allow-Origin, and other headers that you must use to enable CORS on your web server.

angular2 - can't connect to API No Access-Control-Allow-Origin

Access-Control-Allow-Origin is a response header set by your server code. In this case, the api hosted at staging.press.hosting:9000. It is not a request header needed to be set by the client.

You need to set this response header in your api code.

See this detailed answer for more information as it shouldn't be needed to repeat here: https://stackoverflow.com/a/10636765/368552

Getting No 'Access-Control-Allow-Origin' Angular 2

I would suggest you to request Google APIs from your server. However if you don't want to setup a server there are some workarounds.

Solution 1:

I have faced the same issue and fixed it by using a PlacesService to get the PlaceID

// Get Place ID from Address 
function getPlaceIDFromAddress(address, callback){
          var place = {};
          var request = {
            location: new google.maps.LatLng(myLat, myLng),
            radius: '50',
            query: address
          };
          var service = new google.maps.places.PlacesService($scope.mapContainer);
          service.textSearch(request, function(results, status){
             if (status == google.maps.places.PlacesServiceStatus.OK) {     
                    var placeId = results[0].place_id;
                    var location = results[0].geometry.location;                    
                return callback(null, placeId);
              }
          });
    }

then pass the PlaceID to geocoder to get the LatLng or you can pass LatLng to GeoCode to get addresses.

(new google.maps.Geocoder()).geocode({placeId: places_id}, function(results, status) {
  if (status == google.maps.GeocoderStatus.OK) {
     console.log("Address: ", results[0].formatted_address);
}});

Solution 2:

Not recommended though.

If you just want to test on your localhost you can install this chrome extension. Just turn it on before making a call to matrix api

This extension will insert the 'Access-Control-Allow-Origin' in the header.

---

Related Topics