'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.

javascript cors

Solution 1:^[1]

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

Solution 2:^[2]

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!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	foakesm
Solution 2	?ào Anh Thành

'XMLHttpRequest blocked by CORS Policy

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]