简体   繁体   English

允许跨域ajax请求中的标头

[英]Allow headers in cross-domain ajax request

The first Ajax request receives a response, but not the second which includes a header. 第一个Ajax请求接收响应,但不包括第二个包含标头的响应。 How can I allow headers to be included in a cross-domain Ajax request. 如何允许标头包含在跨域Ajax请求中。

Note - I expect I need to make a server-side change, and https://stackoverflow.com/a/32140436/1032531 also says so, but doesn't say how to make those changes. 注意 - 我希望我需要进行服务器端更改,并且https://stackoverflow.com/a/32140436/1032531也这样说,但没有说明如何进行这些更改。 Also, I am not looking for a jQuery only solution. 此外,我不是在寻找仅限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 response to the second Ajax request: FF对第二个Ajax请求的响应:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://otherdomain.example.com/ajax.php . 跨源请求已阻止:同源策略不允许在http://otherdomain.example.com/ajax.php上读取远程资源。 (Reason: missing token 'x-test-header' in CORS header 'Access-Control-Allow-Headers' from CORS preflight channel). (原因:在CORS预检频道的CORS标题'Access-Control-Allow-Headers'中丢失了令牌'x-test-header')。

Chrome responds to the second as: Chrome响应第二个:

XMLHttpRequest cannot load http://otherdomain.example.com/ajax.php . XMLHttpRequest无法加载http://otherdomain.example.com/ajax.php Request header field X-Test-Header is not allowed by Access-Control-Allow-Headers in preflight response. 请求标头字段在预检响应中,Access-Control-Allow-Header不允许使用X-Test-Header。 Apache is set up as Apache被设置为

follows: 如下:

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"

It seems that each header must explicitly be listed and I added x-test-header to Access-Control-Allow-Headers . 似乎必须明确列出每个标头,并将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"

You can get rid of this error by using a .htaccess rule. 您可以使用.htaccess规则来消除此错误。 Just create a .htaccess file.on the home directory (or append these lines to it if you already have one) 只需在主目录中创建一个.htaccess文件(如果已经有一个,则将这些行附加到它上面)

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

This will globally allow cross orgin. 这将全局允许交叉orgin。 If you want for only one page you can use 如果您只想要一个页面,则可以使用

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

At the top of the page 在页面顶部

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM