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

Stella981
• 阅读 1177

在前后台分离的应用中,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 浏览器中能够实现的跨域访问的插件。

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

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

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 接口。

参考引用

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
3年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
Easter79 Easter79
3年前
swap空间的增减方法
(1)增大swap空间去激活swap交换区:swapoff v /dev/vg00/lvswap扩展交换lv:lvextend L 10G /dev/vg00/lvswap重新生成swap交换区:mkswap /dev/vg00/lvswap激活新生成的交换区:swapon v /dev/vg00/lvswap
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
4个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
9个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这