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

     
  • 相关阅读:
    微软开源全新的文档生成工具DocFX
    .NET平台微服务项目汇集
    谷歌发布的首款基于HTTP/2和protobuf的RPC框架:GRPC
    Microsoft开源跨平台的序列化库——Bond
    Oracle job procedure
    Windows10
    移动端Reactive Native轮播组件
    PHP完整环境搭建
    Webpack 入门
    git 提交
  • 原文地址:https://www.cnblogs.com/573583868wuy/p/6538220.html
Copyright © 2011-2022 走看看