zoukankan      html  css  js  c++  java

  • 跨域请求的3种方式

      视频教程

    跨域请求的方式：3种
1.后台代理
2.jsonp
3.HTML5中的XHR2
需要前端会的方法是后两种。
2.jsonp使用方法:只支持get方式
$.ajax({dataType:"jsonp",jsonp:"callback",success:...,error:...});//前台，修改数据类型，定义jsonp属性和参数名，等待后台调用
var request=$_GET("callback");//后台，接收前台定义好的参数名
var data=$jsonp.'({"name:"jack",age:15})';//后台，使用jsonp处理数据，并返回前台
3.XHR使用方法：任何方式都支持，兼容到IE10以上浏览器
前台：不需要任何改动，正常使用ajax请求
后台：文件头部做小小修改
header("Access-Control-Allow-Origin:*");//所有域名都可以访问它
header("Access-Control-Allow-Methods:POST,GET");


    推荐3

    比较常用的是JSONP方法，JSONP方法是一种非官方方法，而且这种方法只支持GET方式，不如POST方式安全。

     

    即使使用jquery的jsonp方法，type设为POST，也会自动变为GET。

     

    官方问题说明：

    “script”: Evaluates the response as JavaScript and returns it as plain text. Disables caching by appending a query string parameter, “_=[TIMESTAMP]“, to the URL unless the cache option is set to true.Note: This will turn POSTs into GETs for remote-domain requests.

     

    如果跨域使用POST方式，可以使用创建一个隐藏的iframe来实现，与ajax上传图片原理一样，但这样会比较麻烦。

     

    因此，通过设置Access-Control-Allow-Origin来实现跨域访问比较简单。

     

    例如：客户端的域名是www.client.com,而请求的域名是www.server.com

    如果直接使用ajax访问，会有以下错误

    XMLHttpRequest cannot load http://www.server.com/server.php. No 'Access-Control-Allow-Origin' header is present on the requested resource.Origin 'http://www.client.com' is therefore not allowed access.

     

    在被请求的Response header中加入

     

    [php] view plain copy
     
    1. // 指定允许其他域名访问  
    2. header('Access-Control-Allow-Origin:*');  
    3. // 响应类型  
    4. header('Access-Control-Allow-Methods:POST');  
    5. // 响应头设置  
    6. header('Access-Control-Allow-Headers:x-requested-with,content-type');  

     

    就可以实现ajax POST跨域访问了。

     

    代码如下：

    client.html 路径：http://www.client.com/client.html

     

    [html] view plain copy
     
    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
    2. <html>  
    3.  <head>  
    4.   <meta http-equiv="content-type" content="text/html;charset=utf-8">  
    5.   <title> 跨域测试 </title>  
    6.   <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>  
    7.  </head>  
    8.   
    9.  <body>  
    10.     <div id="show"></div>  
    11.     <script type="text/javascript">  
    12.     $.post("http://www.server.com/server.php",{name:"fdipzone",gender:"male"})  
    13.       .done(function(data){  
    14.         document.getElementById("show").innerHTML = data.name + ' ' + data.gender;  
    15.       });  
    16.     </script>  
    17.  </body>  
    18. </html>  


    server.php 路径：http://www.server.com/server.php

     

     

    [php] view plain copy
     
    1. <?php  
    2. $ret = array(  
    3.     'name' => isset($_POST['name'])? $_POST['name'] : '',  
    4.     'gender' => isset($_POST['gender'])? $_POST['gender'] : ''  
    5. );  
    6.   
    7. header('content-type:application:json;charset=utf8');  
    8. header('Access-Control-Allow-Origin:*');  
    9. header('Access-Control-Allow-Methods:POST');  
    10. header('Access-Control-Allow-Headers:x-requested-with,content-type');  
    11.   
    12. echo json_encode($ret);  
    13. ?>  


    Access-Control-Allow-Origin:* 表示允许任何域名跨域访问

     

    如果需要指定某域名才允许跨域访问，只需把Access-Control-Allow-Origin:*改为Access-Control-Allow-Origin:允许的域名

    例如：header('Access-Control-Allow-Origin:http://www.client.com');

     

    如果需要设置多个域名允许访问，这里需要用php处理一下

    例如允许 www.client.com 与 www.client2.com 可以跨域访问

    server.php 修改为

     

    [php] view plain copy
     
    1. <?php  
    2. $ret = array(  
    3.     'name' => isset($_POST['name'])? $_POST['name'] : '',  
    4.     'gender' => isset($_POST['gender'])? $_POST['gender'] : ''  
    5. );  
    6.   
    7. header('content-type:application:json;charset=utf8');  
    8.   
    9. $origin = isset($_SERVER['HTTP_ORIGIN'])? $_SERVER['HTTP_ORIGIN'] : '';  
    10.   
    11. $allow_origin = array(  
    12.     'http://www.client.com',  
    13.     'http://www.client2.com'  
    14. );  
    15.   
    16. if(in_array($origin, $allow_origin)){  
    17.     header('Access-Control-Allow-Origin:'.$origin);  
    18.     header('Access-Control-Allow-Methods:POST');  
    19.     header('Access-Control-Allow-Headers:x-requested-with,content-type');  
    20. }  
    21.   
    22. echo json_encode($ret);  
    23. ?>  
  • 相关阅读:
    对vector等STL标准容器的排序操作
    Security log is full,only administrator can log on to fix the problem(安全日志满了)
    Linux vi 中搜索关键字
    Linux tar 解压缩命令
    max_size, capacity and size 的区别
    四个基数任意次数组合相加得到一个数N，求所有可能组合
    robot framework 笔记（三），RF安装
    电脑重装后 python 2 3快速安装
    python练习题（四）
    apscheduler 执行报错No handlers could be found for logger "apscheduler.executors.default
  • 原文地址：https://www.cnblogs.com/Lzf127/p/8296087.html
Copyright © 2011-2022 走看看