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设置FieldSet展开与收缩
May 15 Javascript
一个可拖拽列宽表格实例演示
Nov 26 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
Feb 24 Javascript
jQuery插件实现多级联动菜单效果
Dec 01 Javascript
JavaScript数据类型学习笔记
Jan 25 Javascript
详解Node.js如何开发命令行工具
Aug 14 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
Apr 23 Javascript
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
Jun 21 Javascript
一种angular的方法级的缓存注解(装饰器)
Mar 13 Javascript
html-webpack-plugin修改页面的title的方法
Jun 18 Javascript
js实现微信聊天效果
Aug 09 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函数篇之掌握ord()与chr()函数应用
2011/12/05 PHP
codeigniter集成ucenter1.6双向通信的解决办法
2014/06/12 PHP
php设置静态内容缓存时间的方法
2014/12/01 PHP
jQuery+PHP实现的掷色子抽奖游戏实例
2015/01/04 PHP
phpStudy2016 配置多个域名期间遇到的问题小结
2017/10/19 PHP
jQuery模拟黑客帝国矩阵效果实例
2015/06/28 Javascript
Backbone.js的一些使用技巧
2015/07/01 Javascript
程序员必知35个jQuery 代码片段
2015/11/05 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
2016/04/03 Javascript
jquery实现简单Tab切换菜单效果
2020/07/17 Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
2017/12/11 Javascript
在vue项目中引用Iview的方法
2018/09/14 Javascript
vue数据初始化initState的实例详解
2019/04/11 Javascript
d3.js 地铁轨道交通项目实战
2019/11/27 Javascript
JS实现横向跑马灯效果代码
2020/04/20 Javascript
vue v-on:click传递动态参数的步骤
2020/09/11 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
2020/12/10 Javascript
Python里disconnect UDP套接字的方法
2015/04/23 Python
Python字典实现简单的三级菜单(实例讲解)
2017/07/31 Python
python利用高阶函数实现剪枝函数
2018/03/20 Python
Pandas过滤dataframe中包含特定字符串的数据方法
2018/11/07 Python
解决python ogr shp字段写入中文乱码的问题
2018/12/31 Python
人工神经网络算法知识点总结
2019/06/11 Python
Python参数类型以及常见的坑详解
2019/07/08 Python
使用Python和Scribus创建一个RGB立方体的方法
2019/07/17 Python
matplotlib.pyplot画图并导出保存的实例
2019/12/07 Python
python 基于opencv操作摄像头
2020/12/24 Python
马来西亚在线购物:POPLOOK.com
2019/12/09 全球购物
介绍一下SQL Server里面的索引视图
2016/07/31 面试题
党的群众路线对照检查材料范文
2014/09/24 职场文书
运动会开幕词
2015/01/28 职场文书
驳回起诉民事裁定书
2015/05/19 职场文书
Win11显卡控制面板打开显卡设置方法
2022/04/20 数码科技
iOS 16进一步确认,一共支持16款iPhone
2022/04/28 数码科技
Windows Server 修改远程桌面端口的实现
2022/06/25 Servers
python如何将mat文件转为png
2022/07/15 Python