I have two React JS applications running on 3000 & 3001 locally and what I am, tring to do is, one application is having public asset (/public) i.e. json file which I can access like,
http://localhost:3000/styles.json
Other React JS application is tring to access it using axios as,
axios.get(`http://localhost:3000/styles.json`)
But I am getting following error in console,
Access to XMLHttpRequest at 'http://localhost:3000/styles.json' from origin 'http://localhost:3001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Well this may not be right way but I want to know reason as what can I do to solve it or security violation it is linked with.
Reason I am trying this is, I have accessed one application in another using iframe with passing its own public folder json file path but another application failed to access it.
The CORS (Cross Origin Resource Sharing) error you're seeing is because browsers won't load data from another domain (origin) by default.
In development you could get around this by using something like https://www.npmjs.com/package/corsproxy which basically adds a header like
Access-Control-Allow-Origin: *
to requests proxied through it. In production, you'd need to get whatever server you're using to serve your styles.json asset to do the same: The * stops the browser complaining about it being on a different domain.
Related
Forgive me for the obvious error I am obviously committing...
I understand CORS, how and why it's used. But I'm missing the blindingly obvious in this instance.
I'm trying to access a publicly available API that should work fine (I've been assured)
If I hit the endpoint in Chrome, or in Postman, all works fine: wonderful JSON is returned.
When I try to do the same using axios from within my create-react-app's componentDidMount, I get a CORS error, specifically
Access to XMLHttpRequest at 'http://some-interesting-url/sub-url?blabla=blip&foo=bar' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
What is it I'm failing to grasp? Is there anything I can do from my end? (I have no control over the server)
The Postman app is not a browser so it isn't bound by the rules of CORS. In a browser too, trying to access a URL directly doesn't trigger Cross-Origin-Request-Sharing policies. CORS, by definition will only affects the 'cross-origin' requests made from background JS code of a web-page, to another web-page or API not hosted on same domain name.
Based on the error posted, the API in question is not sending Access-Control-Allow-Origin header. If it's possible to get the API changed, that you should get the header added to response (with value '*', or your domain name). However if that's not possible, then you'd need to route the request through a web-server that you own and include this header there. This kind of does work like a proxy, albeit for a specialized use-case.
If you already have some server side application running, you can simply add another end point to your application. A call to this new end point should trigger the 'Public API' call, and send the response back to client. Since the server side program (eg PHP/Python/NodeJS) would never be a browser, they will not face the CORS issues. If your original web-page is also loaded from same web-server, then the response header can be skipped.
​Can someone tell me how to set CORS filter on XS advanced server. Currently all request calls from client application(angular) are rejected with message:
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.
XSA don't have .xsaccess file like XS server. By default XSA should accept all CORS requests but this is not the case.
I suppose that your client is angular app and you have some other "backend" app deployed on XSA.
First of all, your "backend" app (java, nodejs,...) should be part of multi target application. When you build this app, you will get .mtar (mulri target archive) which then should be deployed to XSA.
Also you need to create one more module as part of MTA. The module/app type should be html5 type, and commont practice is to call it web
web module acts as an application router and there is a file xs-app.json where you can specify route rules and also cors settings. It is a useful feature because you can manage the securty in that way.
Why can I make a REST API request from a browser/Postman/ even Node.js (http.get method), but not from Angular resource?
The snippet of the error message is:
XMLHttpRequest cannot load http://example-of-external-api-site.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://localhost' is therefore not allowed access.
Before asking this, I tried to look at the definition of CORS. And from my understanding, I can understand why it disallow the request I make from Angular's resource since it is coming from a different domain. But, isn't my browser/Postman/Node.js app are from a different domain as well?
Please help me answering this, I can't really understand why..
When a request is made from the browser when accessing a url directly, you are requesting the content of a url without the use of XMLHttpRequest.
There are two scenarios for $http.get():
When accessing a uri that is NOT the same domain that is hosting your AngularJS content, via an ajax call utilizing XMLHttpRequest from within the rendered content of your browser, you must provide a CORs header that matches the whitelisting on the target server. This is due to browser security restrictions to prevent nasty, malicious attacks such as Cross Site Scripting.
When accessing a uri that IS the same domain as that which is hosting your AngularJS content (typically done via relative paths: /Api/1 instead of http://domain.com/api/1), CORs whitelisting is not required, since both the origin and the target domain are the same.
Finally, when invoking a url from node, you are making a server to server concurrent call which does not have the same security restrictions since it is not executing within your browser.
I made a website in angular which consumes ASP.NET Web Services. I followed this tutorial: Tutorial.
I used the same code as there and when i make an registration it is ok and the user goes in the database but when i try to login i get that massage in the console:
XMLHttpRequest cannot load localhost:16270/token. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localhost:50357' is therefore not allowed access.
I know the reason (i am not allowed to make CORS request) but for the register i am not allowed too but somehow the code overrides that but this doesn't work for the login. I searched google tried many things but nothing really helped. I tried to enable CORS, tried to send Access-Control-Allow-Origin: * to the response header but nothing changed. I know that i must add: Access-Control-Allow-Origin: * to the response header but how to add response header on Web Service that i didn't created (i am talking about http://localhost:16270/token). I didn't created that service and it needs header to be added to its response. How can i made that ? Or i should do something else to make the things work?
If in producation you web app and service is going to be on same domain then this issue won't be raised.
If you just want to resolved it temporary for development the you can add
access control allow origin chrome extension or you can open chrome with web-security disable by just opening a new chrome session from command prompt
chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security
I'm using Wamp as my local server while I test my Angular app.
I am using $resource to get some api data from my server but I'm getting a message
XMLHttpRequest cannot load http://myproj.herokuapp.com/api/projects?name=demo.
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access. The response had HTTP status code 401.
I've searched far and wide on the web but I cannot find a working way to get around this.
Any new fresh ideas? Has anyone overcome this issue?
how to allow ACCESS-CONTROL-ALLOW-ORIGIN aka cross-domain on wampserver
This author got it right.
"You have to enable the headers module first, like so :
click on the wamp icon in your systray
go to Apache > Apache modules
check the option 'headers_module'
And then include this in your apache config:
Header set Access-Control-Allow-Origin: *
(in httpd.conf or in the configuration of your vhost)
(Instead of the * you can also specify a specific domain)"
Then bring up your browser, and use localhost/filename to access your files.