【Angular】设置代理解决跨域问题

1. 跨域

1.1 什么是跨域

跨域，即跨站HTTP请求（Cross-site HTTP request），指发起请求的资源所在域不同于请求指向资源所在域的HTTP请求。

这是浏览器对JavaScript的同源策略的限制，例如a.com下面的js不能调用b.com中的js、对象或数据（因为a.com和b.com是不同的域）对于http://www.a.com/a.js访问其它URL，更详细的说明如下表所示：

URL	说明	是否允许通信
http://www.a.com/b.js	同一域名下	允许
http://www.a.com/script/b.js	同一域名下不同文件夹	允许
http://www.a.com:8000/b.js	同一域名，不同端口	不允许
https://www.a.com/b.js	同一域名，不同协议	不允许
http://70.32.92.74/b.js	域名和域名对应ip	不允许
http://script.a.com/b.js	主域相同，子域不同	不允许
http://a.com/b.js	同一域名，不同二级域名（同上）	不允许
http://www.b.com/b.js	不同域名	不允许

同域的概念又是什么呢?

简单的解释就是具有相同的域名（a.com）、端口（8080）和协议（http）。同源策略：请求的URL地址，必须与浏览器上的URL地址处于同域。

比如：本地上的域名是a.com，请求b.com的数据，这个时候在浏览器上会报错，这个就是同源策略的保护，如果浏览器对JavaScript没有同源策略的保护，那么一些重要的机密网站将会很危险。

1.2 跨域的应用情景

当使用前后端分离，后端主导的开发方式进行前后端协作开发时，常常有如下情景：

后端开发完毕在服务器上进行部署并给前端API文档
前端在本地进行开发并向远程服务器上部署的后端发送请求

在这种开发过程中，如果前端想要一边开发一边测试接口，就需要使用跨域的方式。

2. Angular跨域问题

2.1 反向代理

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

2.2 设置方法

首先需要建立一个JSON文件，文件名为proxy.config.json：

{
  "/":{
    "target":"http://localhost:8080/"
  }
}

http://localhost:8080/为服务器的IP地址，或者是所需要请求的接口域名，该地址就是需要被代理的

/是代理的名称，一般都是接口请求的IP地址后面的第一个参数名。比如http://localhost:8080/api/...，则代理名称就是/api

因为http://localhost:8080/已经被代理到/上，所以反向代理后写接口请求的时候只需要写：

this.$http.post(`/user/login`,data)
     .then(res=>{
             Console.log(res);
})

然后配置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"
}

2.3 启动代理服务

第一种：启动项目通过npm start启动，会自动启动代理服务

npm start

第二种：直接以如下命令启动代理服务

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