angularJs解决跨域问题-最简单的完美实例

2024-05-07 15:19:38

为什么80%的码农都做不了架构师？>>>

1、准备说明：

客户端 http://www.aaa.com

服务端 http://www.bbb.com 或者 http://service.aaa.com

现在a站点和b站点为不同域名。

angularJs版本：v1.2.25

我们先上代码，[总结里面再做说明]

2、客户端代码：

<!DOCTYPE html>
<html ng-app="app">
<head><meta charset="UTF-8"><title>Document</title><script src="./angular.min.js"></script><script type="text/javascript">var app = angular.module('app', []);app.controller('testCtrl', ['$scope', function ($scope) {$http({method: 'JSONP',url: 'http://www.bbb.com/test.php?callback=JSON_CALLBACK',}).success(function (data, status) {console.log(data);});//或者使用下面的代码效果是一样的$http.jsonp('http://www.bbb.com/test.php?callback=JSON_CALLBACK').success(function (data){console.log(data);}); }]);</script>
</head>
<body>
</body>
</html>

3、服务端代码：

$callBack = $_GET['callback']; //不存在可以自己判断后指定即可
exit($callBack.'('.json_encode($data).')');

4、客户端效果：

5、总结：

1、客户端请求的url地址后面追加参数?callback即可

2、参数callback的值指定为JSON_CALLBACK，注意是大写，就是JSON_CALLBACK不要作改动，这里是个坑，?callback的值稍作改动，客户端就需要全局定义callback函数，而且还特么怎么再传给$scope处理？为了避免不必要的麻烦，这里就这么搞吧

3、服务端需要指定$callBack = $_GET['callback'];接收callback,而且你还会发现接收的callback不是我们客户端写的?callback的值，客户端指定JSON_CALLBACK应该是为了触发angularJs内部的机制（纯粹瞎猜测，看客们嘴下留言呐～）

4、客户端success方法拿到服务端数据，$scope可以任其所谓了，啊哈哈哈，到此结束！

转载于:https://my.oschina.net/manks/blog/610720

angularJs解决跨域问题-最简单的完美实例相关推荐

jsonp解决跨域问题（简单易懂）
在日常的项目开发中,前端和后台是要经常交互的,有时候前端去请求后端的接口时,会出现跨域这个问题,解决跨域的方法有很多,本文主要讲解下如何使用jsonp来解决跨域问题. 解决问题之前,我们首先要明白一个 ...
Django框架深入了解_05 (Django中的缓存、Django解决跨域流程(非简单请求，简单请求)、自动生成接口文档)(二)
二.跨域: 回到顶部跨域知识介绍: 点我以前博客跨域解决方法:CORS:跨域资源共享 CORS请求分类(简单请求和非简单请求) 简单请求(simple request):只需要在头信息之中增加一个 ...
Django框架深入了解_05 (Django中的缓存、Django解决跨域流程(非简单请求，简单请求)、自动生成接口文档)(一)
阅读目录一.Django中的缓存: 前戏: Django中的几种缓存方式: Django中的缓存应用: 二.跨域: 跨域知识介绍: CORS请求分类(简单请求和非简单请求) 示例: 三.自动生成接口 ...
Node.js 模块化的操作，简单明了的代码帮助你明白后端的实现和前端之前的交互，及解决跨域等问题
Node.JS 模块化 1.require 导入模块const http=require('http')2.exports 导出模块db={name:'jine',age:22} module.e ...
axios简单配置及解决跨域
const instance = axios.create({baseURL: 'https://some-domain.com/api/',timeout: 1000,headers: {'X-Cu ...
使用express封装一个简单的http代理服务器以及手动设置Access-Control-Allow-Origin解决跨域问题
一.跨域是什么? 先来了解一下什么是跨域,才能知道如何解决跨域问题. 跨域:出于浏览器的同源策略限制,使浏览器不能执行其他网站的脚本.同源策略是浏览器对 javascript 施加的安全限制. 所谓同 ...
CORS-跨域资源共享解决跨域问题
1.什么是跨域? a.test.com 和 b.test.com 是两个不同的域,而处于安全机制考虑,JS只能访问与所在页面同一个域(相同协议.域名.端口)的内容,但是我们在项目开发时,经常遇到一个页 ...
前端解决跨域问题的8种方案（最新最全）
.同源策略如下: URL 说明是否允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下允许 http://www.a.com/lab/a.j ...
iframe解决跨域ajax请求的方法
iframe跨域的基本前提是,一个页面可以嵌套非同源站点的html文件,以及某一个域名下的html页面可以通过脚本向同域名服务器发出ajax请求.当一个域名为domain1下的页面A想要向domain ...

最新文章

热门文章