angular7-解决跨域问题

声明:本文仅限用于学术交流,引用或转载本文时请注明出处!

差不多一个月左右没更新博客了,最近自己遇到的问题其实挺多,学到的也很多,更新一篇博客把吧。以前在学习前端的时候就知道会有跨域问题的存在,但是在曾经的项目中,前后端没有完全分离,也没有遇到这个问题。直到今天晚上用angular7 获取服务端数据时候,终于遇到了这个问题。

angular中的跨域问题

1
Access to XMLHttpRequest at 'http://localhost:8080/' from origin 'http://localhost:4200/' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. 

什么是跨域

请求格式:
协议://host[:port][abs_path]
协议: http、https
host: 主机的域名或者ip地址
port:服务器的端口
abs_path:请求资源的URI
跨域:只要发起请求资源的协议、host、端口中的一个与请求资源所在域的协议、host、端口不同,即视为跨域。
简单点说,除了abs_path可以不同外,其他必须相同。

跨域的场景

前后端分离的开发测试过程中:后端给前端提供api接口,前端向后端发送数据请求,一边开发一边测试,就会造成跨域问题。

解决方法

反向代理

反向代理(Reverse Proxy)方式是指以代理服务器来接受网络上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给网络上请求连接的客户端,此时代理服务器对外就表现为一个反向代理服务器。这个是angular/cli的一个内置功能。

设置

1.配置proxy.config.json
在根目录创建文件 proxy.conf.json,内容为:

1
2
3
4
5
{
"/":{
"target":"http://localhost:8080/"
}
}

http://localhost:8080/为服务器的IP地址,或者是所需要请求的接口域名,该地址就是需要被代理。
因为 http://localhost:8080/ 已经被代理到/上,所以反向代理后写接口请求的时候只需要写:

1
2
3
4
5
6
7
export class UserService {
private url = '/user';
constructor(private http: HttpClient) { }
getUser(): Observable<User[]> {
return this.http.get<User[]>(this.url);
}
}

修改package.json

1
2
3
4
5
6
7
8
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.conf.json", #修改这里
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},

启动代理服务

第一种方法:

1
npm start

第二种方法

1
ng serve --proxy-config proxy.conf.json

其他方法

同样我们也可以在服务器上安装nginx来作为我们的反向代理服务器解决跨域问题。

参考文献

wechat
欢迎您扫一扫上面的微信公众号,订阅我的博客!

当前网速较慢或者你使用的浏览器不支持博客特定功能,请尝试刷新或换用Chrome、Firefox等现代浏览器