AJAX 跨域问题

haoyq · · 38 次点击 · · 开始浏览    
这是一个创建于 的文章,其中的信息可能已经有所发展或是发生改变。

导语

AJAX 的跨域问题,常用的解决方法有两种,简单记录下,详细内容查看参考资料。以下示例自建两个域名测试,www.test.comwww.example.com

同源策略

同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。

两个页面,如果域名协议端口都相同,即是同源,其间的交互不存在问题。同源策略是很重要的安全机制,但是有些时候需要突破这种机制,这就需要跨域

JSONP

JSONP 是很常用的方法,它是利用 <script> 标签没有跨域限制的原理实现。以下是在 www.test.com 中使用 JQuery 示例

$.ajax( {    
    url:'//www.example.com',
    data:{name:'tom'},    
    type:'get',    
    dataType:'jsonp',
    jsonp: "callback",    
    success:function(data) {    
          console.log(data)  
     }
})

以下是 www.example.com 的 PHP 处理

<?php
$callback = $_GET['callback'];
$name = $_GET['name'];

// 处理数据
$data = md5($name);

echo $callback . '(' . json_encode($data) . ')';

CORS

CORS (Cross-origin resource sharing),跨域资源共享标准允许 Web 应用服务器进行跨域访问控制。相对于 JSONP 只支持 GET ,CORS 支持更多的 HTTP 请求,同时更简单、安全。不过 CORS 可能会存在兼容问题。
以下是在 www.test.com 中发送 AJAX 请求

$.ajax( {    
    url:'//www.example.com',
    data:{name:'tom'},    
    type:'post',    
    dataType:'json',  
    success:function(data) {    
          console.log(data)  
     }
}); 

www.example.com 的 PHP 处理

<?php
header("Access-Control-Allow-Origin: http://www.test.com");

$name = $_POST['name'];

// 处理数据
$data = md5($name);

echo json_encode($data);

参考资料:同源策略CORS浏览器同源政策及其规避方法跨域资源共享 CORS 详解

本文来自:Segmentfault

感谢作者:haoyq

查看原文:AJAX 跨域问题

38 次点击  
加入收藏 微博
暂无回复
添加一条新回复 (您需要 登录 后才能回复 没有账号 ?)
  • 请尽量让自己的回复能够对别人有帮助
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
  • 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet