No 'Access-Control-Allow-Origin' header is present on the requested resource.
-
okay......
i have a resource i need to fetch via client side JS.
no porblem the target site uses bootstrap, so there's jquery. let's just pop open the console and do some quick tests to verify everything will work real quick.
$.get('https://ci.appveyor.com/api/projects/AccaliaDeElementia/CompressionTest/artifacts/TestResults.json?pr=false&branch=master')
that should do for a test. i just need to fetch that json........ what the?!
XMLHttpRequest cannot load https://appveyorcidata.blob.core.windows.net/accaliadeelementia-42614/compr…qMaSKIXuR0%3D&st=2017-06-21T19%3A16%3A22Z&se=2017-06-21T19%3A22%3A22Z&sp=r. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
ah........ fuuuuuuuck.
okay okay. let's try on google.com, just to make sure it's not my page.
XMLHttpRequest cannot load https://appveyorcidata.blob.core.windows.net/accaliadeelementia-42614/compr…qMaSKIXuR0%3D&st=2017-06-21T19%3A16%3A22Z&se=2017-06-21T19%3A22%3A22Z&sp=r. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
fuuuuuuuuuuuuuuuuuuuuuck
okay. one last test...... we'll try it on wtfwtf, that has to work right?
XMLHttpRequest cannot load https://appveyorcidata.blob.core.windows.net/accaliadeelementia-42614/compr…qMaSKIXuR0%3D&st=2017-06-21T19%3A16%3A22Z&se=2017-06-21T19%3A22%3A22Z&sp=r. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
why chrome..... why you hate me?
Why google? Why you no help me solve this?
-
@accalia Looks like XSS protection working properly to me.
Have you tried using the JSONP method? That tends to play nicer with cross-domain requests.
-
@RaceProUK said in No 'Access-Control-Allow-Origin' header is present on the requested resource.:
Have you tried using the JSONP method?
the endpoint doesn't support JSONP (unless i very much misunderstand the JSONP protocol) as ultimately it is literally just a .json file sitting on disk that is getting served up.
curl "https://ci.appveyor.com/api/projects/AccaliaDeElementia/CompressionTest/artifacts/TestResults.json?pr=false&branch=master" -iL
works on the command line and fetches the file. I don't have control of the endpoint that has my data, i just want to get my data.
-
Code a PHP (or whatever language suits you) page on one of your servers that, when called, fetch the .json file, then serves it to your JS
-
@accalia said in No 'Access-Control-Allow-Origin' header is present on the requested resource.:
works on the command line and fetches the file.
Then do just that. Set up a reverse proxy which can fetch the resource with
curl
or any other non-browser HTTP client and relay it with proper CORS headers.Don't worry about JSONP, it's pretty useless. If you have control over the server, you can set it up to return CORS headers.
-
@accalia said in No 'Access-Control-Allow-Origin' header is present on the requested resource.:
the endpoint doesn't support JSONP (unless i very much misunderstand the JSONP protocol)
Having reminded myself of what JSONP is, you understand it right: it needs server-side support.
curl
et al do seem to be your best bet.
-
@TimeBandit said in No 'Access-Control-Allow-Origin' header is present on the requested resource.:
Code a PHP (or whatever language suits you) page on one of your servers that, when called, fetch the .json file, then serves it to your JS
not supported by github pages (where this will ultimately be hosted) my solution needs to be client side
@Maciejasjmj said in No 'Access-Control-Allow-Origin' header is present on the requested resource.:
Then do just that. Set up a reverse proxy which can fetch the resource with curl or any other non-browser HTTP client and relay it with proper CORS headers.
i'm not running the server this will be hosted on, so that's not really an option for me unless i decide to pay for this site, and i'm not willing to throw money at this side project.
-
@TimeBandit Still will get blocked by XSS controls. I've been fighting this myself. It's in all the browsers.
curl
works by not including those controls (and thus is open to abuse). You might get around it if the server serves the JSON object as text/plain (which doesn't trigger the CORS checks).
-
Access-Control-Allow-Origin: *
-
@TimeBandit Requires server-side access. @accalia doesn't have server-side access.
-
@TimeBandit said in No 'Access-Control-Allow-Origin' header is present on the requested resource.:
Access-Control-Allow-Origin: *
assumes i have control of the host server.
I do not.
i'm trying to get data from appveyor's build artifacts in a github pages page.
this has to be possible, yes? it's just a freaking JSON file?!
-
@accalia Do you have any control over the build artifact generation? IE can you have it make an identical copy that is $filename.txt (so it gets served as plain text)? If so, CORS won't block it. You'll have to do more parsing client side, but
-
@accalia said in No 'Access-Control-Allow-Origin' header is present on the requested resource.:
assumes i have control of the host server.
I do not.
I was talking about my scenario where you host a PHP (or whatever) page that fetches the .json for you.
-
@TimeBandit Still won't work. She'd need server-side access to the server where the JSON is stored (to set the headers there).
-
@Benjamin-Hall She said it works with curl, why couldn't she call curl from PHP, then serve the JSON to her client-side JavaScript, while have the "Allow-Origin" set to * on her server ?
Maybe I need more
-
@TimeBandit said in No 'Access-Control-Allow-Origin' header is present on the requested resource.:
@Benjamin-Hall She said it works with curl, why couldn't she call curl from PHP, then serve the JSON to her client-side JavaScript, while have the "Allow-Origin" set to * on her server ?
because i'm NOT running EITHER server involved here. appveyor is hosting the build artifact and github is hosting the index.html file that's supposed to display this.
-
@accalia I know you're not, I was just answering @Benjamin-Hall's claim that it wouldn't work anyway.
Don't get mad at me
-
@Benjamin-Hall said in No 'Access-Control-Allow-Origin' header is present on the requested resource.:
@accalia Do you have any control over the build artifact generation? IE can you have it make an identical copy that is $filename.txt (so it gets served as plain text)? If so, CORS won't block it. You'll have to do more parsing client side, but
Updated a branch to do just that. it generated the following artifacts:
- https://ci.appveyor.com/api/projects/AccaliaDeElementia/CompressionTest/artifacts/TestResults.json?pr=false&branch=feat-website
- Still doesn't work
- https://ci.appveyor.com/api/projects/AccaliaDeElementia/CompressionTest/artifacts/TestResults.txt?pr=false&branch=feat-website
- Nope. FUCKING CORS
- https://ci.appveyor.com/api/projects/AccaliaDeElementia/CompressionTest/artifacts/TestResults.jsonp?pr=false&branch=feat-website
- aaaaaaand......... FUCK YOU CORS!
$.ajax({ type: "GET", url: "https://ci.appveyor.com/api/projects/AccaliaDeElementia/CompressionTest/artifacts/TestResults.jsonp?pr=false&branch=feat-website", dataType: "jsonp", })
i should NOT have to manually wrap a FUCK_CORS() function call about my data. I'll take this solution if there's literally no other solution, but it is NOT an acceptable one in my book.
Don't get mad at me
i'm not mad at you. I'm mad at CORS. and when i get mad i get EVEN
- https://ci.appveyor.com/api/projects/AccaliaDeElementia/CompressionTest/artifacts/TestResults.json?pr=false&branch=feat-website
-
@accalia said in No 'Access-Control-Allow-Origin' header is present on the requested resource.:
i'm not mad at you
-
fetch('https://ci.appveyor.com/api/projects/AccaliaDeElementia/CompressionTest/artifacts/TestResults.json?pr=false&branch=master', { mode:'no-cors' // Guess what this does }) .then((response) => response.json()) // The response I'm getting is empty, so this craps out .then((json) => { console.log(json); console.log('Done'); }) .catch((err) => { console.error('Alas, the fecal matter has collided with the air circulator', err); });
But yeah... empty response.
Edit:
no-cors
doesn't do what in my sleepy stupor I thought it did.
What it does is stop the browser from allowing CORS to poke through security, making it even less permissive. The way to allow cross-origin requests is to both allow the browser to use CORS and have a server than sends CORS headers, like other people have said.
-
Can't be done. I know this from fighting the same fight to get Bamboo build results included in a single-page static file I was running on the dumb terminal in the hallway. CORS is really, really good at protecting cross-origin requests. REALLY good.
ETA: To be fair I've never used the fetch api.
-
@Zecc said in No 'Access-Control-Allow-Origin' header is present on the requested resource.:
fetch('https://ci.appveyor.com/api/projects/AccaliaDeElementia/CompressionTest/artifacts/TestResults.json?pr=false&branch=master', { mode:'no-cors' // Guess what this does }) .then((response) => response.json()) // The response I'm getting is empty, so this craps out .then((json) => { console.log(json); console.log('Done'); }) .catch((err) => { console.error('Alas, the fecal matter has collided with the air circulator', err); });
except for the null body that is acceptable......
i tried specifying some options and...... nope. though i have validated that visiting that link prompts you to download the file i wanted.
maybe it's something to do with one of the response headers? maybe the content-disposition one that wants you to download it rather than save it?
fetch('https://ci.appveyor.com/api/projects/AccaliaDeElementia/CompressionTest/artifacts/TestResults.json?pr=false&branch=master', { mode:'no-cors', // Guess what this does redirect: 'follow', cache: 'no-cache', method:'GET' }) .then((response) => response.json()) // The response I'm getting is empty, so this craps out .then((json) => { console.log(json); console.log('Done'); }) .catch((err) => { console.error('Alas, the fecal matter has collided with the air circulator', err); });
-
@Zecc said in No 'Access-Control-Allow-Origin' header is present on the requested resource.:
But yeah... empty response.
But it's not if you access the URL directly. Are you sure
no-cors
works like you say? Isn't the entire point of an opaque response that you can't access the body?By the way, found this:
-
@accalia said in No 'Access-Control-Allow-Origin' header is present on the requested resource.:
i should NOT have to manually wrap a FUCK_CORS() function call about my data. I'll take this solution if there's literally no other solution, but it is NOT an acceptable one in my book.
I mean... you kind of should have to do that. It impairs usability, but that's the security tradeoff. Without the same-origin policy (some measure of "consent"), what's restricting your GitHub page from requesting the list of notifications you have pending on WTDWTF? Or posts from the lounge? Or updating your profile settings on Facebook? Or requesting your bank balances?
This is how the Web has to work now, and it only seems like such a huge impediment because the original design and premise of the Web was woefully naïve and it had to be fixed after the fact.
-
@Maciejasjmj said in No 'Access-Control-Allow-Origin' header is present on the requested resource.:
By the way, found this:
http://cors-anywhere.herokuapp.comOh yeah, cors-anywhere! That works if you don't need anything special. I ended up having to re-host a server-side version of his code last time I touched CORS.
-
@heterodox said in No 'Access-Control-Allow-Origin' header is present on the requested resource.:
you kind of should have to do that
You shouldn't because public APIs should be setting goddamn CORS headers. They're public APIs, they're meant to be used in other apps.
-
@Yamikuronue said in No 'Access-Control-Allow-Origin' header is present on the requested resource.:
You shouldn't because public APIs should be setting goddamn CORS headers. They're public APIs, they're meant to be used in other apps.
Right, but the problem is with Appveyor then, not with any of the browsers or with the idea of CORS itself. It seems to me if this was reported at http://help.appveyor.com/ it might be fixed.
-
@Zecc said in No 'Access-Control-Allow-Origin' header is present on the requested resource.:
mode:'no-cors' // Guess what this does
Ah. It does *NOT Do what you think it does.
It allows you to make the request, but it does not let you see the response. the response object you get is an "Opaque" response which allows you to do..... jack shit about it really. it doesn't even let you see what the HTTP response code was to your request.
Because what the fuck really?!
-
@accalia https://crossorigin.me/ (or another similar free CORS proxy)
-
@ben_lubar said in No 'Access-Control-Allow-Origin' header is present on the requested resource.:
@accalia https://crossorigin.me/ (or another similar free CORS proxy)
yeah...... frig that.
i made it work anyway.
for the lazy, this is at the back of the HTML
<script type="text/Javascript"> 'use strict'; function Compression_Results_Loaded(results) { console.log('loaded!') // My dhtml code goes here } </script> <!-- Unfortunately CORS prevents retrieving the data via AJAX, so we'll load it as the last thing we do --> <script type="text/javascript" src="https://ci.appveyor.com/api/projects/AccaliaDeElementia/CompressionTest/artifacts/TestResults.jsonp?pr=false&branch=master"></script>
Why does that work?
because i gave up and drop a JSONP file in my build artifacts:
function Write_ResultsJSON { param( $Results, $OutputPath, $Filename = 'CompressionResults' ) $Destination = $OutputPath.FullName + "\$Filename" $ResultsText = $Results | ConvertTo-Json -Depth 50 $ResultsText | Out-File "$Destination.json" # I hate that I need this "Compression_Results_Loaded($ResultsText)" | Out-File "$Destination.jsonp" }
so yeah.
In summary.......
-
@accalia if you didn't have Cross-Origin Resource Sharing, you wouldn't be able to request the file at all using XMLHttpRequest.
-
@ben_lubar said in No 'Access-Control-Allow-Origin' header is present on the requested resource.:
@accalia if you didn't have Cross-Origin Resource Sharing, you wouldn't be able to request the file at all using XMLHttpRequest.
what are you talking about?
I couldn't request the file via XMLHttpRequest. none of my attempts were successful.
what finally worked was admitting defeat and slapping the request into a script tag and trusting it to call the function i set up to deal with the result.
so..... what are you talking about?
-
@accalia CORS is a way for websites with public APIs to share their resources. Without CORS, there wouldn't even be a way to do that short of including arbitrary scripts in your webpage.
-
@ben_lubar said in No 'Access-Control-Allow-Origin' header is present on the requested resource.:
@accalia CORS is a way for websites with public APIs to share their resources. Without CORS, there wouldn't even be a way to do that short of including arbitrary scripts in your webpage.
so....... because of CORS and the fact that appveyor didn't set it up correctly (or maybe they did and the fuck off is intentional) the only way for me to do what i wanted to do was to include an arbitrary script in my web page?
well lookie here! that's EXACT_AFUCKING_LY WHAT I HAD TO DO
so, ...... what's your point?
are you defending the behavior that i ca't load arbitrary data as data, that i have to load it as a script? If so, what the fuck?! NO!
are you trying to tell me there is a way to load my data as data instead of my script? if so, HOW?!
are you trying to say something else? in which case, What are you trying to say?!
-
@accalia said in No 'Access-Control-Allow-Origin' header is present on the requested resource.:
because of CORS
GODDAMN AUTOMOBILES MAKING IT SO I CAN'T WALK WITHOUT GASOLINE
--you
-
@ben_lubar said in No 'Access-Control-Allow-Origin' header is present on the requested resource.:
@accalia said in No 'Access-Control-Allow-Origin' header is present on the requested resource.:
because of CORS
GODDAMN AUTOMOBILES MAKING IT SO I CAN'T WALK WITHOUT GASOLINE
--you
Ben.
That's not helping. this is the for serious help section of the forum.
Please, either attempt to help me in good faith or be quiet. The mocking is not appreciated here.
Thank you.
Now that we have that out of the way.
Do you have a solution for me that allows me to make an ajax request, or use the fetch API or some other solution that allows me to make my request to appveyor.com for my data from the client side?
-
@accalia said in No 'Access-Control-Allow-Origin' header is present on the requested resource.:
Do you have a solution for me
Yes, and I'll post it again just to make sure you can see it:
-
@ben_lubar said in No 'Access-Control-Allow-Origin' header is present on the requested resource.:
@accalia said in No 'Access-Control-Allow-Origin' header is present on the requested resource.:
Do you have a solution for me
Yes,
Thank you.
@ben_lubar said in No 'Access-Control-Allow-Origin' header is present on the requested resource.:
Crossorigin.me..... let's take a look at their EULA, if they even bother to have one......
PLEASE DO NOT USE THE PROXY ON A PRODUCTION SITE.
I cannot guarantee the stability of the service, and you will probably experience service interruptions...... oh. I see. Not production ready/quality.
It's an interesting solution, and would work, however it does add a dependency on a service that explicitly asks me not to use it for production purposes.... so yeah.
-
@accalia is your use of GitHub Pages a "production" site? I was under the impression that this was just for your benefit.
-
@ben_lubar said in No 'Access-Control-Allow-Origin' header is present on the requested resource.:
@accalia is your use of GitHub Pages a "production" site? I was under the impression that this was just for your benefit.
It is a site i publish, under my definition of the word it is a production site. If this data gathering was only for my edification i wouldn't bother setting up a github repo, continuous integration provider, nor would i be worried about automatically retreving and parsing build artifacts. If it was just for me Excel works much better for single consumer.
-
@accalia said in No 'Access-Control-Allow-Origin' header is present on the requested resource.:
i'm not running the server this will be hosted on, so that's not really an option for me unless i decide to pay for this site, and i'm not willing to throw money at this side project.
Openshift can host php for free
-
You're talking to another domain, and the browser is (in a terribly-written error message) telling you that CORS isn't set up with the remote domain, so your request isn't allowed. It's basic XSS protection.
You either need to contact the other site and have them set up CORS, or use a workaround like JSONP instead. JSONP also requires their support, though, so either way the solution is: just call them up and say "hey guys, what's the dealio?"
-
@accalia said in No 'Access-Control-Allow-Origin' header is present on the requested resource.:
i'm not mad at you. I'm mad at CORS. and when i get mad i get EVEN
CORS is the solution to this problem. Without CORS your options would JSONP or "you're screwed". You're getting mad at the wrong thing; XSS protection is older than CORS.
The real problem here is:
- If you want to yank someone's shit using AJAX, you need their permission (either via. CORS or they give everybody permission via JSONP). That's by design.
- Don't write web applications without servers, because they can't do anything useful as you're now finding out.
-
@Yamikuronue said in No 'Access-Control-Allow-Origin' header is present on the requested resource.:
CORS is really, really good at protecting cross-origin requests.
Aaaaa.
XSS (or I guess more properly XSS prevention) blocks the requests. It's old as the hills in web-time. Like... IE5.x had this.
CORS is a recently added system to allow specified domains through the block. I think it was finally supported everywhere around the IE10 or IE11 time frame.
Before CORS there was only JSONP which "solved the problem" by requiring you to open up literally anybody on the web to request from you. JSONP sucked, which is why CORS was invented. Much later. JSONP isn't really even a designed "thing", it's just a side-effect of the weird special case that including a JavaScript file in a script tag uses different security rules than making an XmlHttpRequest.
Go ahead and give me all the pedant badges or whatever.
-
@Yamikuronue said in No 'Access-Control-Allow-Origin' header is present on the requested resource.:
You shouldn't because public APIs should be setting goddamn CORS headers. They're public APIs, they're meant to be used in other apps.
I would argue that if they don't set the CORS headers they are, by definition, not public APIs.
-
@accalia said in No 'Access-Control-Allow-Origin' header is present on the requested resource.:
XMLHttpRequest cannot load https://appveyorcidata.blob.core.windows.net/accaliadeelementia-42614/compr…qMaSKIXuR0%3D&st=2017-06-21T19%3A16%3A22Z&se=2017-06-21T19%3A22%3A22Z&sp=r. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
you can cheat it by running chrome insecurely ;)
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir
Of course, if you need it to work for others (or want to securely browse sites other than your own on the same chrome session) that won't help.
-
@accalia said in No 'Access-Control-Allow-Origin' header is present on the requested resource.:
because i'm NOT running EITHER server involved here.
that's why you need... a third server
the more the better right?
Host a 3rd site with a curl call to the 2nd site that parrots that info back to you with CORS enabled, then you can call that from the 1st site
-
damn you chicken and eggs - at least blakey answered more it correctly already.
-
well, their API doesn't includes test results:
so, there's that bit of unhelpful information
EDIT:
you can get the build log and parse it yourself
-
@accalia said in No 'Access-Control-Allow-Origin' header is present on the requested resource.:
@Zecc said in No 'Access-Control-Allow-Origin' header is present on the requested resource.:
mode:'no-cors' // Guess what this does
Ah. It does *NOT Do what you think it does.
It allows you to make the request, but it does not let you see the response. the response object you get is an "Opaque" response which allows you to do..... jack shit about it really. it doesn't even let you see what the HTTP response code was to your request.
Because what the fuck really?!
no-cors
indeed doesn't do the needful. That ought to teach me not to post late at night.Sorry.