JS 跨域问题和解决方案
来源:互联网 发布:iphone中的照片导入mac 编辑:程序博客网 时间:2024/06/06 12:26
跨域问题是浏览器同源策略限制,当前域名的js只能请求相同域名下url。
解决方式通常有两种:
1.使用jsonp,要求在后端返回的是jsonp格式的数据
js代码:
$("button").click(function(){ $.ajax({ url:"http://xxx:8000/api/getInfo", dataType:"jsonp", success:function(result){ $("p").html(result.msg); },error:function(){ console.log('fail'); } });});
后端代码:
if(isset($_REQUEST ['callback'])&&!empty($_REQUEST['callback'])){ $jsoncallback = htmlspecialchars($_REQUEST ['callback']);}echo $jsoncallback . '(' . $json_data . ')';die();
后端的代码先判断是否有callback,有的话则需要返回的jsonp格式数据本质是往head里面append了一个script标签,相当于是请求了一个文件,服务端返回对应格式的文件,利用的是<script>标签的src,
缺点在于它只支持GET请求而不支持POST等其它类型的HTTP请求;
它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题2.第二种方式在后端header设置Access-Control-Allow-Origin:*JS代码$("button").click(function(){ $.ajax({ url:"http://xxx:8000/api/getInfo", dataType:"json", type:'post', data:'id=123', success:function(result){ $("p").html(result.msg); },error:function(){ console.log('fail'); } }); });后端代码:header('Access-Control-Allow-Origin:*');echo $json_data;die();采用着这种方式优点在于支持post方式,缺点在于相当于api对外开放了,所以要加上要传递一些参数,{ 'name': 用户名, 'key': 加密的验证key, 'timestamp': 时间戳,}在测试的时候,采用jsonp的方式,在后端代码设断点,发起请求之后进入到了断点。而采用设置Access-Control-Allow-Origin:*的时候,怎么也进不到断点里,不过最终后端都有返回数据。
阅读全文
0 0
- JS 跨域问题和解决方案
- JS跨域解决方案
- js跨域解决方案
- js 跨域解决方案
- js跨域解决方案
- JS跨域解决方案
- 跨域问题出现原因和解决方案
- js跨域问题 常见的集中解决方案
- js问题及解决方案
- ajax跨域和js跨域解决方案
- ajax跨域和js跨域解决方案
- ajax跨域和js跨域解决方案
- ajax跨域和js跨域解决方案
- ajax跨域和js跨域解决方案总结
- ajax跨域和js跨域解决方案 .
- ajax跨域和js跨域解决方案(转)
- ajax跨域和js跨域解决方案
- CDN引起的 字体跨域问题,解决方案和问题
- Springboot+SpringData+jpa
- vue开发:生成token保存在客户端localStorage中
- GSMS-华为应急通讯完美版 ISO文件下载
- 为什么要在密码里加点“盐”
- SQL Server将表数据移动到新的文件/文件组
- JS 跨域问题和解决方案
- js validate remote验证问题
- lintcode(615)Course Schedule
- 【SDOI2017】数字表格
- Oracle 12C 新特性之 sqlplus查看History命令
- TCP和UDP的135、137、138、139、445端口的作用
- 动态范围规划(调整)Dynamic Range Control的一些心得(三)
- oracle 单表备份
- Brtools 参数解释