angular4使用httpclient时解决跨域问题

标签：访问   tpc   问题   oca   现在   数据接口   cto   service   comm   

跨域问题的环境：

在本地开发时，使用命令行ng s开启服务，访问地址为http://localhost:4200

假设调用数据接口的服务地址为http://localhost:8088/api/data.action

解决跨域问题的方法：

在angular4项目根目录下创建文件proxy.config.json，文件内容为：

{
  "/api":{
    "target":"http://localhost:8088"
  }
}

那么使用命令行 ng s --proxy-config proxy.config.json重新开启服务后，就把接口服务代理过来了，就可以使用

http://localhost:4200/api/data.action来请求接口服务了，那么问题就迎刃而解了，因为现在不跨域了。

网上很多人问为啥用这种办法还是解决不了，那是因为开启服务的方法不对，要加参数，注意我上面标红的地方。

使用httpclient请求数据的相关代码：

hero.service.ts

import { Injectable } from ‘@angular/core‘;

import { Observable, of } from ‘rxjs‘;
import { HttpClient, HttpHeaders } from ‘@angular/common/http‘;
 
import { Hero } from ‘../data/hero‘;

@Injectable({
  providedIn: ‘root‘
})
export class HeroService {

  constructor(private http: HttpClient) { }
  
    getHeroes(): Observable<Hero[]> {
         return this.http.get<Hero[]>("/api/data.action");
  }
}

我给的代码并不完整，这些并不重要，只看标红的部分就够了，这个示例是根据官方的例子改的。

angular4使用httpclient时解决跨域问题

标签：访问   tpc   问题   oca   现在   数据接口   cto   service   comm   

原文地址：https://www.cnblogs.com/modou/p/9426626.html