zoukankan      html  css  js  c++  java
  • angular5使用httpclient时解决跨域问题

    跨域问题的环境:

    在本地开发时,使用命令行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");
      }
    }

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

  • 相关阅读:
    Unity 状态机切换
    Unity3d 血条脚本
    最简单的Python群聊
    EFCore 多字段排序分页法
    搭建react+redux+vscode+typescript开发环境
    C# 4格A*自动寻径
    Sql删除表中多余的重复记录
    ABP弹出提醒用户的错误信息
    百度地图 驾车路线编辑粗浅实例
    .NetCore3.1 WebApi中Swagger配置
  • 原文地址:https://www.cnblogs.com/modou/p/9426626.html
Copyright © 2011-2022 走看看