zoukankan      html  css  js  c++  java
  • ajax跨域问题

    两个不同域名的程序在处理ajax的时候肯定会有跨域的存在,一种方式是通过jsonp,一种是通过请求本域名,然后后端PHP转发curl,还有一种比较简单 通过header头来实现,例如

    现在有两个域名 www.host1.com 和 www.host2.com 在host1.com下面请求host2.com下面的Php文件。

    例如 http://www.host1.com/index.html中这样写

    <!DOCTYPE HTML>
    <html lang="en-US"><head>
        <meta charset="UTF-8">
        <title></title>
        <script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            $(function(){
                $.post("http://www.host2.com/test.php",{"name":"lizhaoyao","sex":"man"},function(res){
                    console.log(res);
                },"json");
            });
        </script>
    </body>
    </html>

    一个很简单的ajax请求,传送 name 和sex 给 http://www.host2.com/test.php 该文件这样写

    <?php
    
    $ret = array(  
        'name' => isset($_POST['name'])? $_POST['name'] : '',  
        'sex' => isset($_POST['sex'])? $_POST['sex'] : ''  
    );  
    echo json_encode($ret); 
    ?> 

    然后通常情况下会出现一个跨域提醒 

    XMLHttpRequest cannot load http://www.host2.com/test.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access. The response had HTTP status code 404.

    然后我们可以加一段代码

    $origin = isset($_SERVER['HTTP_ORIGIN'])? $_SERVER['HTTP_ORIGIN'] : '';
    header('content-type:application:json;charset=utf8');
    header('Access-Control-Allow-Origin:'.$origin);
    header('Access-Control-Allow-Methods:POST');
    header('Access-Control-Allow-Headers:x-requested-with,content-type');

    如图:

    <?php
    
    $ret = array(  
        'name' => isset($_POST['name'])? $_POST['name'] : '',  
        'sex' => isset($_POST['sex'])? $_POST['sex'] : ''  
    );  
    $origin = isset($_SERVER['HTTP_ORIGIN'])? $_SERVER['HTTP_ORIGIN'] : '';  
    header('content-type:application:json;charset=utf8');  
    header('Access-Control-Allow-Origin:'.$origin);  
    header('Access-Control-Allow-Methods:POST');  
    header('Access-Control-Allow-Headers:x-requested-with,content-type');    
    echo json_encode($ret);  
    exit();

    再看效果

    xhr请求成功!

  • 相关阅读:
    【待补充】Spark 集群模式 && Spark Job 部署模式
    Spark 集群管理命令
    Spark job 部署模式
    [Spark Core] Spark 核心组件
    [Spark RDD_1] RDD 基本概念
    【读书笔记】《天才在左 疯子在右》
    [Spark Core] Spark 使用第三方 Jar 包的方式
    [Spark Core] 在 Spark 集群上运行程序
    【待补充】[Spark Core] Spark 实现标签生成
    Spark 集群搭建
  • 原文地址:https://www.cnblogs.com/lizhaoyao/p/5888968.html
Copyright © 2011-2022 走看看