Javascript 为什么我看到一个;访问控制不允许原点“允许原点”;这里有错误吗?

Javascript 为什么我看到一个;访问控制不允许原点“允许原点”;这里有错误吗?,javascript,ajax,cors,xmlhttprequest,youtube-api,Javascript,Ajax,Cors,Xmlhttprequest,Youtube Api,我看到以下错误: 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 xmln

我看到以下错误:

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);
var http=new getXMLHttpRequestObject();
变量url=”http://gdata.youtube.com/action/GetUploadToken";

var sendXML='Javascript在当前域之外发出ajax请求时受到限制

  • 例1:您的域是example.com,您想请求test.com=>您不能
  • 例2:您的域是example.com,您想向internal.example.com=>发出请求,但您不能
  • 例3:您的域是example.com:80,您想向example.com:81=>发出请求,但您不能
  • 例4:您的域是example.com,您希望向example.com=>发出请求,您可以
出于安全原因,Javascript受到“同源策略”的限制,因此恶意脚本无法联系远程服务器并发送敏感数据

是另一种使用javascript的方式。您发出请求,结果被封装到在客户端运行的回调函数中。这与将新的脚本标记链接到html的头部部分相同(您知道,您可以从不同的域加载脚本,而不是在这里加载脚本)。

但是,要使用jsonp,必须正确配置服务器。如果不是这样,您就不能使用jsonp,必须依赖服务器端代理(PHP、ASP等)。有很多与这个主题相关的指南,只要谷歌一下就可以了

由于“同源策略”,XMLHttpRequest将不允许您访问
localhost:8080

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

Access-Control-Allow-Origin: *
可以通过向HTTP服务器添加指令或通过服务器端代码(PHP、Ruby等)添加头来实现


阅读关于跨源ajax请求的更多信息如果您使用的是Chrome,一个简单的解决方法(仅用于开发目的)是使用选项
——禁用web安全性

,与此特定问题无关,但是对于使用jQuery的任何人来说,如果您尝试使用jQuery发出JSONP请求并忽略神奇的回调参数:
callback=?
在解决方案中添加global.asax,也会导致此错误


如果您来自java背景,一个可能的解决方案是创建一个servlet,为您的javascript调用Web服务。在GET(您的选择)方法中类似下面的代码

JsonElement jelement;
    JsonArray jarray;
    try {
        URL url = new URL("http://rest."YOUR URL"#ba0482");
        URLConnection connection = url.openConnection();
        connection.setDoInput(true);
        InputStream inStream = connection.getInputStream();
        BufferedReader input = new BufferedReader(new InputStreamReader(inStream));

        jelement = new JsonParser().parse(input);

        jarray = jelement.getAsJsonArray();

        response.setContentType("application/json");
        PrintWriter out = response.getWriter();
        out.print(jarray);
        out.flush();
    } catch (FileNotFoundException e) {
        e.printStackTrace();
    } catch (IOException e) {
        e.printStackTrace();
    }
}

现在在javascript中,只需将url指定为servlet名称

对于本地开发,您可以使用工具修改HTTP响应头。例如,您可以通过附带的重写工具执行此操作:

只需使用以下内容为目标域/位置添加新规则:

Type: Add Header
Where: Response
Replace
     Name: Access-Control-Allow-Origin
     Value: *
Replace All

如果您使用的是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 chrome作为浏览器,您可以添加CORS扩展并激活它,它将解决漏洞问题,而无需更改代码中的任何内容

使用ajax访问php页面时,我遇到了相同的错误消息(javascript和php文件都位于同一服务器上)

原因是我在JavaScript中将IP地址指定为域。这使浏览器相信对php文件的调用是在另一台服务器上进行的

因此,一个简单的解决方案可以消除此错误消息。 a) 验证javascript和php文件是否在同一服务器上
b) 确保JavaScript(例如)ajax中的url(特别是域)反映服务器url(例如)。

在这里,我们需要为Apache Http做两件事

1) 在httpd.config文件中,取消对该文件的注释

LoadModule headers_module modules/mod_headers.so
2) 在底部添加这一行

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


您确定您使用的youtube入口点已启用jsonp吗?除非您使用服务器端代理或jsonp endpont,否则您无法对外部域进行ajax调用。如果我理解正确,那么API或远程资源的服务器(在本例中为YouTube服务器)必须设置标头,即必须设置标头的是API宿主,而不是API调用方。是否有人对此感到困惑?使用Fiddler,我可以看到正在发出请求并返回有效结果。。。然后我得到一个例外。所以服务器似乎一点也不关心。但是服务器是需要配置的吗?这里服务器不关心。正是浏览器试图通过仅允许返回服务器允许列表中的请求来保护用户。我们需要在httpd.conf文件或php.ini文件中进行更改吗?@FedericoCapaldo在这种情况下,您可以创建自己的API,充当代理,将请求转发到原始API。您当然只想出于开发目的而这样做,而不是在浏览graid@kynan并更新我的答案时。希望我今天早些时候就知道这一点。对于生产部署,我们使用Nginx,因此最容易处理CORS头,或者它们可能位于同一个域:端口。我想绕过它的只是本地开发人员。如何重新启用它?(如何倒退?)magic参数也可以有其他名称。文档:谢谢!我不知道这会发生在同一个主机上,但在不同的端口。我可以使用AmplificJS发送到不同的域吗?我从来没有使用过AmplificJS si,我不知道。如果它只是一个Javascript库(如jQuery),我非常怀疑您能否避免jsonp。如果它也有一个服务器部件,它仍然是可能的。很抱歉,我不能再说了。jsonp不是只适用于
GET
请求吗?在我的例子中,我试图用EF连接字符串连接到另一个数据库,结果导致CORS错误(ASP.NET Web API),为什么人们对此投反对票?这是在ASP.NET中实现此目的的一种方法。我尝试了此方法,但没有成功。还是会出错。使用MVC5在“应用程序”中添加
LoadModule headers_module modules/mod_headers.so
Header set Access-Control-Allow-Origin "*"