前端跨域杂谈

原文

1、前端跨域之表单（post）
项目需求，需要跨域向另一台服务器传送大量值，从ajax角度跨域是get方式，基于此，方案采用构造<form>表单，通过action发送到对方服务器，对方服务器需要做一些配合。

发送方post.html

<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8" />
<Meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" name="viewport">
</head>
<body>
<script>
function postcallback(data){
}
</script>
<form action="http://10.16.92.34:81/xampp/index.PHP" method="post" target="ifr-result">
<input type="text" name="data" />
<input type="submit" value="提交" />
</form>
<iframe name="ifr-result"></iframe>
</body>
</html>

对方服务器接收index.PHP
<?PHP
$data = '{"ret": 0,"msg": "ok"}';
// 结果跳转到当前域执行
header("Location: http://10.16.92.34:81/xampp/ifr-callback.php?data=".urlencode($data));

重定向到同域名服务内部处理 ifr-callback.PHP
<?PHP
header('Content-type: text/javascript');
echo '<script>';
//回调原页面上函数处理返回结果
echo 'parent.postcallback(' .$_GET['data']. ');';
echo '</script>';

2、前端跨域之CORS （post）
CORS跨域资源共享：定义一种浏览器和服务器交互的方式来确定是否允许跨域请求。

详细内容：
前端代码：post.html
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8" />
<Meta content="width=device-width,user-scalable=no" name="viewport">
</head>
<body>
<script>
var xhr = new XMLHttpRequest();
xhr.open("GET","http://10.16.92.34:81/xampp/index.PHP",true);
xhr.send();
xhr.onreadystatechange = ajaxCallback;
function ajaxCallback(data) {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(data);
console.log(data.srcElement.responseText);
}
}
</script>
</body>
</html>

服务端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。
index.PHP
<?PHP
header("Access-Control-Allow-Origin:*");
$data = '{"ret": 0,"msg": "ok"}';
// 结果跳转到当前域执行
header("Location: http://10.16.92.34:81/xampp/ifr-callback.PHP?data=".urlencode($data));

ifr-callback.PHP
<?PHP
header("Access-Control-Allow-Origin:*");
header('Content-type: text/json');
//回调原页面上函数处理返回结果
echo $_GET['data'];

3、H5跨域postMessage

a）在Web Workers中使用postMessage和onmessage
step1：准备一个主线程页面work.html
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Web worker</title>
<script type="text/JavaScript">
function init() {
var worker = new Worker('http://res.imtt.qq.com/cloud_based_adp/sdktagdemo/js/compute.js');
//event 参数中有 data 属性，就是子线程中返回的结果数据
worker.onmessage= function (event) {
// 把子线程返回的结果添加到 div 上
document.getElementById("result").innerHTML +=
event.data + "<br/>";
};
}
</script>
</head>
<body onload="init()">
<div id="result"></div>
</body>
</html>

step2：向主线程发送信息-compute.js
var i = 0;
function timedCount() {
for (var j = 0,sum = 0; j < 100; j++) {
for (var i = 0; i < 100000000; i++) {
sum += i;
}
}
// 调用 postMessage 向主线程发送消息
postMessage(sum);
}
postMessage("Before computing,"+new Date());
timedCount();
postMessage("After computing,"+new Date());

b）跨域文档通信使用postMessage和onmessage

step1：假设在A域构造一个页面cross-domain.html页面（通过iframe嵌入一个子页面，调用postMessage方法发送数据）
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test Cross-domain communication using HTML5</title>
<script type="text/JavaScript">
function sendIt(){
// 通过 postMessage 向子窗口发送数据
document.getElementById("otherPage").contentwindow
.postMessage(
document.getElementById("message").value,
"http://10.16.92.34:81"
);
}
</script>
</head>
<body>
<!-- 通过 iframe 嵌入子页面 -->
<iframe src="http://10.16.92.34:81/xampp/other-domain.html"
id="otherPage"></iframe>
<br/><br/>
<input type="text" id="message"><input type="button"
value="Send to child.com" onclick="sendIt()" />
</body>
</html>

step2：B域页面other-domain.html子窗口中监听onmessage事件，显示父窗口发送来的数据
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Web page from child.com</title>
<script type="text/JavaScript">
//event 参数中有 data 属性，就是父窗口发送过来的数据
window.addEventListener( "message",function( event ) {
// 把父窗口发送过来的数据显示在子窗口中
document.getElementById("content").innerHTML+=event.data+"<br/>";
},false );

</script>
</head>
<body>
Web page from http://10.16.92.34:81
<div id="content"></div>
</body>

</html>

操作参考图：

