Angular4开发解决跨域问题

1.跨域

浏览器对于javascript的同源策略的限制,例如a.cn下面的js不能调用b.cn中的js,对象或数据(由于a.cn和b.cn是不一样域),因此跨域就出现了.
上面提到的,同域的概念又是什么呢??? 简单的解释就是相同域名,端口相同,协议相同
同源策略:
请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同.
好比:我在本地上的域名是study.cn,请求另一个域名一段数据,这个时候在浏览器上会报错,这个就是同源策略的保护,若是浏览器对javascript没有同源策略的保护,那么一些重要的机密网站将会很危险~

2.反向代理

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

3.Angular4跨域

Angular4项目分为工程代码和生产代码,在本地调试通常都是工程代码,这样联调接口的话,每次写一个接口都要丢到服务器上测试,严重影响效率,因此咱们须要作的就是能在工程项目上联调接口,随时能看到效果,可是后端代码不是部署在本机的话就会有跨域问题,因而咱们便须要去着重去解决跨域问题!这样后端代码随时改,前端也能够随时更改看到效果,实现真正的先后端分离!
对于Angular4解决跨域问题,应该是开发者已经想到这个问题,因此解决这个问题很简单!那就是反向代理!!
下面介绍反向代理的方法:
1.首先须要创建一个JSON文件,文件名”proxy.config.json”

{
  "/api":{
    "target":"http://106.15.179.92"
  }
}

http://106.15.179.92:为你链接机器的ip地址,或者你所须要请求的接口域名,这个就是须要被代理的
/api是代理的名称,通常都是接口请求的ip地址后面的第一个参数名
好比:http://106.15.179.92/api/fron...为一个登陆的接口,反向代理后写接口请求的时候只须要写

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

由于http://106.15.179.92已经被代理到/api上!
2.而后配置”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"
}

4.甩锅解决跨域

跨域?和咱们前端有关系?有吗?没有吧!我不解决,我就不解决,大家后端去解决!
如今介绍一种对于任何项目都通用的解决跨域的方法!
用nginx反向代理实现跨域，是最简单的跨域方式。只须要修改nginx的配置便可解决跨域问题，支持全部浏览器，支持session，不须要修改任何代码，而且不会影响服务器性能。
咱们只须要配置nginx，在一个服务器上配置多个前缀来转发http/https请求到多个真实的服务器便可。这样，这个服务器上全部url都是相同的域名、协议和端口。所以，对于浏览器来讲，这些url都是同源的，没有跨域限制。而实际上，这些url实际上由物理服务器提供服务。这些服务器内的javascript能够跨域调用全部这些服务器上的url。
下面，给出一个nginx支持跨域的例子，进行具体说明。
如，咱们有两个pythonflask开发的项目：testFlask1和testFlask2。
testFlask2项目上的javascript脚本要经过ajax方式调用testFlask1的一个url，获取一些数据。
正常状况下部署，就会有跨域问题，浏览器拒绝执行以下这样的调用。

$("button").click(function () {
    $.get("127.0.0.1:8081/partners/json", function (result) {
        $("div").html(result);
    });
});

下面把testFlask2项目的javascrip文件修改一下。这样访问同源的url，就不会有跨域问题。

$("button").click(function () {
    $.get("partners/json", function (result) {
        $("div").html(result);
    });
});

可是，咱们testFlask2项目实际上没有partners/json这样的url，那怎么处理呢？
咱们这样编写nginx的配置文件：

server{
  listen8000;
  location/ {
    includeuwsgi_params;
    uwsgi_passunix:/tmp/testFlask2.sock;
  }
  location/partners {
    rewrite^.+partners/?(.*)$ /$1 break;
    includeuwsgi_params;
    uwsgi_passunix:/tmp/testFlask1.sock;
  }
}

咱们把testFlask2项目部署在8080端口的根目录下。把提供web服务的testFlask1项目部署在/partners目录下。
但咱们的testFlask1项目并不能处理/partners/json这样的url请求。那怎么办呢？
经过rewrite^.+partners/?(.)$ /$1 break; 这一条命令，nginx能够把收到的/partners/请求所有转为/*请求后再转发给背后的真实web服务器。
这样，RESTFUL的ajax客户端程序，只须要给出特定前缀的url就能够调用任意服务器提供的RESTFUL接口了。
甚至，经过nginx的反向代理，咱们还能调用其余公司开发的网站提供的RESTFUL接口。
如，

location/sohu {
  rewrite^.+sohu/?(.*)$ /$1 break;
  includeuwsgi_params;
  proxy_passhttp://www.sohu.com/;
}

咱们就把sohu网站整个搬到咱们的8080:/sohu/目录下了，咱们的javascript就能够尽情调用其RESTFUL服务了。
顺便说一下，rewrite^.+sohu/?(.)$ /$1 break; 这句命令中，$1表示(.)这个部分。第一对()内的参数是$1，第二对()内的参数就是$2，以此类推。