angular.js中解决跨域问题的三种方式

所属分类: 网络编程 / JavaScript 阅读数: 998
收藏 0 赞 0 分享

前言

开始本文之前,大家应该首先了解,协议、主机名和端口号相同叫同源。同源策略允许页面从同一个站点加载和执行特定的脚本。站外其他来源的脚本同页面的交互则被严格限制。

要解决这个问题就需要跨域,本文介绍解决angular中的跨域的三种方式:

一、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请求。

二、使用 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) {
// 数据
});

三、服务器端代理这种方式更多的应该是后端来做的实现向所有服务器发送请求的最简单方式是使用服务器端代理。

这个服务器和页面处在同一个域中(或者不在同一个域中但支持CORS) ,做为所有远程资源的代理。可以简单地通过使用本地服务器来代替客户端向外部资源发送请求, 并将响应结果返回给客户端。通过这种方式,老式浏览器不必使用需要发送额外请求的CORS(只有现代浏览器支持CORS)也能发送跨域请求,并且可以在浏览器中采用标准的安全策略。

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

更多精彩内容其他人还在看

浅谈Koa2框架利用CORS完成跨域ajax请求

这篇文章主要介绍了浅谈Koa2框架利用CORS完成跨域ajax请求,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

浅析Vue中method与computed的区别

在new Vue的配置参数中的computed和methods都可以处理大量的逻辑代码,但是什么时候用哪个属性,要好好区分一下才能做到正确的运用vue。这篇文章主要介绍了Vue中method与computed的区别,需要的朋友可以参考下
收藏 0 赞 0 分享

Vue2.0 http请求以及loading展示实例

下面小编就为大家分享一篇Vue2.0 http请求以及loading展示实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

轻松搞定jQuery+JSONP跨域请求的解决方案

了解了jsonp之后,大家应该也都明白了,jsonp主要就是用来实现跨域的获取数据,今天我们就来详细探讨下如何在实际中应用jsonp实现跨域
收藏 0 赞 0 分享

Vue2.0实现组件数据的双向绑定问题

这篇文章主要介绍了Vue2.0实现组件数据的双向绑定问题,非常不错,具有参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

node的process以及child_process模块学习笔记

这篇文章主要介绍了node的process以及child_process模块学习笔记,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue2.0 循环遍历加载不同图片的方法

下面小编就为大家分享一篇vue2.0 循环遍历加载不同图片的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

浅谈Vue2.0中v-for迭代语法的变化(key、index)

下面小编就为大家分享一篇浅谈Vue2.0中v-for迭代语法的变化(key、index),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

使用vue-aplayer插件时出现的问题的解决

这篇文章主要介绍了使用vue-aplayer插件时出现的问题的解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Element-ui table中过滤条件变更表格内容的方法

下面小编就为大家分享一篇Element-ui table中过滤条件变更表格内容的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享
查看更多