详解js跨域请求的两种方式,支持post请求


Posted in Javascript onMay 05, 2018

JSONP实现跨域

常用的jquery实现跨域调用

$.ajax({
  url: "http://127.0.0.1/~chenjiebin/mycode/php/crossdomain/index.php",
  dataType: "jsonp",
  jsonp: "callback",
  context: document.body,
  success: function(data) {
    console.log(data);
  }
});

这个调用实际上的实现原理是
在网页中构造一个script标签,将src设置为对应的url,并增加上相应的callback参数,形如如下格式:

<script src="http://127.0.0.1/~chenjiebin/mycode/php/crossdomain/index.php?callback=jQuery211018970995225637144_1465350372062&_=1465350372063"></script>

请求的服务端代码如下:

$data   = json_encode(array("id" => "1", "name" => "tom"));
$callback = $_GET["callback"];
echo $callback . "(" . $data . ")";

实际上最后返回的内容就是一段js代码:

jQuery211018970995225637144_1465350372062({"id":"1","name":"tom"})

当浏览器获取到该段js代码后就会执行这个函数,从而实现回调ajax请求时设置的success方法。

jsonp实现的缺点

了解了原理后,就知道jsonp实现的跨域方式不支持post请求,只能支持get请求。但是如果需要支持post请求该怎么办呢?下面谈下服务器端设置的方式。

服务端设置支持跨域

主要是Access-Control-Allow-Origin头参数,该参数用来指定允许哪个来源的域请求。服务端代码如下:

// 表示支持所有来源的域进行请求
// 实际在操作过程中可以设置为指定域
header('Access-Control-Allow-Origin:*');
$data = json_encode(array("id" => "1", "name" => "tom"));
echo $data;

对应的js代码:

$.ajax({
  type: "POST",
  url: "http://127.0.0.1/~chenjiebin/mycode/php/crossdomain/header.php",
  dataType: "json",
  success: function(data) {
    console.log(data);
  }
});

可以支持post请求。

小结

实际上个人并不是特别喜欢用跨域请求的方式,可能会带来一些不可预见的安全问题。比较习惯的方式通过本域下的服务端和跨域的源服务器进行交互。

Javascript 相关文章推荐
jQuery之$(document).ready()使用介绍
Apr 05 Javascript
jQuery如何取id有.的值一般的方法是取不到的
Apr 18 Javascript
使用GruntJS构建Web程序之安装篇
Jun 04 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
Feb 27 Javascript
javascript实现标签切换代码示例
May 22 Javascript
JS实现可编辑的后台管理菜单功能【附demo源码下载】
Sep 13 Javascript
求js数组的最大值和最小值的四种方法
Mar 03 Javascript
vue初尝试--项目结构(推荐)
Jan 30 Javascript
vue中锚点的三种方法
Jul 06 Javascript
ajaxfileupload.js实现上传文件功能
Apr 19 Javascript
layer弹出层自定义提交取消按钮的例子
Sep 10 Javascript
一篇文章带你浅入webpack的DLL优化打包
Feb 20 Javascript
vue 注册组件的使用详解
May 05 #Javascript
Vue三层嵌套路由的示例代码
May 05 #Javascript
动态加载JavaScript文件的3种方式
May 05 #Javascript
Node.js的Koa实现JWT用户认证方法
May 05 #Javascript
浅谈vue项目可以从哪些方面进行优化
May 05 #Javascript
Angular模版驱动表单的使用总结
May 05 #Javascript
浅谈Angular HttpClient简单入门
May 04 #Javascript
You might like
php 按指定元素值去除数组元素的实现方法
2011/11/04 PHP
ueditor 1.2.6 使用方法说明
2013/07/24 PHP
PHP实现获取客户端IP并获取IP信息
2015/03/17 PHP
php中简单的对称加密算法实现
2017/01/05 PHP
php readfile下载大文件失败的解决方法
2017/05/22 PHP
JS学习之一个简易的日历控件
2010/03/24 Javascript
关于JavaScript中的关联数组分析
2013/04/09 Javascript
jquery xMarquee实现文字水平无缝滚动效果
2014/04/29 Javascript
JavaScript实现按Ctrl键打开新页面
2014/09/04 Javascript
一不小心就做错的JS闭包面试题
2015/11/25 Javascript
jquery 多个radio的click事件实例
2016/12/03 Javascript
vue利用axios来完成数据的交互
2018/03/23 Javascript
vuejs 制作背景淡入淡出切换动画的实例
2018/09/01 Javascript
vue使用rem实现 移动端屏幕适配
2018/09/26 Javascript
使用mixins实现elementUI表单全局验证的解决方法
2019/04/02 Javascript
bluepy 一款python封装的BLE利器简单介绍
2019/06/25 Python
python爬虫selenium和phantomJs使用方法解析
2019/08/08 Python
详解PyTorch手写数字识别(MNIST数据集)
2019/08/16 Python
python二进制读写及特殊码同步实现详解
2019/10/11 Python
Matplotlib绘制雷达图和三维图的示例代码
2020/01/07 Python
如何基于pythonnet调用halcon脚本
2020/01/20 Python
Python如何发送与接收大型数组
2020/08/07 Python
python UIAutomator2使用超详细教程
2021/02/19 Python
澳大利亚个性化儿童礼品网站:Bright Star Kids
2019/06/14 全球购物
奥地利领先的在线药房:SHOP APOTHEKE
2019/10/07 全球购物
俄罗斯三星品牌商店:GalaxyStore
2020/11/04 全球购物
简述进程的启动、终止的方式以及如何进行进程的查看
2014/02/20 面试题
常见的软件开发流程有哪些
2015/11/14 面试题
网站编辑求职信
2013/10/17 职场文书
优秀民警事迹材料
2014/01/29 职场文书
2015年学校工作总结范文
2015/04/20 职场文书
初一英语教学反思
2016/02/15 职场文书
会计工作自我鉴定范文
2019/06/21 职场文书
JavaScript分页组件使用方法详解
2021/07/26 Javascript
零基础学java之方法的定义与调用详解
2022/04/10 Java/Android
SQL Server使用PIVOT与unPIVOT实现行列转换
2022/05/25 SQL Server