ionic2+angular-in-memory-web-api（内置内存服务器）+跨域问题

最新推荐文章于 2020-10-28 11:32:09 发布

程序员xiao_明

最新推荐文章于 2020-10-28 11:32:09 发布

阅读量1.6k

点赞数

分类专栏：网络文章标签： angularjs 前端

本文链接：https://blog.csdn.net/lzm931105/article/details/78501553

版权

网络专栏收录该内容

2 篇文章 0 订阅

订阅专栏

随着angularJS内置服务器官网的一条更新，我想很多前端的工程师在本地进行调试时均出现了大问题。关于17-10-5号的改动我也纠结了许久，随着对于前端以及IONIC框架的学习，经验总结如下：

Angular

之前一直没有查询官方文档，对着AngularJS教程的HTTP服务部分代码直接复制粘贴。发现不论怎么操作，返回结果都为空。官方给出的原因在于返回的data数据不再压缩在data属性之中而是直接作为主体部分返回。那么意味着我们需要对源代码进行如下修改：

//gethero_service.ts
@Injectable()
export class HeroService {

  //private headers = new Headers({'Content-Type': 'application/json'});
  private heroesUrl = 'http://localhost:810/api/heroes';  // URL to web api

    constructor(private http: Http) { }

      getHeroes(): Observable<Hero[]> {
          console.log(this.http.get(this.heroesUrl));
          this.http.get(this.heroesUrl).subscribe((res:Response) =>{console.log(res.json())});
          return this.http.get(this.heroesUrl)
                          .map(this.extractData)
                          .catch(this.handleError);
      }
     create(name: string): Observable<Hero> {
        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers });

        return this.http.post(this.heroesUrl, { name }, options)
                        .map(this.extractData)
                        .catch(this.handleError);
      }
      private extractData(res: Response) {
        let body = res.json();
        return body || { };  //主要修改的就是这一部分，之前return的是body.data由于合并之后，直接返回，所以不再需要调用内部属性；其余部分保持和官网一致。
      }

      private handleError (error: Response | any) {
        // In a real world app, you might use a remote logging infrastructure
        let errMsg: string;
        if (error instanceof Response) {
          const body = error.json() || '';
          const err = body.error || JSON.stringify(body);
          errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
        } else {
          errMsg = error.message ? error.message : error.toString();
        }
        console.error(errMsg);
        return Observable.throw(errMsg);
      }
}

在浏览器测试正常：

观察者设计模式

在各种服务实现过程中，用到的最重要的一个设计模式就是观察者设计模式。

public interface Subject{
    public void registerObserver (Observer o);
    public void removeObserver (Observer o);
    public void notifyObservers();
}

public interface Observer{
    public void update (float temp,float humidity,float pressure);
}

public interface DisplayElements{
    public void display();
}

public class WeatherData implements Subject{
    private ArrayList observers;
    private float temp;
    private float humidity;
    private float pressure;

public WeatherData(){
    observers = new ArrayList();
} 
public void registerObserver(Observer o){
    this.observers.add(o);
}
public void removeObserver (Observer o){
    int i = this.observers.indexof(o);
    this.observers.remove(i);
}
public void notifyObservers(){
    for(int i=0，i<this.observers.size();i++){
        Observer observer =(Observer)observers.get(i);
        observer.update(float temp,float humidity,float pressure);
    }
public void changes(){
    this.notifyObservers();
    }
}

public class CurrentConditionsDisplay implements Observer,DisplayElements{
    private float temp;
    private float humidity;
    private float pressure;
    private Subject weatherdata;

    public CurrentConditionsDisplay(Subject weatherdata){
        this.weatherdata = weatherdata;
        weatherdata.registerObserver(this);//最重要的一部分
}
    public void update(float temp,float humidity,float pressure){
    this.temp=temp;
    this.humidity=humidity;
    this.pressure=pressure;
    display();
}
    public void dispaly(){
    //（略）
}

}

修改之后官方测试用例在本地运行正常。这里需要补充官网对于Http各种服务两种写法的区别：

1、observable：可观察对象；是一个事件流。可以利用数组操作符对它进行处理，支持：请求——取消——新请求。

这里的结构有一条编程的黄金法则：总是把数据访问工作委托给一个支持性服务类。
Angular会把一个HeroService注入到组件的构造函数中，该组件将调用此服务来获取和保存数据。这个组件不会直接和 Angular 的 Http 客户端打交道！它既不知道也不关心我们如何获取数据，这些都被委托给了HeroService去做。getHeroes()确实可以返回 HTTP 响应对象，但这不是最佳实践。数据服务的重点在于，对消费者隐藏与服务器交互的细节。调用HeroService的组件希望得到英雄数组。它并不关心我们如何得到它们。它也不在乎这些数据从哪里来。毫无疑问，它也不希望直接和一个响应对象打交道。
在service.ts中HTTP 的 GET 方法被推迟执行。调用http.get仍然没有发送请求！这是因为可观察对象是冷的，调用subscribe()后，这个请求才会被发出。（Angular 的http服务把客户端/服务器通讯的工作委托给了一个叫做XHRBackend的辅助服务。）

