I tried to load a local file in my javascript file by using Fetch API having no result.
"It couldn't be loaded as URL scheme "file" is not supported".
So i decided to try using XMLHttpRequest API but nothing changed, as i got CORS error.
"from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https".
how can it be done?
First of all, let me clear some facts:
To load any file through a http protocol, you need to create a server
that is able to fetch the file from the filesystem for you.
Let's say you have a file.txt file lying around, and you want to load it, so you can definietly do it but you need to setup a server such that it can capture the query you want.
Now, I recommend using POST request in this case, and fs library with express in backend.
I am getting a below error in chrome console
XMLHttpRequest cannot load XMLHttpRequest cannot load
turn:global.turn.twilio.com:3478/turn?username=username&key=key&transport=udp
Cross origin requests are only supported for protocol schemes: http,
data, chrome, chrome-extension, https.
while running a local webrtc sample server
The node server example i am running is from https://github.com/ISBX/apprtc-node-server/
Below is the screenshot
Thanks in advance
I believe you have a misunderstanding of what a TURN server is for, and are calling it as if it is a standard web server.
As some of the commenters mentioned, you're not supposed to make an HTTP request to a TURN server, which uses a different TURN protocol. Instead, you configure your WebRTC setup via the iceServer object, which is where you define a TURN server. The WebRTC implementation will use the TURN servers when required.
Here's a nice article about WebRTC signaling:
https://www.html5rocks.com/en/tutorials/webrtc/infrastructure/
And here's a couple other articles if you're interested in learning about the specific protocols WebRTC uses:
https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Protocols
https://www.twilio.com/docs/api/stun-turn/faq
Can't read from server. It may not have the appropriate access-control-origin settings.
I've had this error before, but I could really do with having Swagger UI work this time. The json file I'm putting the URL in for is being served from the same host, so it shouldn't require CORS. Indeed I've enabled CORS on the server side but it's not adding the headers because the browser isn't sending an Origin header (presumably because it knows CORS isn't required).
In fact the json file returns a 200 and I can see the content of it in the response in the Chrome debug tools network tab - infuriatingly there isn't a failed request in there so I don't know what's broken, other than that the petstore URL does work.
ETA: Swagger Editor can call my API without these issues, even when it is hosted on another server, but it's Swagger UI I want to share with users.
It was nothing to do with CORS, whatever the issue was.
Replacing the JSON file with one taken from the petstore worked, so it must've been some issue parsing it.
I'm trying to process onedrive files in client-side javascript, but first I need a way to use XMLHttpRequest to download the file. Onedrive supports cors for a lot of operations, but for downloading the file into javascript there is the following problem:
As mentioned here: onedrive rest api manual
I can send a request to:
GET https://apis.live.net/v5.0/FILE_ID/content?access_token=ACCESS_TOKEN
and it will reply with a location header redirecting the browser to the file. The problem is when I send these requests through XHR, the browser always sends the Origin header with the request. For the first request I described above, onedrive also replies with an Access-Control-Allow-Origin:* header, so the request is allowed in the browser. However, when the browser is redirected to the actual location of the file, that resource does not have the Access-Control-Allow-Origin header, so the XHR request is denied by the browser(chrome sends an Origin header set to null for the redirect request).
I've also tried getting the location but not redirecting automatically, and then sending another XHR request, this will set the origin header to the domain of my site, but the result is the same.
As I mentioned in the beginning, I need to process the data in javascript, so I'm not asking about how to download onedrive files to hard drive. I need the data to be accessible by javascript in the webpage.
I know that I can use server side programming to get the file data for me and then send it to the client, but for my application this is not an option(at least this is not what I'm asking for at the moment).
If there is no way to do this, does anyone have an idea why they would implement their api this way? To allow javascript to get the location through cors and redirect but not include a cors header for the redirected resource. Why not just deny cors in the first place? Is this a bug?
The answer, as best as I can tell, is that downloading content cannot be done purely by JavaScript in a browser. Why did they do it this way? You'd have to ask them, but I would guess either a bug, or some unspecified "security concerns". For what it's worth, they seem to think that downloading content is CORS compliant in the documentation here: https://dev.onedrive.com/misc/working-with-cors.htm:
To download files from OneDrive in a JavaScript app you cannot use the
/content API, since this responds with a 302 redirect. A 302 redirect
is explicitly prohibited when a CORS preflight is required, such as
when providing the Authorization header.
Instead, your app needs to select the #content.downloadUrl property,
which returns the same URL that /content would have redirected to.
This URL can then be requested directly using XMLHttpRequest. Because
these URLs are pre-authenticated they can be retrieved without a CORS
preflight request.
However, to the best of my knowledge, they are wrong. Just because you don't need a preflight request doesn't mean that the response is CORS-compliant. You still need an Access-Control-Allow-Origin header on the response.
For anyone wondering, this is still an issue in the new Graph API (which is essentially a proxy API to the OneDrive API, as I understand it). The same basic issue is still present - you can get a download URL from your items, but that URL points to a non-CORS-compliant resource, so it doesn't do you a whole lot of good.
I have an active issue open with Microsoft here about this issue. There has been some response to my issue (I got them to expose the download URL through the graph API), but I'm still waiting to see if they'll come up with a real solution to downloading content from JavaScript.
If I get a solution or real answer on that issue, I'll try to report back here so others in the future can have a real answer to reference.
This is not an answer, I cannot comment yet.
Last week the new API for onedrive was released. http://onedrive.github.io/index.htm
Unfortunately it will not solve the problem.
https://api.onedrive.com/v1.0/drive/root:{path and name}:/content?access_token={token}
Will still redirect to a ressource somewhere at https://X.files.1drv.com/.X.
Which will not contain any Access-Control-Allow-Origin headers. Same goes for the Url "#content.downloadUrl" in the JSON response.
I hope that microsoft will address this problem in the very near future, because the API is at the moment of very limited use, since you cannot process file contents from onedrive with html5 apps. Apart from the usual file browser.
The only solution, which I see at the moment would be a chrome app, which can process the Url without CORS. see https://developer.chrome.com/apps/angular_framework
Box does exactly the same thing for download requests. I have not found any way around this problem without involving a server because the browser will not let your program get access to the contents of the 302 redirect response. For security reasons I am not convinced of, browsers mandatorily follow redirect requests without allowing user intervention.
The way we finally worked around this was
the browser app sends the GET request to the server which forwards it to the cloud provider (box/ondrive).
server then DOES NOT follow the 302 redirect response from Box or OneDrive
The server instead returns to the browser app, the content of the location field in the 302 response header, which contains the download url
The javascript in the browser app then downloads the file using the url.
You can now just use the "#content.downloadUrl" property of the item in your GET request. Then there is no redirection.
From https://dev.onedrive.com/items/download.htm:
Returns a 302 Found response redirecting to a pre-authenticated download URL for the file. This is the same URL available through the #content.downloadUrl property on an item.
I am trying to request some json resources from google apis (picasa photos) from my JS. Can someone explain why my request would succeed when my site is served as localhost on my mac, but not from my development server (using chrome browser)?
This happens due to cross domain, cross browser request issues. JSONP may help. Take a look at this example
Cors must be supported and enabled on server side beside the browser compatibity.