为什么我在这里看到“Access-Control-Allow-Origin 不允许来源”错误？

IT技术 javascript ajax cors xmlhttprequest youtube-api
2021-01-26 01:59:56

我看到以下错误：

Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin

使用此代码：

var http = new getXMLHttpRequestObject();
var url = "http://gdata.youtube.com/action/GetUploadToken";
var sendXML = '<?xml version="1.0"?><entry xmlns="http://www.w3.org/2005/Atom"'+
    'xmlns:media="http://search.yahoo.com/mrss/'+
    'xmlns:yt="http://gdata.youtube.com/schemas/2007">'+
    '<media:group><media:title type="plain">My First API</media:title>'+
    '<media:description type="plain">First API</media:description>'+
    '<media:category scheme="http://gdata.youtube.com/schemas/2007/categories.cat">People</media:category>'+
    '<media:keywords>first, api</media:keywords></media:group></entry>';
http.open("POST", url, true);
http.setRequestHeader("Authorization", "AuthSub token=" + AccessToken);
http.setRequestHeader("X-GData-Key", "key="+ dev_key);
http.setRequestHeader("Content-Type", "application/atom+xml; charset=UTF-8");

http.onreadystatechange = function() {
    if(http.readyState == 4) {
        alert(http.responseXML);
    }
}
http.send(sendXML);

什么可能导致这种情况，我该如何解决？

6个回答

在当前域之外发出 ajax 请求时，Javascript 会受到限制。

  • 示例 1：您的域是 example.com，并且您想向 test.com 发出请求 => 您不能。
  • 示例 2：您的域是 example.com，并且您想向 inner.example.com 发出请求 => 您不能。
  • 示例 3：您的域是 example.com:80 并且您想向 example.com:81 发出请求 => 您不能
  • EX 4：您的域是 example.com，并且您想向 example.com 发出请求 => 您可以。

出于安全原因，Javascript 受到“同源策略”的限制，因此恶意脚本无法联系远程服务器并发送敏感数据。

jsonp是一种使用 javascript 的不同方式。您发出请求并将结果封装到在客户端运行的回调函数中。这与将新的脚本标记链接到 html 的头部相同（您知道您可以从与此处不同的域加载脚本）。
但是，要使用 jsonp，必须正确配置服务器。如果不是这种情况，则不能使用 jsonp，并且必须依赖服务器端代理（PHP、ASP 等）。有很多与此主题相关的指南，只需 google 即可！

jsonp 不是只对GET请求有效吗？
2021-03-13 01:59:56
我从未使用过 AmplifyJS si 我不知道。如果它只是一个 Javascript 库（如 jQuery），我非常怀疑您是否可以避免使用 jsonp。如果它也有服务器部分，它仍然是可能的。我不能说更多了，抱歉。
2021-03-14 01:59:56
在我的情况下，我试图连接到 EF 连接字符串中的不同数据库，导致 CORS 错误（ASP.NET Web API）
2021-03-17 01:59:56
我可以使用 AmplifyJS 发送到不同的域吗？
2021-03-25 01:59:56
谢谢！我不知道这会发生在同一主机但在不同的端口中。
2021-04-02 01:59:56

localhost:8080由于“同源策略”，XMLHttpRequest 不会让您到达。

您可以通过在响应中添加标头来允许来自现代浏览器的请求localhost:8080：

Access-Control-Allow-Origin: *

您可以通过向 HTTP 服务器添加指令或通过服务器端代码（PHP、Ruby 等）添加标头来实现。

在https://developer.mozilla.org/en/http_access_control上阅读有关跨域 ajax 请求的更多信息

如果我理解正确，那么 API 或远程资源的服务器（在本例中为 YouTube 服务器）必须设置标头，即必须设置此标头的是 API 主机，而不是 API 调用方。
2021-03-19 01:59:56
有没有其他人觉得这很混乱？使用 Fiddler，我可以看到发出的请求和返回的有效结果......然后我得到一个异常。所以服务器似乎根本不在乎。然而服务器是需要配置的吗？
2021-03-20 01:59:56
这里服务器不在乎。浏览器试图通过只允许返回服务器允许列表中的请求来保护用户。
2021-03-20 01:59:56
@FedericoCapaldo 在这种情况下，您将创建自己的 API，充当代理，将请求转发到原始 API。
2021-03-27 01:59:56
我们需要在 httpd.conf 文件或 php.ini 文件中进行更改吗？
2021-04-05 01:59:56

如果您使用的是 Chrome，一个简单的解决方法（仅用于开发目的）是使用 option --disable-web-security。

同意@kynan 并更新我的答案。
2021-03-15 01:59:56
希望我今天早点知道这一点。对于生产部署，我们使用 Nginx，因此最容易使用它来处理 CORS 标头，或者它们可能位于同一个域：无论如何。它仅适用于我想绕过它的本地开发人员。
2021-04-01 01:59:56
你如何启用它？（如何倒退？）
2021-04-05 01:59:56
你肯定只希望为发展宗旨做，从来没有在网上冲浪
2021-04-06 01:59:56

在您的解决方案中添加 global.asax。

添加

HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");

在

protected void Application_BeginRequest(object sender, EventArgs e)
{
}
添加“Application_BeginRequest”将允许交叉调用 API 的所有方法。如果我想为单个 Web 方法执行此操作怎么办？
2021-03-16 01:59:56
为什么人们对这个投反对票？这是在 ASP.net 中实现此目的的一种方法
2021-03-31 01:59:56
我试过这个，但没有奏效。仍然收到错误。使用MVC5
2021-04-08 01:59:56

如果您使用 apache，这是有效的：将其放入/在您的公共根目录中创建一个 .htaccess 文件，并添加您可能需要的任何其他文件扩展名。 

<FilesMatch "\.(ttf|otf|eot|woff|jpg|png|jpeg|gif|js|json|html|css)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>
其它你可能感兴趣的问题
上一篇Google Maps v3 - 限制可视区域和缩放级别 下一篇Javascript中跨多个文件的全局变量