We Keep Coding

CORS error while loading files from the same domain

I'm working on website http://www.fsvelicka.cz. I need to load a content of an HTML file to an element. I have an element and I'm loading the content with $('.about-us-first-col').load("about_us/desc/" + lang + "/first_col.html"); The problem is I'm getting an error:
Access to XMLHttpRequest at 'https://www.fsvelicka.cz/first_col' (redirected from 'http://www.fsvelicka.cz/first_col.html') from origin 'http://www.fsvelicka.cz' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
The element is inside index.html file and the file I want to load is located in about_us/desc/cz/. I don't understand why I'm getting this error while the file is in the same domain.

CORS cares about the origin of which the domain is only one part.
To be on the same origin each of:
The scheme
The full hostname
The port number
… must match.
Your URLs have different schemes. One is https, the other is http. They are not the same origin.
Generally speaking, you want to be using HTTPS wherever possible. Redirect all requests from your plain HTTP service to HTTPS. That way the HTML page will be served over HTTPS and the origins will match.

Upload image to imgur failed because of cors

I'm trying to upload an image to imgur with js (browser) and get a CORS error:
Access to XMLHttpRequest at 'https://api.imgur.com/3/upload' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
But preflight request contains Access-Control-Allow-Origin header:
The request itself:
What I'm missing? this is because access-control-allow-credentials set to true?

The problem was with their API Docs :\
The URL is: https://api.imgur.com/3/image and not https://api.imgur.com/3/upload as said here: https://apidocs.imgur.com/#c85c9dfc-7487-4de2-9ecd-66f727cf3139

according to doc https://api.imgur.com/3/upload doesnt have necessary
header ,
but on the right side ,the curl example use https://api.imgur.com/3/image has Access-Control-Allow-Origin header
and somehow they will check your referer, which means if you are in develop mode like webpack dev mode use localhost:8000 it will always return 429 too many request exception

I'm currently working on a project using the angular 2 . I am getting Access-Control-Allow-Origin issue

when i am hitting third party services from my java script code I am getting below error in the browser :
Failed to load http://api.mysite.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://client.mysite.com' is therefore not allowed access.
Please suggest me how to fix this issue.

CORS is basically applied by the browsers for security purpose:
If you are using chrome for development you can install this extension:
https://chrome.google.com/webstore/detail/moesif-origin-cors-change/digfbfaphojjndkpccljibejjbppifbc

Download the "Allow-control-allow-origin" Extension from the chrome browser and then enable it.

First of all , check your service API has CORS enabled/not. If not enable and check.

XMLHttpRequest blocked by CORS Policy

I add an API with following script in let's say http://www.test.com:
<script src="http://apiendpoint.com/api/v1/api.js"></script>
<div id="api" data-apikey="LA59CJI9HZ-KIJK4I5-3CKJC"></div>
api.js
$(function () {
apikey = $('#api').data('apikey');
$("#api").load("http://apiendpoint.com?apikey=" + apikey);
})
When I load the page, I get following error:
XMLHttpRequest cannot load
apiendpoint URL.
Redirect from
'apiendpoint URL' to
'apiendpoint URL' has
been blocked by CORS policy: No 'Access-Control-Allow-Origin' header
is present on the requested resource. Origin
'test URL' is therefore not allowed access.
In the path of apiendpoint.com I added in .htaccess following code:
Header set Access-Control-Allow-Origin "*"
But it does not work.

I believe sideshowbarker 's answer here has all the info you need to fix this. If your problem is just No 'Access-Control-Allow-Origin' header is present on the response you're getting, you can set up a CORS proxy to get around this. Way more info on it in the linked answer

I know this might be late, but hope this will help others. This problem comes from backend side, call CORS. I'm using java for backend so I added#CrossOrigin to Controller class. It works!

Parse JSON to HTML with jquery

I need to parse this JSON link
http ://www.mse.mk/FreeMseFeeds/service/FreeMSEFeeds.svc/ticker/JSON/9538ac69-2c99-45ba-bbd4-90931ca0cc7d
to be same like on this page:
http ://www.mse.mk/en/
image:
http: //tinypic.com/r/1zlyhwo/8
I've tried like this:
$.getJSON("http://www.mse.mk/FreeMseFeeds/service/FreeMSEFeeds.svc/ticker/JSON/9538ac69-2c99-45ba-bbd4-90931ca0cc7d",function(data){
alert(data[0].name);
});
I got this error:
XMLHttpRequest cannot load
http:// www.mse.mk/FreeMseFeeds/service/FreeMSEFeeds.svc/ticker/JSON/9538ac69-2c99-45ba-bbd4-90931ca0cc7d.
No 'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http: //kristijanz.com' is therefore not allowed
access.
Any help ?

Looks like a CORS issue - your application calling www.mse.mk/FreeMseFeeds/service/FreeMSEFeeds.svc/ticker/JSON/9538ac69-2c99-45ba-bbd4-90931ca0cc7d is not running in the same domain.
If you control the service, you can implement CORS to allow other domain origins.
If you do not, you cannot call this service from your domain.
CORS - https://en.wikipedia.org/wiki/Cross-origin_resource_sharing