We Keep Coding

HTTP Request to external API blocked by CORS policy from every origin except localhost

I'm creating an Angular application with which I want to use the DEGIRO public API. Something is going wrong with cross-origin requests between my application and the external API.
When I run the application on localhost with ng serve my preflight requests pass the access control check perfectly. However, I run into problems when I run the application with any other origin host like [any IPv4-address]:4200 with ng serve --host [any IPv4-address]. The same problem also occurs after deploying to for example Firebase.
To communicate with the API I use the HttpClientModule with Angular as shown in the image below.
Angular HTTP POST API call
The problem I run into is described to me by the error message below.
"Access to XMLHttpRequest at 'https://trader.degiro.nl/login/secure/login' from origin
'http://192.168.178.120:4200' has been blocked by CORS policy: Response to preflight request
doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the
requested resource."
The main reason this error confuses me is because it doesn't happen from localhost. In the two images below the differences between the preflight request headers(localhost:4200 & 192.168.178.52:4200) are shown. Please note how the only differences are the origin and referer headers. The deployed application on Firebase is also similar like this.
Http request header (localhost)
Http request header (IPv4-address)
I've tried skipping the preflight request by adding a 'content-type': 'text/plain' header, but even the now simple request wouldn't be accepted by the CORS policy.
I have also read several somewhat similar issue's, but none of them matched my case perfectly and neither did their solutions. Next to these I have also read up a bit on CORS. I found this article very informative and helpful. https://www.html5rocks.com/en/tutorials/cors/
I can't think of any more context. I hope this post is clear and you're able to help. Thanks in any case!

Did you request a session with VWD service?
As I can see first you need to make POST request to:
https://degiro.quotecast.vwdservices.com/CORS/request_session?version=1.0.20170315&userToken=YOUR_TOKEN
And provide header:Origin: 'https://trader.degiro.nl'
and provide body: JSON.stringify({referrer: 'https://trader.degiro.nl'})
After you get the session you use that to for example: get latest bid/ask prices for a VWD issue ID
Check this package out, take look at how they managed to get it working.
Cheers :)

I'm currently working on a project using the angular 2 . I am getting Access-Control-Allow-Origin issue

when i am hitting third party services from my java script code I am getting below error in the browser :
Failed to load http://api.mysite.com: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://client.mysite.com' is therefore not allowed access.
Please suggest me how to fix this issue.

CORS is basically applied by the browsers for security purpose:
If you are using chrome for development you can install this extension:
https://chrome.google.com/webstore/detail/moesif-origin-cors-change/digfbfaphojjndkpccljibejjbppifbc

Download the "Allow-control-allow-origin" Extension from the chrome browser and then enable it.

First of all , check your service API has CORS enabled/not. If not enable and check.

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access

Hi guys i am working on an ionic app for magento and i am beginner in ionic also i am using google chrome browser but when i run this app in browser using
ionic serve command app is running but its empty i am getting this error in console
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.
I have search a lot found a solution to use this extension
Allow-Control-Allow-Origin: *
when i use this extension error is fixed but still app is empty data is not showing in browser but when i am runing this app on PhoneGap or in device its working fine and fetching all data from magento.
i don't have server access where this magento website is installed..

If you are using Google chrome there is a plugin that you can add :
https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi
It had solved the problem for me.

Unfortunately you need to setup/unable CORS on the magneto sever. You can try setup a proxy for ionic serve - take a look here: http://blog.ionic.io/handling-cors-issues-in-ionic/
Inside your .project file:
{
"name": "proxy-example",
"app_id": "",
"proxies": [
{
"path": "/api",
"proxyUrl": "http://mad.xs4arabia.com"
}
]
}
so in the your services/controllers:
$http.get('/api/myendpoint')
which would resolve to:
http://mad.xs4arabia.com/myendpoint

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

angular.js $http.post not working in phone

I have a big problém,
I made a small application ionic , angularjs that works without error,
when I add $http.get() call to receive a JSON file
the browser displays the error:
XMLHttpRequest cannot load ..... No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.
$http.get("http://elite-schedule.net/api/leaguedata")
.success(function(data) {
deferred.resolve(data);
}) .error(function() {
console.log("Error while making HTTP call.");
deferred.reject();
});
I add the extension Allow-Control-Allow-Origin: *
and the application returns run
but my problem in my phone (android) it does not display anything
I think we should allow this appeal $http.get
please, who knows display console.log () in the phone , to know the source of the error or who has already this error
thank you a lot

This kind of question occurs every day. Firstly read about CORS: https://ru.wikipedia.org/wiki/Cross-origin_resource_sharing
Then if you can change server configuration, then do it(if it's ok for your security policy, of course). If not, do jsonp request. If it's not available either.. find another API.