做项目遇到跨域问题网上查了很多都是复制黏贴其中有些没明白的地方，后来自己琢磨出问题所在，做了一些修改，希望能帮到刚入坑不久的朋友
-
跨域
跨域:
浏览器对于javascript的同源策略的限制,例如a.cn下面的js不能调用b.cn中的js,对象或数据(因为a.cn和b.cn是不同域),所以跨域就出现了.
上面提到的,同域的概念又是什么呢??? 简单的解释就是相同域名,端口相同,协议相同
同源策略:
请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同.
比如:我在本地上的域名是study.cn,请求另外一个域名一段数据
这个时候在浏览器上会报错:
这个就是同源策略的保护,如果浏览器对javascript没有同源策略的保护,那么一些重要的机密网站将会很危险~
-
反向代理
反向代理（Reverse Proxy）方式是指以代理服务器来接受internet上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给internet上请求连接的客户端，此时代理服务器对外就表现为一个反向代理服务器。
-
Angular4跨域
Angular4项目分为工程代码和生产代码,在本地调试一般都是工程代码,这样联调接口的话,每次写一个接口都要丢到服务器上测试,严重影响效率,所以我们需要做的就是能在工程项目上联调接口,随时能看到效果,但是后端代码不是部署在本机的话就会有跨域问题,于是我们便需要去着重去解决跨域问题!这样后端代码随时改,前端也可以随时更改看到效果,实现真正的前后端分离!
对于Angular4解决跨域问题,应该是开发者已经想到这个问题,所以解决这个问题很简单!那就是反向代理!!
下面介绍反向代理的方法:
- 首先需要建立一个JSON文件,文件名”proxy.config.json”
{
"/api":{
"target":"http://192.168.12.203:8080"
}
}
this.$http.post(`/api/front/frontUserController/login.do`,data)
.then(res=>{
Console.log(res);
})
2.这里"/api"不是固定的，比如你请求地址http://192.168.12.203:8080/icpms/regd/getRegBrand.do接口,把上面的内容改成下面
{
"/icpms":{
"target":"http://192.168.12.203:8080"
}
}
然后把post里面的地址改成
this.$http.post(`/icpms/regd/getRegBrand.do`,data)
.then(res=>{
Console.log(res);
})
因为http://192.168.12.203:8080已经被代理到/api上，也就是/icpms!
3.然后配置”package.json”文件
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.config.json",
"build": "ng build --prod --aot",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
}