angular4跨域请求问题

 作项目遇到跨域问题网上查了不少都是复制黏贴其中有些没明白的地方，后来本身琢磨出问题所在，作了一些修改，但愿能帮到刚入坑不久的朋友

1. 跨域

跨域:

浏览器对于javascript的同源策略的限制,例如a.cn下面的js不能调用b.cn中的js,对象或数据(由于a.cn和b.cn是不一样域),因此跨域就出现了.

上面提到的,同域的概念又是什么呢??? 简单的解释就是相同域名,端口相同,协议相同

同源策略:

请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同.

好比:我在本地上的域名是study.cn,请求另一个域名一段数据

这个时候在浏览器上会报错:

这个就是同源策略的保护,若是浏览器对javascript没有同源策略的保护,那么一些重要的机密网站将会很危险~

1. 反向代理

反向代理（Reverse Proxy）方式是指以代理服务器来接受internet上的链接请求，而后将请求转发给内部网络上的服务器，并将从服务器上获得的结果返回给internet上请求链接的客户端，此时代理服务器对外就表现为一个反向代理服务器。

1. Angular4跨域

Angular4项目分为工程代码和生产代码,在本地调试通常都是工程代码,这样联调接口的话,每次写一个接口都要丢到服务器上测试,严重影响效率,因此咱们须要作的就是能在工程项目上联调接口,随时能看到效果,可是后端代码不是部署在本机的话就会有跨域问题,因而咱们便须要去着重去解决跨域问题!这样后端代码随时改,前端也能够随时更改看到效果,实现真正的先后端分离!

对于Angular4解决跨域问题,应该是开发者已经想到这个问题,因此解决这个问题很简单!那就是反向代理!!

下面介绍反向代理的方法:

1. 首先须要创建一个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"

}