  getHeroes(): Observable<Hero[]> {
    return this.http.get(this.heroesUrl)
                    .map(this.extractData)
                    .catch(this.handleError);
  }
   getHeroes() {
    this.heroService.getHeroes()
                     .subscribe(
                       heroes => this.heroes = heroes,
                       error =>  this.errorMessage = <any>error);
  }

2、promise：

遵循承诺的then(this.extractData).catch(this.handleError)模式。它是可观察对象的末端。我们不能在它上面调用map()函数或再次调用subscribe()函数。 Subscription对象的设计目的是不同的，这从它的主方法unsubscribe就能看出来。

//service.ts
getHeroes (): Promise<Hero[]> {
  return this.http.get(this.heroesUrl)
                  .toPromise()
                  .then(this.extractData)
                  .catch(this.handleError);
}
//html.ts
getHeroes() {
  this.heroService.getHeroes()
                   .then(
                     heroes => this.heroes = heroes,
                     error =>  this.errorMessage = <any>error);
}

请求头 (headers)

我们通过Content-Type头{‘Content-Type’: ‘application/json’}告诉服务器，body 是 JSON 格式的。
接下来，使用headers对象来配置options对象。 options对象是RequestOptions的新实例，该类允许你在实例化请求时指定某些设置。这样， Headers 是 RequestOptions 中的一员。

跨域请求

出于安全的考虑，网络浏览器会阻止调用与当前页面不“同源”的远端服务器的XHR(http实际调用的get/post请求函数)。所谓源就是 URI 的协议 (scheme)、主机名 (host) 和端口号 (port) 这几部分的组合。这被称为同源策略。
跨域请求的两类服务器：
现代的CORS API和一个传统的JSONP搜索 API（只允许调用get方法）

//1. 等用户停止输入
//2. 当搜索关键字变化了才搜索
//3. 对付乱序响应体
this.items = this.searchTermStream
  .debounceTime(300)
  .distinctUntilChanged()
  .switchMap((term: string) => this.wikipediaService.search(term));

跨站请求伪造攻击

在一个跨站请求伪造攻击（CSRF 或 XSRF）中，攻击者欺骗用户访问一个不同的网页，它带有恶意代码，秘密向你的应用程序服务器发送恶意请求。客户端和服务器必须合作来抵挡这种攻击。 Angular 的http客户端自动使用它默认的CookieXSRFStrategy来完成客户端的任务。

cookie（服务器生成，保存在客户端）

Cookie实际上是一小段的文本信息。客户端请求服务器，如果服务器需要记录该用户状态，就使用response向客户端浏览器颁发一个Cookie。客户端浏览器会把Cookie保存起来。当浏览器再请求该网站时，浏览器把请求的网址连同该Cookie一同提交给服务器。服务器检查该Cookie，以此来辨认用户状态。服务器还可以根据需要修改Cookie的内容。

因为HTTP请求采用的是Ajax技术，其调用的核心代码模块为XMLHttpRequest()；在请求头中，如果需要记录下client的cookie信息，需要在请求头中做如下修改：

let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers,withCredentials:true});//注意这里带了一个类似cookie的东西。
return this.http.post(this.heroesUrl,JSON.stringify({user_id:id,user_password:password}), options)
                        .map(this.extractData)
                        .catch(this.handleError);

withCredentials:true该属性是告诉浏览器，1、允许创建来自不同域的cookie信息；2、每次的跨域请求都允许带上该cookie信息。
IONIC2在浏览器中部署因为涉及到HTTP协议，故涉及到跨域问题，但当应用部署到手机上时，便采用file协议。故不存在跨域问题。本文解决跨域问题的思路是采用代理服务器，需要修改ionic.config.json文件的代理配置如下：

{
  "name": "MenuDemo",
  "app_id": "",
  "type": "ionic-angular",
  "integrations": {
    "cordova": { }
  },
   "proxies": [{  
    "path": "/services",  
    "proxyUrl": "http://192.168.4.184:8080/DomainRIS/services"  
  }]  
}

这里写图片描述
运行应用，上图中可见代理地址启动。跨域问题得到解决。

程序员xiao_明

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ionic2+angular-in-memory-web-api（内置内存服务器）+跨域问题

随着angularJS内置服务器官网的一条更新，我想很多前端的工程师在本地进行调试时均出现了大问题。关于17-10-5号的改动我也纠结了许久，随着对于前端以及IONIC框架的学习，经验总结如下：之前一直没有查询官方文档，对着AngularJS教程的HTTP服务部分代码直接复制粘贴。发现不论怎么操作，返回结果都为空。官方给出的原因在于返回的data数据不再压缩在data属性之中而是直接作为主体部分返回
复制链接

扫一扫