文档章节

Angular 应用解决跨域访问的问题

waylau
 waylau
发布于 2018/12/21 21:33
字数 765
阅读 216
收藏 2

在前后台分离的应用中,Angular 与 Java 是一对好搭档。但是如果是分开部署应用,则势必会遇到跨域访问的问题。

什么是跨域

启动应用之后,有些浏览器会提示如下告警信息:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. 

这个是典型的跨域问题。浏览器为了安全考虑,不同的域之间是不能够互相访问的的。

比如,Angular 应用部署在本地的4200端口,而 Java 服务部署在8080端口,他们虽然是同台机子,但仍然是不同的域。Angular 应用视图通过HttpClient 去访问 Java 的 http://localhost:8080/hello 接口是不允许的。

如何解决跨域问题

在知道了什么是跨域之后,解决方案就有多种。

1. 避免跨域

既然,分开部署导致了跨域,那么最简单的方式莫过于避免分开部署,即Angular 与 Java 同时部署到同个 Web 服务器中。

这种方式部署在传统的 Java Web 中非常常见。比如,JSP 应用。

但带来的问题是,水平扩展和性能调优将变得困难,不适合大型互联网应用。

2. 安装支持跨域请求的插件

其实,很多浏览器都提供了允许跨域访问的插件,只需启用这种插件,就能实现在开发环境跨域请求第三方 API 了。

下图展示的是在 Firefox 浏览器中能够实现的跨域访问的插件。

实现的跨域访问的插件

这种方式是最简单,但使用的场景比较受限,一般用于开发环境。

3. 设置反向代理

这种方式是业界最为常用的方式,原理是设置反向代理服务器,让 Angular 应用都访问自己的服务器中的API,而这类API都会被反向代理服务器转发到 Java 服务API中,而这个过程对于 Angular 应用是无感知的。

业界经常是采用 NGINX 服务来承担反向代理的职责。而在 Angular 中,使用反向代理将变得更加简单。在 Angualr 应用的根目录下,添加配置文件proxy.config.json,并填写如下格式内容:

{
    "/lite": {
      "target": "http://localhost:8080",
      "secure": "false"
    }
}

使用 Angular CLI 启动应用时,只需要执行如下命令即可,非常方法:

ng serve --proxy-config proxy.config.json

这样,当 Angular 要访问http://localhost:4200/lite 时,会被转发到 Java 的 http://localhost:8080/lite 接口。

参考引用

© 著作权归作者所有

waylau

waylau

粉丝 528
博文 105
码字总数 185862
作品 2
深圳
架构师
私信 提问
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.2K
26
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
2018/11/09
189
0
angular-cli 打包 跨域 发布问题

angular-cli 打包配置的跨域设置打不进去,部署的时候还是跨域的,有办法解决么?这种angular-cli打包过后的代码用什么部署?node么?

夭-心
2017/10/27
131
0
Angular通过CORS实现跨域方案

以前有一篇很老的文章网上转了很多,包括现在如果你百度"跨域"这个关键字,前几个推荐的都是"Javascript跨域总结与解决方案".看了一下感觉手段有点陈旧了,有一些比如document.domain还有ifram...

顽Shi
2014/08/18
32.9K
16
Angular 2最终版正式发布

9月15日,Angular 2 的最终版正式发布了。 作为 Angular 1 的全平台继任者 -- Angular 2 的最终版,意味着什么 意味着稳定性已经得到了大范围用例的验证; 意味着已经针对产品化、文件尺寸和...

葡萄城技术团队
2016/09/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

nginx学习之模块

1、 stub_status模块: 用于展示nginx处理连接时的状态。 配置语法如下: Syntax:stub_status;Default:默认没有配置Context:server、location 可以编辑default.conf,加上如下配置: ...

码农实战
40分钟前
4
0
MySQL,必须掌握的6个知识点

目录 一、索引B+ Tree 原理 MySQL 索引 索引优化 索引的优点 索引的使用条件 二、查询性能优化使用 Explain 进行分析 优化数据访问 重构查询方式 三、存储引擎InnoDB MyISAM 比较 四、数据类...

李红欧巴
44分钟前
4
0
堆”和“栈

C++作为一款C语言的升级版本,具有非常强大的功能。它不但能够支持各种程序设计风格,而且还具有C语言的所有功能。我们在这里为大家介绍的是其中一个比较重要的内容,C++内存区域的基本介绍。...

SibylY
55分钟前
4
0
总结:Https

一、介绍 简单理解,https即在http协议的基础上,增加了SSL协议,保障数据传输的安全性。 它由以前的http—–>tcp,改为http——>SSL—–>tcp;https采用了共享密钥加密+公开密钥加密的方式 ...

浮躁的码农
57分钟前
6
0
数据库表与表之间的一对一、一对多、多对多关系

表1 foreign key 表2 多对一:表 1 的多条记录对应表 2 的一条记录 利用foreign key的原理我们可以制作两张表的多对多,一对一关系 多对多: 表1的多条记录可以对应表2的一条记录 表2的多条记...

Garphy
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部