首先, 协议, 主机名和端口号相同叫同源. 同源策略允许页面从同一个站点加载和执行特定的脚本. 站外其他来源的脚本同页面的交互则被严格限制. 要解决这个问题就需要跨域, 本文介绍解决 angular 中的跨域的三种方式:
1,JSONP
JSONP 的原理是通过 <script> 标签发起一个 GET 请求来取代 XHR 请求. JSONP 生成一个 < script> 标签并插到 DOM 中, 然后浏览器会接管并向 src 属性所指向的地址发送请求. 当服务器返回请求时, 响应结果会被包装成一个 JavaScript 函数, 并由该请求所对应的回调函数调用.
AngularJS 在 $http 服务中提供了一个 JSONP 辅助函数. 通过 $http 服务的 JSONP 方法可以发送请求, 如下所示:
- $http
- .JSONP("https://api.github.com?callback=JSON_CALLBACK") .success(function(data) {
- // 数据
- });
因为请求是由 <script> 标签发送的, 所以这个方法只能发送 GET 请求.
2, 使用 CORS
CORS 规范简单地扩展了标准的 XHR 对象, 以允许 JavaScript 发送跨域的 XHR 请求. 它会通过预检查 (preflight) 来确认是否有权限向目标服务器发送请求. 预检查可以让服务器接受或拒绝来自全部服务器, 特定服务器或一组服务器的请求. 这意味着客户端和服务端应用需要协同工作, 才能向客户端或服务器发送数据.
首先需要告诉 AngularJS 我们正在使用 CORS. 使用 config()方法在应用模块上设置两个参数以达到此目的.
- angular.module('myApp', [])
- .config(function($httpProvider) {
- $httpProvider.defaults.useXDomain = true;
- delete $httpProvider.defaults.headers
- .common['X-Requested-With'];
- });
接下来, 需要服务端设置响应头, 这个需要和后端人员镜像
Access-Control-Allow-Origin 这个头的值可以是与请求头的值相呼应的值, 为 * 表示允许接收从任何来源发来的请求.
Access-Control-Allow-Credentials 默认情况下, CORS 请求不会发送 cookie. 如果服务器返回了这个头, 那么就可以通过将 withCredentials 设置为 true 来将 cookie 同请求一同发送出去.
接下来就可以使用下面的请求进行跨域请求了
- $http
- .get("https://api.github.com")
- .success(function(data) {
- // 数据
- });
3, 服务器端代理
这种方式更多的应该是后端来做的实现向所有服务器发送请求的最简单方式是使用服务器端代理. 这个服务器和页面处在同一个域中 (或者不在同一个域中但支持 CORS) , 做为所有远程资源的代理. 可以简单地通过使用本地服务器来代替客户端向外部资源发送请求, 并将响应结果返回给客户端. 通过这种方式, 老式浏览器不必使用需要发送额外请求的 CORS(只有现代浏览器支持 CORS) 也能发送跨域请求, 并且可以在浏览器中采用标准的安全策略.
来源: http://www.css88.com/qa/angular-js/10688.html