设置代理,解决Angular2跨域问题

作者: andersj | 来源:发表于2017-11-21 23:14 被阅读541次

    最近在看Angular2,由于前后端分离,且开发阶段没有部署nginx作为反向代理,导致在调试http接口时出现跨域访问(CORS)问题。搜了一下网上有资料提示可以设置代理,转发http请求,解决跨域问题。但查了不少资料,基本都没有记述所有的修改点信息。
    通过整合各资料的信息,最终设置成功,在此对所有修改点进行记录。

    一、前提

    • 本文中涉及的工具/组件基于以下版本,其他版本不能保证完全可用。
    名称 版本
    nodejs 6.11.3
    Angular(英文/中文) 5.0.1
    angular-cli 1.5.0
    • 阅读者须事先掌握的知识
      1. 能够正确安装nodejs
      2. 能够通过npm安装angluar-cli
      3. 能够使用angluar-cli创建工程
      4. 了解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状态。
    从测试的结果看,需要先启动前端服务,然后在启动后台服务,才能顺利转发

    相关文章

      网友评论

      • 随心_dcad:请问打包ng项目的时候这个代理文件该如何指定啊

      本文标题:设置代理,解决Angular2跨域问题

      本文链接:https://www.haomeiwen.com/subject/tiipkttx.html