js跨域解决方法

最新推荐文章于 2023-05-15 17:34:42 发布

原创最新推荐文章于 2023-05-15 17:34:42 发布 · 740 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#iframe #upload #jsonp #callback #file #新浪微博

本文介绍了三种常见的跨域处理方法：JSONP、修改iframe的domain属性及利用iframe进行跨域资源上传。通过具体示例展示了前后端如何配合实现跨域请求。

1,jsonp

利用script支持跨域和对js文件的动态解析的特点实现。示例如下：

前端js

后端代码

$get = $_GET; $rtData = array( 'uID' => 10000, 'name' => 'Zhangsf', 'txt' => 'Welcome ZhangSanFeng', ); // 获取传递来的函数名，并拼凑完整的函数执行体 echo $get['callback'] .'('. json_encode($rtData) .')';

2修改iframe的domain

通过document.domain="a.com"，该方法只适用于子域名的情况

3iframe,参考新浪微博的头像上传实现

test.a.com/upload.html

<mce:script type="text/javascript"><!--
	// 这个函数将来会被iframe用到
	function getIframeVal(val)
	{
		alert(val);
	}
// --></mce:script>
<form method="post" target="if" enctype="multipart/form-data" action="http://upload.com/deal.php?cb=http://test.a.com/deal_cd.html">
	<input type="file" name="file" />
	<input type="SUBMIT" value="upload" />
</form>
<IFRAME id="if" name="if" src="about:blank" mce_src="about:blank" frameborder='0'></IFRAME>


 

upload.com/deal.php

<?php
// deal upload file
// and get file id, you can pass other params either
header('location:'.$_GET['cb'].'?file_id=123');

test.a.com/deal_cb.html