zoukankan      html  css  js  c++  java
  • ajax跨域(No 'Access-Control-Allow-Origin' header is present on the requested resource)

    问题

    在某域名下使用Ajax向另一个域名下的页面请求数据,会遇到跨域问题。另一个域名必须在response中添加 Access-Control-Allow-Origin 的header,才能让前者成功拿到数据。

    这句话对吗?如果对,那么流程是什么样的?

    跨域

    怎样才能算跨域?协议,域名,端口都必须相同,才算在同一个域。

    当跨域访问时,浏览器会发请求吗

    这是真正困扰我们的问题,因为我们不清楚浏览器会怎么做。它会不会检查到你要请求的地址不是同一个域的,直接就禁止了呢? 浏览器确实发出了请求

    我做了一个实验,

    前端(html)

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>ajax跨域</title>
    <script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
        $("button").click(function(){
            $.ajax({
                url:'http://span.home.com/test.php',
                type:'POST',
                data:'name=hello',
                dataType:'json',
                success:function(data){
                    alert(data.name);
                }
            });
        });
    });
    </script>
    </head>
    <body>
    
    <div id="div1"><h2>使用 jQuery AJAX 获取内容</h2></div>
    <button>test</button>
    
    </body>
    </html>
    View Code

    后台(php)

    <?php
    header('content-type:application:json;charset=utf8'); 
    
    $name = isset($_REQUEST['name']) ? $_REQUEST['name'] : 'will';
    $arr = array('id'=>1, 'name'=>$name);
    
    echo json_encode($arr);
    View Code

    控制台上会打出:

     XMLHttpRequest cannot load http://span.home.com/test.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://span.front.com' is therefore not allowed access. 

    Access-Control-Allow-Origin

    现在该 Access-Control-Allow-Origin 出场了。只有当目标页面的response中,包含了 Access-Control-Allow-Origin 这个header,并且它的值里有我们自己的域名时,浏览器才允许我们拿到它页面的数据进行下一步处理。如:

    Access-Control-Allow-Origin:http://span.front.com

    如果它的值设为 * ,则表示谁都可以用:

    Access-Control-Allow-Origin: *

    后台代码作了部分修改之后就可以正常拿到页面的数据:
    <?php
    header('content-type:application:json;charset=utf8'); 
    
    $origin = isset($_SERVER['HTTP_ORIGIN']) ? $_SERVER['HTTP_ORIGIN'] : '';
    $allow_domain = array('http://span.front.com');
    
    if (in_array($origin, $allow_domain))
    {
        //Access-Control-Allow-Origin:* 表示允许任何域名跨域访问 
        header('Access-Control-Allow-Origin:'.$origin);  
        header('Access-Control-Allow-Methods:GET,POST,OPTIONS');  
        header('Access-Control-Allow-Headers:x-requested-with,content-type');
    }
    $name = isset($_REQUEST['name']) ? $_REQUEST['name'] : 'will';
    $arr = array('id'=>1, 'name'=>$name);
    
    echo json_encode($arr);
    View Code

    注:前端域名 http://span.front.com, 后台域名 http://span.home.com

     
  • 相关阅读:
    使用mysqltools配置读写分离环境
    mysql group replication 主节点宕机恢复
    django ---- models继承
    django -- 对模式进行调式(pay with the api)
    django -- 多对多关系的实现
    django -- verbose_name的对数据库层面的影响
    django -- model中只有Field类型的数据才能成为数据库中的列
    django -- 为model 指定数据库名
    django -- 联合索引
    flask基础之jijia2模板使用基础(二)
  • 原文地址:https://www.cnblogs.com/573583868wuy/p/6538220.html
Copyright © 2011-2022 走看看