I see there are lots of threads about No 'Access-Control-Allow-Origin' header. My question is about how to solve this in plunker.
I have a piece of code in plunker, which tries to load an external html file. It gives an error No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://run.plnkr.co' is therefore not allowed access.
I tried to launch Chrome by open /Applications/Google\ Chrome.app --args --disable-web-security, but it did not help.
Does anyone have any workaround to make loading an external html file work in plunker?
You can use an open CORS proxy like https://cors-anywhere.herokuapp.com/.
The way it works is, instead of making your request directly to https://site.to.request you make your request to https://cors-anywhere.herokuapp.com/https://site.to.request.
The https://cors-anywhere.herokuapp.com/ proxy then adds the necessary CORS headers.
Or you can run your own instance from the source at https://github.com/Rob--W/cors-anywhere/
Related
This question is related to my other question - How to open a chrome trace file with ui.perfetto.dev non interactively?
I am attempting to open the trace events by navigating to the following url:
https://www.ui.perfetto.dev/#!/viewer?url=file://127.0.0.1/c:/Temp/events.json
However the document's Content Security Policy fails the call to fetch(url):
Refused to connect to 'file://127.0.0.1/C:/Temp/events.json' because it violates the document's Content Security Policy.
So, I would like to open a chrome window with disabled CSP. Ideally this window would not be used for anything else, but if it is not possible to enforce it, I am fine with it being a security hole if reused for other purposes. I can live with that.
I tried running chrome like this:
& $ChromeExe "https://www.ui.perfetto.dev/#!/viewer?url=file://127.0.0.1/c:/Temp/events.json" --disable-web-security --user-data-dir=c:\Temp\events
To no avail. The same document's CSP violation error message appears in the output. I do not think --disable-web-security is relevant for CSP at all, according to https://peter.sh/experiments/chromium-command-line-switches/ it has to do with CORS rather than CSP.
How can this be done?
Unfortunately (or actually, fortunately) a browser cannot open file:// URLs (if it could, it would be a nightmare for web security).
In order to achieve what you want, spawn a local HTTP server and use the ?url= argument (see my reply to How to open a chrome trace file with ui.perfetto.dev non interactively?)
I'm working on a project using BIM360 and Forge and when I click a Revit file, the application gives me an error of:
'CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.'
It seems like something is wrong with your setup.
Can you follow this link and click on #5.
https://forge.autodesk.com/developer/idea/viewer-app
Copy and paste the URN and a fresh "AccessToken", into the viewer code. 2. Save the source code as a HTML file.
Open the HTML in browser (running from file or from localhost, both will work).
Does that load the Revit file ? Do you still see the CORS error ?
Could you go to this RAW gist link: https://gist.githubusercontent.com/wallabyway/bee2541c9f7eedac1288747f4a6aaa14/raw/c2c1f6beea41610f616ffae2f16bf32c6eaac8d8/forge-skeleton-css
now, copy-and-paste this into a text editor, and save it as 'test.html'...
then open it directly in a browser, with "file:///"
ie. file:///Myfolder/test.html
You should load and view the following (screenshot)...
Does that work ?
I actually don't know the right title for this question, because of I've found many similars but still couldn't figure the solution out.
My problem is that (on Chrome) the website I've working on remain showing console log: XMLHttpRequest cannot load http://resource.domain.com/file.css. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.my-site-url.tld' is therefore not allowed access.
I've tried to allow that resources via .htaccess files using this code.
<FilesMatch "\.(jpg|jpeg|png|gif|js|css)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin http://wp.com,http://ajax.googleapis.com,http://fonts.googleapis.com,http://zor.fyre.co
Header set Access-Control-Allow-Credentials true
</IfModule>
</FilesMatch>
Doesn't work. I've also tried php and jsonp version.
Anyone please help me to fix this issue.
Additional info:
Lately, in inspect elements > Networks > Headers section, I found this message:
Your issue most likely stems from the fact that you are trying to load content from an external domain, which is prohibited in a normal json call hence the No 'Access-Control-Allow-Origin' error. The technique you may need is known as JsonP. I would link the documentation; however, it really can depend on the javascript framework you are using. I recommending reviewing this post for a walk-through on how to invoke this behaviour via normal JS. https://stackapps.com/questions/891/how-to-call-the-api-via-jsonp-in-plain-old-javascript
Hope this helps!
I'm using HTML5 canvas and the .toDataURL() function through KineticJS's .toDataURL() method. The canvas uses images that my users uploaded to the site, which are stored on a different machine and subdomain farm1.domain.com.
Problem: When .toDataURL() is called, I get the error
SECURITY_ERR: DOM Exception 18
Is there a way around this? I also get the same problem if the user access the page via domain.com and the image is hosted at www.domain.com.
Attempt:
I added the following lines to httpd.conf within virtualhost and restarted the apache service.
Header add Access-Control-Allow-Origin "http://www.domain.com"
Header add Access-Control-Allow-Origin "http://domain.com"
Header add Access-Control-Allow-Origin "http://farm1.domain.com"
I still get the same error when accessing image hosted on www.domain.com from page on domain.com! Is there a way around this in KineticJS?
You will need to add the Access-Control-Allow-Origin headers to the images you are loading, not to the page which is loading them. For details on this header, and on CORS in general, you may want to read "CORS isn't just for XHR", which specifically discusses this issue.
There is no way around this error. Images loaded in a canvas from a different domain will raise this error as currently implemented by every browser. In your case the images should be stored in the same domain and you would not be getting exceptions.
I have the same problem with this post context.getImageData() on localhost?, but instead of localhost I am working on a https site so this provokes the problem with the canvas. It there a solution for this case?
These problems arise when you are trying to get data from images loaded across different domains.
One way to solve this (if you are the one in control of serving the images) is by enabling CORS (Cross-Origin Resource Sharing). What this does is basically add an Access-Control-Allow-Origin header to the served image.
You can read all about it in http://www.w3.org/TR/cors/. Your use case is described specifically in http://www.w3.org/TR/cors/#use-cases, section "Not tainting the canvas element".
There is a great resource for understanding how to enable CORS in http://enable-cors.org/. If you're running an apache instance, the easiest way is to use a .htaccess file to enable the headers.
However, if you are not in control of the served images, then you may need to ask permission to use them and probably copy them to your own server.