Cross origin request error when running locally? - javascript

Ok Im breaking down https://tympanus.net/codrops/2019/03/26/exploding-3d-objects-with-three-js/ and downloaded the source, but his explanations are not in depth. Running the project locally having changed nothing, Im hit with many cross origin errors, in minified code:
XMLHttpRequest at
'file:///Users/me/Documents/Three%20JS/examples/ExplodingObjects-master/models/heart-high.glb'
from origin 'null' has been blocked by CORS policy: Cross origin
requests are only supported for protocol schemes: http, data, chrome,
chrome-extension, https.
It is also does this for various .jpg located locally. Why is this creating a cross origin problem since the file is right there?
I want to run this locally to test and understand everything, and can't run the project without the minified code. How can I fix this?

Your error says that your're just opening the HTML file in your browser. Any page opened like that wont be able to do any kind of request, even to a "Local" file. You should host your page using any kind of server, apache or even this 200ok server would do the job for you.

Related

XMLHttpRequest Cannot Load https://[website].com Cross Origin Requests are not supported

I ran my JavaScript file with phantomjs --web-security=no myfile.js successfully in my MacBook (with macOS), but fail to run it on Ubuntu, where it give out this error:
XMLHttpRequest Cannot Load https://[website].com Cross Origin
Requests are not supported
I find my problem is different from questions below
XMLHttpRequest cannot load Cross origin requests are only supported for HTTP
XMLHttpRequest cannot load https://www.[website].com/
For the first one, my error message is simply 'not supported', but not tell my 'only supported for HTTP' (though I send request to a HTTPS url).
For the second one, my error message doesn't require the 'Access-Control-Allow-Origin' header.
I tried --debug=true option for PhantomJS, and it turned out that when running within Ubuntu, the PhantomJS silently dropping cookies.
Under my circumstance, could any one tell me how to fix this?
phantomjs seems to have an option which allows to make XMLHttpRequests from local files to a http server: --local-to-remote-url-access
For reference: http://phantomjs.org/api/command-line.html

How to upload images cross domain (support all browser and mobile browsers)?

I have created API which helps developers upload images to their virtual folder.I have done everything but I have seen that cross domain upload doesn't seems to work when trying with mobile,how can I solve this?Deskop version works perfectly but mobile doesn't seems to work.And I have tested it same domain it worked but if it is cross domain it begin to not work,and fail.
Note: I have tested CORS but works only on desktop not on mobile,I know that I am not able to use jsonp in this case because I am uploading image and it cannot be done by jsonp.If Cors is not sollution How can I create cross browser,mobile supported upload process?
Example:http://newtimebox.com/demos/OOS_engine_API/upload.php , it works with desktop , but fail on mobile
Console says problem is XMLHttpRequest cannot load http://api.newtimebox.com/Controller/upload.php?connect_key=‌​tmp873ap_k958a7…7b9f‌​a25591dc4a472e74aeb1‌​cd89fe590b558a73a72a‌​982b58a73a72a986158a‌​73a72a9896. Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header contains multiple values '*, http://www.newtimebox.com', but only one is allowed. Origin 'http://www.newtimebox.com' is therefore not allowed access. but I have just wrote one line which header Access-Control-Allow-Origin *
I cannot find cross browser solution but I have found my problem sollution,I got above error because I called that method from my subdomain(it is wierd).if I call that from http://example.com it works but if I call this from http://www.example.com it is not working

Problems with my Firefox addon and cross domain https

I have an addon for Firefox which modifies a page at http://target.com with data from http://data.com. It does this by making an XMLHttpRequest() in the addon javascript and modifying the webpage accordingly. Neither the target nor the source servers are under my control.
This all worked fine until the target.com website changed to using https. As I was loading data from an http: address I got the following error:
Blocked loading mixed active content
Fortunately data.com also supports https, so I changed the data lookup address to https://data.com, and then I got
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://data.com
I read here that I could add the following to my package.json
"permissions": {
"cross-domain-content": ["https://data.com"]
}
And now I don't get any errors, but the Developer Tools Network page doesn't show any connections being made.
Have I hit a dead end? I understand that CORS requires server support but I assumed that as it worked prior to the target server moving to https it would still work now.
Cheers
Rich
That is one of the issues with using libraries (and not Firefox API)
Try using the native Firefox API eg: Connecting to Remote Content
Native Firefox API runs in the browser scope so there is no CORS to consider.

