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

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!

No 'Access-Control-Allow-Origin' header is present (CROS)

From html page using javascript ajax call am trying to call Login_check api (REST webservice) but am getting error as below.
XMLHttpRequest cannot load
http://184.30.53.119:8080/Automation_test1/TRTS/login/Login_Check. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

JavaScript has a same-origin policy. Which means it cannot request pages on other domains. You have a couple of options to do this, use JSONP or have a php script that you call to query the api.
More information: Working With and Around the Same-Origin Policy

Enabling CORS for accessing remote feed

I'm trying to read a remote RSS feed and getting the follwing error message:
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://*.*.*.*' is therefore not allowed access.
Can anyone tell me how to enable CORS so I can resolve this issue - particularly if I don't have admin access to the remote resource?

It's up to the remote resource to allow cross-origin resource sharing. The response needs to have a header that specifies that access can come from your domain. Something like:
Access-Control-Allow-Origin: http://xyz.example.com
needs to be present in the response headers.
Without control over what the remote site, there's not much you can do to enable CORS to that site (other than contacting the site administrator).
Other CORS headers and how the entire scheme works is described here (among other places).

Seems like a cross domain request issue. Would you consider just using a middle scrit as a proxy workaround?
Then make your javascript request to a php file that grabs the data for and feeds it back such as
<?php
$url = 'http://getmethedatafromyourapi';
header('Content-Type:text/json');
echo file_get_contents($url);