最近在看Angular2,由于前后端分离,且开发阶段没有部署nginx作为反向代理,导致在调试http接口时出现跨域访问(CORS)问题。搜了一下网上有资料提示可以设置代理,转发http请求,解决跨域问题。但查了不少资料,基本都没有记述所有的修改点信息。
通过整合各资料的信息,最终设置成功,在此对所有修改点进行记录。
一、前提
- 本文中涉及的工具/组件基于以下版本,其他版本不能保证完全可用。
名称 | 版本 |
---|---|
nodejs | 6.11.3 |
Angular(英文/中文) | 5.0.1 |
angular-cli | 1.5.0 |
- 阅读者须事先掌握的知识
- 能够正确安装nodejs
- 能够通过npm安装angluar-cli
- 能够使用angluar-cli创建工程
- 了解angluar自带的Http或HttpClient的使用方法
二、接口调用代码示例
- 封装的HTTP工具类示例
import {HttpClient, HttpHeaders, HttpParams, HttpResponse} from "@angular/common/http";
import {Observable} from "rxjs/Observable";
import {Injectable} from "@angular/core";
@Injectable()
export class HTTP {
constructor(private http: HttpClient) {
}
get<T>(url:string, params: HttpParams, token?: string): Observable<T> {
let headers: HttpHeaders = new HttpHeaders();
headers.append('Content-type', 'application/x-www-form-urlencoded; charset=utf-8');
headers.append('x-auth-token', token);
return this.http.get<T>(url, {
params: params,
headers: headers,
});
}
post<T>(url:string, params: HttpParams, token?: string): Observable<T> {
let headers: HttpHeaders = new HttpHeaders();
headers.append('Content-type', 'application/x-www-form-urlencoded; charset=utf-8');
headers.append('x-auth-token', token);
return this.http.post<T>(url, params, {
headers: headers
});
}
}
- 调用代码
import { Injectable } from '@angular/core';
import {HttpParams} from '@angular/common/http';
import {Observable} from "rxjs/Observable";
import {Response} from "../../model/response/response";
import {HTTP} from "../../util/http";
@Injectable()
export class AuthService {
constructor(private http: HTTP) { }
/**
* 用户登录
* @param {string} name
* @param {string} password
* @returns {Observable<Response>}
*/
login(name: string, password: string): Observable<Response> {
const params = new HttpParams()
.set('name', name)
.set('password', password);
return this.http.post<Response>('/api/user/login', params);
}
}
- 后台代码省略
三、添加代理配置文件
在工程根目录下添加json格式代理配置文件,名字可以自定,建议使用proxy.config.json
{
"/api/*": {
"target": "http://localhost:8080",
"secure": false,
"pathRewrite": {"/api" : ""}
}
}
根据前期的设计,所有接口调用均在/api
路径下如示例代码中的/api/user/login
,因此此处配置代理匹配规则为/api/*
,即所有以/api
开头的http请求,均通过代理进行转发。
target
:转发的目的地址,当页面请求满足匹配规则时,请求被转发至target
指向的地址,在未配置pathRewrite
的情况下,请求中的所有路径和参数会被同时转发到目的地址。
secure
:指定是否验证SSL证书,开发环境基本不会走https协议,此处默认false。
pathRewrite
:转发时地址的rewrite规则。我的后台接口中,所有接口的路径中并没有/api
这层路径,因此需要通过"pathRewrite": {"/api" : ""}
将请求中的/api
删除。
本人非专业的前端开发,对前端的工具链谈不上熟悉,最开始在网上查proxy的资料时,以为这个proxy是Angular提供的功能,后来在stack overflow看到一篇回答,才发现这个proxy其实是webpack提供的功能。
详细设置可参考以下文档:
四、开启proxy启动服务
使用命令ng serve --proxy-config proxy.config.json
启动服务,此时符合转发规则的请求就会被代理愉快的转发了。
五、后记
实际使用过程中,发现代理转发有时正常,有时请求会一直处理pending
状态。
从测试的结果看,需要先启动前端服务,然后在启动后台服务,才能顺利转发。
网友评论