angular2 配置HTTP协议- 配置路由

最新推荐文章于 2026-06-22 07:52:25 发布

原创最新推荐文章于 2026-06-22 07:52:25 发布 · 1.7k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#angular2

本文详细介绍了如何在Angular2中配置HTTP协议以解决跨域问题，发送HTTP请求的方法，以及如何进行路由模块的配置。通过反向代理解决跨域，详细步骤在文中给出，同时讲解了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 {

Component,

OnInit

} from '@angular/core';

import { Http, Response, Headers, RequestOptions, URLSearchParams } from '@angular/http'; /* 导入http需要使用到的模块 */

import { Router } from '@angular/router'; /* 导入路由模块 */

@Component({

selector: 'app-login-page',

templateUrl: './login-page.component.html',

styleUrls: ['./login-page.component.scss']

})

export class LoginPageComponent implements OnInit {

data = {

message: '',

}; /* 一定要先声明message字段才可以进行操作 */

constructor(public http: Http ,

private router: Router,

) {

this.http = http; /* 把实例化的http赋值，这样在下面好调用 */

}

submit(name: HTMLInputElement, password: HTMLInputElement): boolean {

const postData = `name=${name.value}&pwd=${password.value}`; /* 获取输入的值 */

// console.log(postData);

const headers = new Headers();

headers.append('Content-Type', 'application/x-www-form-urlencoded');

const options = new RequestOptions({ headers: headers }); /* 添加请求头 */

this.http.post(

'/carrots-admin-ajax/a/login', postData, options

).subscribe((res: Response) => {

this.data = res.json();

if (this.data.message === 'success') {

// console.log(this.data);

this.router.navigateByUrl('backend/main');

}

});

/* 通过在构造函数中实例的http属性来发送请求，调用this.http.post并传入URI（

因为是跨域请求，所以只要发送URI就好了），然后请求会返回一个Observable对象，然后可以使用subscribe订阅变化，

这是一种异步变成的回调函数，当http.post返回一个流时，会发出一个Response对象，所以在这个回调函数的参数中把对象实例给

一个res变量，在这个函数中用json方法提取并解析成一个 Object，然后赋值给this.data 。这里需要除以的是data一定要先声明

包括下面的用来判断进行跳转路由的 message（这是返回的数据中的一个属性），如果不提前声明字段的话就会报错！） */

// console.log(`名字为：${name.value}，密码为：${password.value}`);

return false; /* 这里返回布尔值是因为click时间呗冒泡到父级。浏览器会尝试导航这个空白链接，所以浏览器

就刷新了。价格return false 只有当前元素会被冒泡，不会再向上冒泡了 */

} /* 为button绑定事件 */

ngOnInit() {}

}

接下来就是配置路由，配置路由是找的ng官网的方法。

angular中最佳的方式就是在一个独立的顶级模块中加载和配置路由器，它只负责路由功能，意思就是从组件中独立出来了，然后根据AppModule中导入它。

这个模块类在src/app下生成： ng generate module app - routing — flat — module = app ，其中 —flat 把这个文件放进了 src/app 中，而不是单独的目录中。 —module=app 告诉 CLI 把它注册到 AppModule 的 imports 数组中。

1、通常不会在路由模块中声明组件，所以可以删除 @NgModule.declarations 并删除对 CommonModule 的引用。

2、使用 RouterModule 中的 Routes 类来配置路由器，所以还要从 @angular/router 库中导入这两个符号。

3、添加一个 @ NgModule.exports 数组，其中放上 RouterModule 。 export 导出 RouterModule 让路由器的相关指令可以在 AppModule 中的组件中使用。

配置好的路由页面为：

i mport { NgModule } from '@angular/core';

import { RouterModule, Routes } from '@angular/router';

import { LoginPageComponent } from './login-page/login-page.component'; /* 导入登录页 */

import { BackendMainComponent } from './backend-main/backend-main.component'; /* 导入后台主页 */

const routes: Routes = [