Ajax跨域请求设置标头失败

Posted 2023-03-04

【中文标题】Ajax跨域请求设置标头失败

【英文标题】：Ajax cross domain request fail to set headers

【发布时间】：2014-11-22 00:12:56

【问题描述】：

首先，这是我的第一个跨域 ajax 请求的项目。 现在，我有一个只有一个按钮、一个输入框和 jquery 的测试页面。 我想要做的是将ajax请求发送到另一个domani（我有用户名和密码，但我不知道我必须使用它以及如何使用它）并传递一个查询，然后打印结果。

这是我的脚本：

jQuery(document).ready(function ($)
    $("#btn").on("click", function()

    var searchRequest = $("#testSearch").val();

    var url = "https://vk.com/search?c%5Bq%5D=";

    var musicSearchRequest = searchRequest + "&c%5Bsection%5D=audio";
    var vkLogin = new XMLHttpRequest();

    vkLogin.open("GET", url + musicSearchRequest, true);
    vkLogin.send();

    $.ajax(        
        url: url,
        type: "POST",
        crossDomain: true,
        dataType: 'jsonp',
        data: musicSearchRequest,
        success: function()console.log("ok");,
        error: function ()console.log("no");
    ); 

    $("#result").html(vkLogin.responseText);
    console.log(vkLogin.responseText);

);
);

这是html（我认为这并不重要，但我还是会复制）：

<button id="btn">click</button>
<input type="text" id="testSearch"></input>
<div id="result"></div>

现在，点击后，这是打印到我的调试控制台的结果：

XMLHttpRequest 无法加载 https://vk.com/search?c%5Bq%5D=katy%20perry&c%5Bsection%5D=audio。不 'Access-Control-Allow-Origin' 标头出现在请求的 资源。因此不允许访问 Origin 'null'。

我搜索了一些关于 CORS 的信息，但由于我是初学者，我希望有人逐步解释下一步要如何解决此错误。

谢谢！

【参考方案1】：

您误解了 CORS 的工作原理。这是一个很好的解释：https://vk.com/search?c%5Bq%5D=

错误信息：

No 'Access-Control-Allow-Origin' header is present on the requested resource

正在谈论从 vk.com 收到的标头。除非您控制 vk.com 上的服务器（听起来您没有），否则您无法修改 vk.com 服务器返回给您的应用程序的标头。所以这对你不起作用。