angular2 配置HTTP协议- 配置路由

---

背景介绍：

今天把登录页面的HTTP请求和路由配置了一下，然后通过请求到的数据进行路由跳转；

首先配置反向代理，之前用原生的时候是通过nginx来进行反向代理解决跨域的问题，但是使用ng后，需要在浏览器输入locahost:端口号  进行访问，和nginx的方式是一样的；

网上搜了一圈怎么通过nginx来代理ng解决都没有解决~  

然后查到资料说angular有自带的HTTP代理方法：

首先是代理文件的配置：

创建一个json格式的代理配置文件，里面的配置信息为，

{

“/carrots-admin-ajax/“: {   所有接口都在这个路径下面，所以这句的意思就是所有以这个路径开头的HTTP请求都通过代理进行转发

“target" : " http://dev.admin.carrots.ptteng.com/ " , target为 转发的目的地址，当页面请求满足匹配规则时，请求被转发至target指向的地址，在未配置pathRewrite的情况下，请求中的所有路径和参数会被同时转发到目的地址。

“secure" : false , 指定是否验证SSL证书，开发环境基本不会走https协议，此处默认false。

“pathRewrite": {   

"^/carrots-admin-ajax/": ""

},   转发时地址的rewrite规则。后台规则中，如果接口有路径有“/carrots-admin-ajax/“ 这层路径的话，就不需要加上这个；如果没有这层路径的话，就得配置这个规则，否则这个路径也会和参数一起发送到服务器，然后就报错啦~~  我们的后台是有这个路径的，本来没有配置这个规则的，但是做了一件蠢事~~ 在发送HTTP请求的URL的时候我把 ’/carrots-admin-ajax/a/login’也加上了~~然后路径重复，就报错咯~~  所以就加上了这个pathRewrite规则！

"changeOrigin": true,

"logLevel": "debug"

}      }

json配置文件：

配置好以后， 使用命令ng serve --proxy-config proxy.config.json启动服务，此时符合转发规则的请求就会被代理愉快的转发了。

HTTP在angular中被拆分成一个单独的模块，所以要在App.ts中从@angular/http中导入常量，

import { Headers, RequestOptions, URLSearchParams } from ‘@angular/http';

或者导入HttpModule ，这是一个便于使用的模块集合，导入以后作为依赖导入到ngmodule.imports列表中，这样就可以把上面列出来的这些模块导入组件当中；

关于这个NgModule，现在了解到的就是每个在NgModule中指定过的都会成为’模块’的一部分，如果想在别的组件中使用，必须执行这一步，可以把NgModule看成一个中转站，所有的模块和组件只有通过中转站才有可能进行互相访问，它就是一个枢纽；

导入以后进入需要使用该模板的组件当中，把需要的模板导入至组件中；

import {