跨域请求相关知识
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了跨域请求相关知识相关的知识，希望对你有一定的参考价值。
一、跨域请求概念
请求在域名、端口或协议不同的服务器上的数据过程
二、原生js跨域请求
先获取接口URL并设置相应的参数，如回调函数，然后把URL添加到createElement（“script”）生成的script标签的src属性上，append到主页面中，然后编写回调函数来解析接口获得的数据
客户端
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jsonp</title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 function cb(data){ 10 console.log(data); 11 } 12 </script> 13 <!--script中的src调用了cb并返回数据 --> 14 <script type="text/javascript" src="jsonp.php?_jsonp=cb"></script> 15 </body> 16 </html>
服务器端(自写的接口)
1 /*name：jsonp.php*/ 2 <?php 3 $callback = $_GET[‘_jsonp‘]; 4 5 $arr = array("zhangsan","lisi","zhaoliu"); 6 7 8 echo $callback."(".json_encode($arr).")"; 9 10 ?>
其中cb是回调函数
三、jsonp方式跨域
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jquery跨域jsonp</title> 6 </head> 7 <body> 8 <input type="button" id="btn" value="点击"> 9 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> 10 <script type="text/javascript"> 11 $(function(){ 12 13 $.ajax({ 14 type : "get", 15 async: false, 16 url : "./jsonp.php", 17 dataType : "jsonp", 18 jsonp: "cb",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback) 19 jsonpCallback:"fn",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名(类似：jQuery1102016820125747472048_1450147653563(["zhangsan", "lisi", "wangwu"]);) 20 success : function(data){ 21 console.log(data); 22 }, 23 error:function(){ 24 console.log(‘fail‘); 25 } 26 }); 27 28 }); 29 30 </script> 31 </body> 32 </html>
接口
1 <?php 2 $fn = $_GET[‘cb‘];//获取参数：回调函数的名字 3 $arr = array(‘zhangsan‘,‘lisi‘,‘wangwu‘); 4 echo $fn.‘(‘.json_encode($arr).‘);‘;//callback([‘zhangsan‘,‘lisi‘,‘wangwu‘]); 5 ?>
以上是关于跨域请求相关知识的主要内容，如果未能解决你的问题，请参考以下文章
Express实战 - 应用案例- realworld-API - 路由设计 - mongoose - 数据验证 - 密码加密 - 登录接口 - 身份认证 - token - 增删改查API(代码片段