XMLHttpRequest被CORS策略阻止

Question

我在一个名为http://www.test.com的地方添加了以下脚本的API：

<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);

})

当我加载页面时，会出现以下错误：

XMLHttpRequest无法加载apiendpoint URL。从“apiendpoint URL”重定向到“apiendpoint URL”的跨域资源共享（CORS）策略已被阻止：在所请求的资源中不存在“Access-Control-Allow-Origin”标头。因此，源“test URL”不允许访问。

在apiendpoint.com路径中，我添加了以下代码到.htaccess文件中：

Header set Access-Control-Allow-Origin "*"

但是它不起作用。

- Prolativ

---

请使用浏览器工具的网络选项卡来验证标头是否存在。 - Ferrybig

请清除您的浏览器缓存。 - Ataur Rahman Munna

从Chrome商店下载CORS插件，并在打开插件后尝试发送请求。 - codeslayer1

@Ferrybig 响应头不包含 "Access-Control-Allow-Origin:"。但是当我直接加载该URL时，它包含了 "Access-Control-Allow-Origin:"。 - Prolativ

我相信sideshowbarker在这里的回答将会提供你需要修复此问题的所有信息。 - foakesm

Answer 1

我相信 sideshowbarker在这里的答案 包含了你需要解决问题的所有信息。如果你遇到的问题只是得到了“Access-Control-Allow-Origin”头部在响应中不存在，那么你可以设置一个CORS代理来解决它。更多详细信息请参考链接的答案。

- foakesm

Answer 2

我知道这可能有些晚了，但希望这可以帮助其他人。这个问题来自后端，涉及到CORS（跨源资源共享）。我在后端使用Java，所以我将@CrossOrigin添加到Controller类中。它有效果了！

- Đào Anh Thành