We Keep Coding

No 'Access-Control-Allow-Origin' header is present on the requested resource - Angular 5

I'm trying to access web service from my angular service with cross-origin related headers set. But still, I'm not able to access the web service. The browser keeps saying,
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 403.
I'm able to access the same URL in the browser (chrome) and postman but not in angular application.
private headers = new HttpHeaders()
.set('Access-Control-Allow-Origin', '*')
.set('Content-Type', 'application/json;charset=UTF-8')
.set('Access-Control-Allow-Headers', '*')
.set('Access-Control-Allow-Methods', 'GET, OPTIONS');
public getData(): Promise<Object> {
return this._http.get(this._url, {headers: this.headers})
.toPromise()
.then(response => {
return response;
}
)
.catch(testService.handleError);
}
Is there anything I'm missing here...

There are multiple ways to solve this issue, but first you will need to identify the extra request header parameter that is getting send by the client, if any.
It's earlier to spot this by using any of the broswer's developer console. Another pointer is to check the response/error for options call if any.
Once identified, you will need to enable the appropriate response parameters from the server, in your case it seems the options call is not setting Access-Control-Allow-Origin in the response.
Let me know if this helped you diagnose your issue.

Try JSONP. Basically as per WC3Schools states
JSONP is a method for sending JSON data without worrying about cross-domain issues.
JSONP does not use the XMLHttpRequest object.
Here's an explanation of how JSONP works

So, there is two approaches
If you have an access to edit the web service.
You need to allow Cross Origin Resource sharing.
if u are using Node.js here is an example of code to add
// ~ Cross origin resource sharing ~ //
var cors = require('cors');
// ~ Initialize the app ~ //
var app = express();
// ~ Enbling CORS ~ //
app.use(cors());
You can add a browser extension that enables you fix CORS errors for the angular app while running on browser.
Here is for chrome https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en
Here is for Mozilla https://addons.mozilla.org/en-US/firefox/addon/cors-everywhere/
You can read more at https://enable-cors.org/
I hope that helps. If there is any error let me know through comments.

Reading json content from a REST API URL

I have built a REST API with Node.js Express http://localhost:3000/api/feeds with node.js and filled with data.
router.get('/api/feeds', function (req, res, next) {
documentDBConfig.getAllDocuments()
.then(() => res.json(documentDBConfig.feedsArray));
});
Now i make a static website and want to use javascript or jquery to get data from my REST API. I used this code
$.getJSON( "http://localhost:3000/api/feeds", function( data ) {
console.log(data);
});
But it keeps saying
XMLHttpRequest cannot load http://localhost:3000/api/feeds. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63342' is therefore not allowed access.
I know i'm doing it wrong, but i couldn't find the correct way. How can i get this json content with my website from my REST API (http://localhost:3000/api/feeds) ?
Edit: I don't get this warning with explorer, but i can not get the content. And now i solved the chrome problem thus i don't get this warning anymore. But i can't read the content. That is not a duplication.
Now i get this warning
Failed to load resource: the server responded with a status of 404 (Not Found)

Can you show us your REST api code so we can help you ? You need to set some headers in your backend to allow requests coming from other origins.
If you happen to be using express, this will help you. But you could have built the REST api in another way, so please provide us with more information.

This is because you are accessing a resource from another domain.
You try to access http://localhost:3000 from http://localhost:63342.
You can read more about this here https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Access-Control-Allow-Origin

Basically you are performing a CORS request which means you are trying to call a resource on different server. So your REST api should allow CORS requests by adding the response headers allowing the UI server resource.
Please Refer to this question if it helps

angularjs1.4 CORS failed

I'm using AngularJS 1.4.3. Here's my code:
angular
.module('app', [])
.run(run);
function run($http) {
a = $http({
method: "GET",
url: 'http://127.0.0.1:8080/test',
data: {}
});
console.log(a);
}
Using browser or Postman can get it correct. But the code above gives
XMLHttpRequest cannot load http://127.0.0.1:8080/test. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access.
The point is, I can use GET method to get the result using applications. But using code won't work. What have I done wrong?

The point is, I can use GET method to get the result using applications.
In that instance, there is the application and the server and nobody else. There are only two entities involved.
But using code won't work.
You have two different websites (localhost:8000 and localhost:8080) and the browser doesn't know if the JavaScript provided by 8000 can be trusted with the data that 8080 is willing to give to the user.
What have I done wrong?
You haven't provided an Access-Control-Allow-Origin header in the HTTP response from 8080 to tell the browser that 8000 can be trusted with the data.
See also:
The specification
The MDN documentation

Access Control Allow Origin Issue with AngularJS

I have seen several related issues about this on here but none has solved my problem yet.
I am trying to access the freckle(letsfreckle.com) api in a small web app I'm building but I'm having issues. It works when I start chrome browser without security but its not working on github pages and when I package the app as a chrome extension.
This is what my service looks like
jXtnsion.factory('freckle', ['$http', function($http){
return $http.get('https://api.letsfreckle.com/v2/projects?freckle_token=kacgnpf0og0hfi1it32o9xtc2ls2328-gmeb1nwcp1ko8o0f0ygi4mlxxxxxxxx&f&format=jsonp')
.success(function(freckleData){
return freckleData;
})
.error(function(err){
return err;
});
}]);
I keep getting a 'XMLHttpRequest cannot load https://api.letsfreckle.com/v2/projects?freckle_token=kacgnpf0og0hfi1it32o9xtc2ls2328-gmeb1nwcp1ko8o0f0ygi4mlxxxxxxxx&f&format=jsonp. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://andela-asogbein.github.io' is therefore not allowed access.
Why is this not working?

I think your server needs to correctly respond to the OPTIONS request that the browser will make on your behalf to determine if the CORS request is valid. It needs to contain an Access-Control-Allow-Headers header with the right info in it.
You can refer to this:
https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS#Preflighted_requests

I resolved this by including
"permissions": [
"https://*/"
],
in my manifest.json file so it works without problem as a chrome extension. the problem seems to be from the freckle api as for the issue with local host

$http provider makes external requests to Github API, but not Google map API

I'm trying to use AngularJS's $http provider to create a request to the Google Map API. I keep getting the error message:
use 'strict';
if (!headersObj) headersObj = parseHeaders(headers);
if (name) {
return headersObj[lowercase(name)] || null;
}
return headersObj;
}
I created an example here:
http://jsfiddle.net/omniphx/dkagwpu0/16/
The request to the Github API will succeed, but the request to the Google map's API will fail. Can't figure out what I might be missing. Both seem to output JSON formats and both URLs work fine in my browser.
Anyone have an idea of what is causing the Google Maps API to fail?

The request isn't exactly failing per se.
You are running into the classic CORS problem.
Found XMLHttpRequest cannot load http://maps.googleapis.com/maps/api/directions/json?origin=Toronto&destination=Montreal&sensor=false. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://fiddle.jshell.net' is therefore not allowed access. in console.
Github has Access-Control-Allow-Origin:* header present in the header while googleapis doesn't has any such header. You can read more about it here