前端跨域杂谈的更多相关文章

  1. HTML实现代码雨源码及效果示例

    这篇文章主要介绍了HTML实现代码雨源码及效果示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

  2. canvas中普通动效与粒子动效的实现代码示例

    canvas用于在网页上绘制图像、动画，可以将其理解为画布，在这个画布上构建想要的效果。本文详细的介绍了粒子特效，和普通动效进行对比，非常具有实用价值，需要的朋友可以参考下

  3. H5混合开发app如何升级的方法

    本篇文章主要介绍了H5混合开发app如何升级的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

  4. HTML文本属性&amp;颜色控制属性的实现

    这篇文章主要介绍了HTML文本属性&颜色控制属性的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

  5. 详解html5 postMessage解决跨域通信的问题

    这篇文章主要介绍了详解html5 postMessage解决跨域通信的问题的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

  6. canvas学习和滤镜实现代码

    这篇文章主要介绍了canvas学习和滤镜实现代码，利用 canvas，前端人员可以很轻松地、进行图像处理，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

  7. 简洁自适应404页面HTML好看的404源码

    这篇文章主要介绍了简洁自适应404页面HTML好看的404源码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

  8. 详解使用postMessage解决iframe跨域通信问题

    这篇文章主要介绍了详解使用postMessage解决iframe跨域通信问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

  9. localStorage的过期时间设置的方法详解

    这篇文章主要介绍了localStorage的过期时间设置的方法详解的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

  10. 详解HTML5 data-* 自定义属性

    这篇文章主要介绍了详解HTML5 data-* 自定义属性的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

随机推荐

  1. xe-ajax-mock 前端虚拟服务

    最新版本见Github，点击查看历史版本基于XEAjax扩展的Mock虚拟服务插件；对于前后端分离的开发模式，ajax+mock使前端不再依赖后端接口开发效率更高。CDN使用script方式安装，XEAjaxMock会定义为全局变量生产环境请使用xe-ajax-mock.min.js，更小的压缩版本，可以带来更快的速度体验。

  2. vue 使用 xe-ajax

    安装完成后自动挂载在vue实例this.$ajaxCDN安装使用script方式安装，VXEAjax会定义为全局变量生产环境请使用vxe-ajax.min.js，更小的压缩版本，可以带来更快的速度体验。cdnjs获取最新版本点击浏览已发布的所有npm包源码unpkg获取最新版本点击浏览已发布的所有npm包源码AMD安装require.js安装示例ES6Module安装通过Vue.use()来全局安装示例./Home.vue

  3. AJAX POST数据中文乱码解决

    前端使用encodeURI进行编码后台java.net.URLDecoder进行解码编解码工具

  4. Koa2框架利用CORS完成跨域ajax请求

    实现跨域ajax请求的方式有很多，其中一个是利用CORS，而这个方法关键是在服务器端进行配置。本文仅对能够完成正常跨域ajax响应的，最基本的配置进行说明。这样OPTIONS请求就能够通过了。至此为止，相当于仅仅完成了预检，还没发送真正的请求呢。

  5. form提交时，ajax上传文件并更新到&lt;input&gt;中的value字段

  6. ajax的cache作用

    filePath="+escape;},error:{alert;}});解决方案：1.加cache:false2.url加随机数正常代码：网上高人解读：cache的作用就是第一次请求完毕之后，如果再次去请求，可以直接从缓存里面读取而不是再到服务器端读取。

  7. 浅谈ajax上传文件属性contentType = false

    默认值为contentType="application/x-www-form-urlencoded".在默认情况下，内容编码类型满足大多数情况。在这里，我们主要谈谈contentType=false.在使用ajax上传文件时：在其中先封装了一个formData对象，然后使用post方法将文件传给服务器。说到这，我们发现在JQueryajax()方法中我们使contentType=false,这不是冲突了吗？这就是因为当我们在form标签中设置了enctype=“multipart/form-data”,

  8. 909422229_ajaxFileUpload上传文件

    ajaxFileUpload.js很多同名的，因为做出来一个很容易。我上github搜AjaxFileUpload出来很多类似js。ajaxFileUpload是一个异步上传文件的jQuery插件传一个不知道什么版本的上来，以后不用到处找了。语法：$.ajaxFileUploadoptions参数说明：1、url上传处理程序地址。2，fileElementId需要上传的文件域的ID，即的ID。3，secureuri是否启用安全提交，默认为false。4，dataType服务器返回的数据类型。6，error

  9. AJAX-Cache：一款好用的Ajax缓存插件

    原文链接AJAX-Cache是什么Ajax是前端开发必不可少的数据获取手段，在频繁的异步请求业务中，我们往往需要利用“缓存”提升界面响应速度，减少网络资源占用。AJAX-Cache是一款jQuery缓存插件，可以为$.ajax()方法扩展缓存功能。

  10. jsf – Ajax update/render在已渲染属性的组件上不起作用

    我试图ajax更新一个有条件渲染的组件。我可以确保#{user}实际上是可用的。这是怎么引起的，我该如何解决呢？必须始终在ajax可以重新呈现之前呈现组件。Ajax正在使用JavaScriptdocument.getElementById()来查找需要更新的组件。但是如果JSF没有将组件放在第一位，那么JavaScript找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。

返回
顶部