跨域

最新推荐文章于 2024-06-14 11:20:36 发布

diaodao1498

最新推荐文章于 2024-06-14 11:20:36 发布

阅读量78

点赞数

文章标签： json javascript php ViewUI

原文链接：http://www.cnblogs.com/jc1997/p/11224026.html

版权

什么是跨域

这里简单拿百度的网址做个例子：http://www.baidu.com:80 (默认都是80端口、可省略)
http 协议
www 子域名
baidu 主域名
80 端口号
总结：协议、子域名、主域名、端口，其中一个不一致的都称为跨域

jsonp 跨域

在网页中，我们会使用一些cdn图片、cdn资源，他们和我们的页面都不在一个域内，但是他们却可以使用，聪明的程序员使用src 可引入外部资源，实现了跨域的需求。
在页面中定义js函数，通过script 标签的src引入要请求的接口(这就是jsonp的原理)，接口中调用js函数，传入json 数据。我这里写了一个简单的例子

<!DOCTYPE html>
<html>
<head> <title>jsonp 跨域</title> </head> <body> <div id="ajax-wrap">通过ajax请求来改变这里的内容</div> <script type="text/javascript"> // 定义jsonp 函数 function jsonp(json){ setTimeout(function(){ var box = document.getElementById('ajax-wrap'); box.innerHTML = json.code; },3000); } // 添加script 标签 function appendScript(url){ var script = document.createElement('script'); script.setAttribute('src',url); document.body.appendChild(s cript); } appendScript('http://test2.com'); </script> </body> </html>

// 服务器端代码
<?php
    echo 'jsonp({
        "code": "CA1998",
        "price": 1780, "tickets": 5 })'; ?>

jQuery jsonp 跨域

<!DOCTYPE html>
<html>
<head> <title>test</title> </head> <body> <div id="ajax-wrap">通过ajax请求来改变这里的内容</div> <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> // 定义jsonp 函数 function jsonpp(json){ var box = document.getElementById('ajax-wrap'); box.innerHTML = json.code; } jQuery(document).ready(function(){ $.ajax({ type: "get", url: "http://test2.com", dataType: "jsonp", jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback) // jsonpCallback:"jsonpp",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据,如果这里有写的话，success 可以不用处理 success: function(json){ // console.log(json); jsonpp(json); }, error: function(xhr){ console.log(xhr); } }); }); </script> </body> </html>

有些时候，我们在拿到一些公共接口，使用jsonp方式调用接口时、无法使用，应该是接口没有做jsonp的处理

3，CORS 跨域
CORS 是一个W3C标准，全称跨域资源共享(Cross-origin resource sharing)。最初，是在1995年、由网景公司首先加入浏览器的，主要用于互联网跨域访问的安全。跨域资源共享需要浏览器和服务器同时支持，貌似跟ajax没有什么关系。
当我们的ajax请求是跨域请求时，会在请求头信息中，添加一个origin 字段，告诉服务器这个请求来自哪个源。服务器接收到这个字段后，决定是否同意这次请求

// 指定允许其他域名访问  (这个最重要，参数为* 表示任何域名都可以访问，一版设置为请求头信息中的 origin字段)
header('Access-Control-Allow-Origin: http://test.com'); // 响应类型 () header('Access-Control-Allow-Methods:POST'); // 响应头设置 header('Access-Control-Allow-Headers:x-requested-with,content-type');

这里我只写一个简单的例子

<!DOCTYPE html>
<html>
<head> <title>test</title> </head> <body> <div id="ajax-wrap">通过ajax请求来改变这里的内容</div> <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function(){ $.ajax({ type: "get", url: "http://test2.com?name=xiami", dataType: "json", success: function(json){ console.log(json); }, error: function(xhr){ console.log(xhr); } }); }); </script> </body> </html>

// php 代码
<?php 
// 指定允许其他域名访问  
header('Access-Control-Allow-Origin: http://test.com'); // 响应类型 header('Access-Control-Allow-Methods:POST'); // 响应头设置 header('Access-Control-Allow-Headers:x-requested-with,content-type'); echo '{ "code": "CA1998", "price": ' .$name.', "tickets": 5 }';

转载于:https://www.cnblogs.com/jc1997/p/11224026.html

diaodao1498

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
跨域

什么是跨域这里简单拿百度的网址做个例子：http://www.baidu.com:80 (默认都是80端口、可省略)http 协议www 子域名baidu 主域名80 端口号总结：协议、子域名、主域名、端口，其中一个不一致的都称为跨域jsonp 跨域在网页中，我们会使用一些cdn图片、cdn资源，他们和我们的页面都不在一个域内，但是他们却可以使用，聪明的程序员使用src 可...
复制链接

扫一扫