Chrome blocking iframe requests as cross-origin request even when origins are the same

This one has me stumped.
I have a web app that has a file upload/download area. Files are downloaded in the background via a temporary iFrame element. This is a single-paged AJAX application and the UI is written in Javascript, jQuery and uses the jQuery.FileDownloader.js to manage the iFrame. The application runs over HTTPS and the site and download URL are on the same exact domain. The back-end is a RESTful application. This has worked great for months. Until today.
All of a sudden, when attempting to download a file in Chrome, the browser reports an error of "Blocked a frame with origin https://example.com from accessing a cross-origin frame."
The problem is that the origin of the main site and that of the iframe are the exact same domain. I have ensured that the domains are the same as well as the protocol. Chrome is the only browser that throws up the cross-origin error. IE, Firefox, Opera, Safari... all work as expected. It's only in Chrome and it's only as of today. To make things worse, no updates were made to the browser. It truly is spontaneous. I've also ruled out plugins as the cause by running in Incognito mode, where none are allowed to run by my settings, as well as disabling my anti-virus software. This problem is being exhibited on other computers, in other locations (not on our LAN or subnet), all running Chrome.
And, again, both domains of the parent frame and the embedded iframe are identical. This only happens against the production server which runs over HTTPS. Other non-HTTPS sites (e.g. our dev environment, localhost) don't have the problem. Our SSL is valid. Since this is a single-paged AJAX application, we're trying to avoid popping up another window for the download.
Hopefully, someone can offer some advice. Thanks in advance.
Update: After additional research, I have found the solution to this problem is to enclose the filename in the response header in double-quotes.
I have found the cause of the problem. It turns out that Google Chrome has problems with files that have commas in their filename. When downloading the file via a direct link, Chrome will report that duplicate headers were reported from the server. This has been a long-standing problem with Chrome that has gone un-addressed. Other browsers are not susceptible to this problem. Still, it's a fairly easy problem to troubleshoot and, indeed, when I searched on this error, the first search result had the solution: remove commas from filenames when handling a request from Google Chrome.
However, this wasn't a direct link, it was an AJAX-request, which results in a different exception. In this case, the error provided by Chrome is the cross-origin request exception and this is what made it so difficult to troubleshoot.
So, the tl;dr of it all is to strip out commas in the names of uploaded files.
Another instance I found where this issue occurred is after executing code similar to:
document.domain = '[the exact same domain that the iframe originally had]'
Removing this line of code got rid of this error for me.

Localhost: Image from origin 'null' has been blocked from loading by Cross-Origin Resource Sharing policy

I'm opening the page on two computers, both ip and localhost tried:
Strangely, for one computer, the http://192.168.1.100/dev didn't work and http://localhost/dev did. For the other, neither worked. It says,
Image from origin 'null' has been blocked from loading by Cross-Origin Resource Sharing policy: Received an invalid response. Origin 'http://localhost' is therefore not allowed access.
None of the answers I found seem to work. And I don't understand why it only worked on localhost on one computer. Any suggestions?
Edit:
Browser: Chrome Version 34.0.1847.11 beta
http://127.0.0.1/dev didn't work either
The uploaded version on server didn't work either
It turns out, it was the AdBlock plugin that blocked the file.
The name of the directory containing the blocked file was AD16. Somehow the other AD01, AD09, AD22, AD27 worked fine, but not AD16.
Disabling AdBlock and everything works fine.
The same problem would have occurred on any chrome with the plugin on, so we changed the name of the directory to AD_16.

Categories