允许跨域 ajax 请求中的标头

Posted

技术标签:

【中文标题】允许跨域 ajax 请求中的标头【英文标题】:Allow headers in cross-domain ajax request 【发布时间】:2017-02-02 06:08:10 【问题描述】:

第一个 Ajax 请求收到响应,但第二个没有包含标头的响应。如何允许标头包含在跨域 Ajax 请求中。

注意 - 我希望我需要进行服务器端更改,https://***.com/a/32140436/1032531 也这么说,但没有说明如何进行这些更改。另外,我不是在寻找仅 jQuery 的解决方案。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Testing</title>  
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
        <script type="text/javascript"> 
            $(function()
                $.ajax(
                    type:'POST',
                    url:'http://otherdomain.example.com/ajax.php',
                )
                $.ajax(
                    type:'POST',
                    url:'http://otherdomain.example.com/ajax.php',
                    headers: "X-Test-Header": "test-value",
                )
            );
        </script>
    </head>

    <body></body> 
</html> 

FF 响应第二个 Ajax 请求:

跨域请求被阻止:同源策略不允许读取 http://otherdomain.example.com/ajax.php 的远程资源。 (原因:CORS 标头中缺少标记“x-test-header” 来自 CORS 预检通道的“Access-Control-Allow-Headers”)。

Chrome 将第二个响应为:

XMLHttpRequest 无法加载 http://otherdomain.example.com/ajax.php。 请求头字段 X-Test-Header 不允许 预检响应中的访问控制允许标头。 Apache 已设置 作为

关注:

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
Header set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept, Authorization, Client-Security-Token, Accept-Encoding"

【问题讨论】:

【参考方案1】:

您可以通过使用 .htaccess 规则来消除此错误。只需在主目录上创建一个.htaccess file.on(或者如果您已经有这些行,则将这些行附加到其中)

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

这将全局允许跨域。如果你只想要一页,你可以使用

<?php header("Access-Control-Allow-Origin: *"); ?>

在页面顶部

【讨论】:

谢谢,但正如我原来的帖子所见,我已经这样做了。这是没有通过的标题。【参考方案2】:

似乎每个标题都必须明确列出,我将x-test-header添加到Access-Control-Allow-Headers

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
Header set Access-Control-Allow-Headers "x-test-header, Origin, X-Requested-With, Content-Type, Accept"

【讨论】:

以上是关于允许跨域 ajax 请求中的标头的主要内容,如果未能解决你的问题,请参考以下文章

ajax跨域请求

AngularJS:允许跨域 AJAX 请求

带有 jquery.ajax() 的跨域“授权”标头

Ajax跨域问题的两种解决方法

Ajax跨域请求设置标头失败

jQuery ajax 请求因为跨域而被阻止