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


Posted in Javascript onJuly 12, 2017

前言

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

要解决这个问题就需要跨域,本文介绍解决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)也能发送跨域请求,并且可以在浏览器中采用标准的安全策略。

总结

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

Javascript 相关文章推荐
JavaScript语句可以不以;结尾的烦恼
Mar 08 Javascript
JavaScript 开发规范要求(图文并茂)
Jun 11 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
Dec 28 Javascript
js限制文本框只能输入中文的方法
Aug 11 Javascript
jQuery AjaxUpload 上传图片代码
Feb 02 Javascript
ionic实现带字的toggle滑动组件
Aug 27 Javascript
JavaScript创建对象的七种方式全面总结
Aug 21 Javascript
ECMAScript6变量的解构赋值实例详解
Sep 19 Javascript
node.js学习之事件模块Events的使用示例
Sep 28 Javascript
vue forEach循环数组拿到自己想要的数据方法
Sep 21 Javascript
express框架下使用session的方法
Jul 31 Javascript
Vue 自适应高度表格的实现方法
May 13 Javascript
JavaScript+HTML5实现的日期比较功能示例
Jul 12 #Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
Jul 12 #Javascript
Bootstrap提示框效果的实例代码
Jul 12 #Javascript
JavaScript输出所选择起始与结束日期的方法
Jul 12 #Javascript
微信小程序三级联动地址选择器的实例代码
Jul 12 #Javascript
微信小程序 共用变量值的实现
Jul 12 #Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
Jul 12 #Javascript
You might like
PHP+Tidy-完美的XHTML纠错+过滤
2007/04/10 PHP
用PHP的ob_start() 控制您的浏览器cache
2009/08/03 PHP
PHP垃圾回收机制简单说明
2010/07/22 PHP
PHP和Mysqlweb应用开发核心技术 第1部分 Php基础-1 开始了解php
2011/07/03 PHP
thinkphp实现发送邮件密码找回功能实例
2014/12/01 PHP
thinkPHP框架RBAC实现原理分析
2019/02/01 PHP
PHP生成二维码与识别二维码的方法详解【附源码下载】
2019/03/07 PHP
Laravel timestamps 设置为unix时间戳的方法
2019/10/11 PHP
图片连续滚动代码[兼容IE/firefox]
2009/06/11 Javascript
JavaScript与DropDownList 区别分析
2010/01/01 Javascript
JavaScript游戏之是男人就下100层代码打包
2010/11/08 Javascript
js如何判断用户是否是用微信浏览器
2014/06/05 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
2015/10/20 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
2017/04/12 Javascript
使用JS编写的随机抽取号码的小程序
2017/08/11 Javascript
使用elementUI实现将图片上传到本地的示例
2018/09/04 Javascript
vue interceptor 使用教程实例详解
2018/09/13 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
2021/01/07 Vue.js
[01:18:21]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
pip 错误unused-command-line-argument-hard-error-in-future解决办法
2014/06/01 Python
Python中的tuple元组详细介绍
2015/02/02 Python
对Tensorflow中的变量初始化函数详解
2018/07/27 Python
为什么str(float)在Python 3中比Python 2返回更多的数字
2018/10/16 Python
Python常用库大全及简要说明
2020/01/17 Python
Pycharm的Available Packages为空的解决方法
2020/09/18 Python
美国嘻哈文化生活方式品牌:GLD
2018/04/15 全球购物
业务员岗位职责范本
2013/12/15 职场文书
兼职业务员岗位职责
2014/01/01 职场文书
致裁判员加油稿
2014/02/08 职场文书
科研课题实施方案
2014/03/18 职场文书
初一学生期末评语
2014/04/24 职场文书
年度评优评先方案
2014/06/03 职场文书
试用期员工工作自我评价
2014/09/10 职场文书
2014年高二班主任工作总结
2014/12/16 职场文书
餐饮行业关注的9大营销策略
2019/08/26 职场文书
面试中canvas绘制图片模糊图片问题处理
2022/03/13 Javascript