跨域问题的环境:

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

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

angular5使用httpclient时解决跨域问题的更多相关文章

  1. 外部调用mvc的api方法时,如何解决跨域请求问题?

    首先,创建一个mvc项目(包含webapi),我们模拟一个场景 1)在项目的Controller 创建一个WeiXinApiController public class WeiXinApiContr ...

  2. Ajax 是什么?Ajax 的交互模型?同步和异步的区别?如何解决跨域问题?以及 HTTP状态码

    一.Ajax 是什么: 1. 通过异步模式,提升了用户体验 2. 优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用 3. Ajax 在客户端运行,承担了一部分本来由服务器承担的工作 ...

  3. ajax 、ajax的交互模型、如何解决跨域问题

    1.ajax是什么? — AJAX全称为“AsynchronousJavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术. — 不是一种新技 ...

  4. 详解Jquery和AngularJs,Servlet中jsonp解决跨域问题(转)

    众所周知,jsonp可以解决跨域问题,下面是我在查阅资料和实际项目使用后的一些总结. Jquery中jsonp的使用 //myUrl = "http://localhost:8090/api ...

  5. js中ajax如何解决跨域请求

    js中ajax如何解决跨域请求,在讲这个问题之前先解释几个名词 1.跨域请求 所有的浏览器都是同源策略,这个策略能保证页面脚本资源和cookie安全 ,浏览器隔离了来自不同源的请求,防上跨域不安全的操 ...

  6. HTML5解决跨域问题

    HTML5解决跨域问题 由于浏览器的同源策略,网络连接的跨域访问是不被允许的,XHR对象不能直接与非同源的网站处理数据交互.而同源指的是什么呢?同源的范畴包括:规则(协议),主机号(域名.ip等),端 ...

  7. 用jQuery与JSONP轻松解决跨域访问的问题【转】

    原文地址:http://www.jb51.net/article/46463.htm 好在,有jquery帮忙,跨域问题似乎没那么难缠了.这次也借此机会对跨域问题来给刨根问底,结合实际的开发项目,查阅 ...

  8. 一步一步学习SignalR进行实时通信_3_通过CORS解决跨域

    原文:一步一步学习SignalR进行实时通信_3_通过CORS解决跨域 一步一步学习SignalR进行实时通信\_3_通过CORS解决跨域 SignalR 一步一步学习SignalR进行实时通信_3_ ...

  9. cookie解决跨域问题

    v一.前言 随着项目模块越来越多,很多模块现在都是独立部署.模块之间的交流有时可能会通过cookie来完成.比如说门户和应用,分别部署在不同的机器或者web容器中,假如用户登陆之后会在浏览器客户端写入 ...

随机推荐

  1. 如何离线安装GitHub for windows?

    此文献给xp用户和被墙用户. 今天群里(GitHub家园 225932282)有人说GitHub for windows安装不上,错误提示如下,看了下感觉应该是被墙了,我试了试下面的网址,没问题,所以 ...

  2. Codeforces Round #350 (Div. 2) D1. Magic Powder - 1 二分

    D1. Magic Powder - 1 题目连接: http://www.codeforces.com/contest/670/problem/D1 Description This problem ...

  3. spring---transaction(1)---源代码分析(事务的拦截器TransactionInterceptor)

    写在前面: 先了解一下spring的事务.分为分明式事务管理和注解式事务管理,对于前期的事务,spring会通过扫描拦截对于事务的方法进行增强(以后讲解). 若果目标方法存在事务,spring产出的b ...

  4. js:深入prototype(上:内存分析)

    /**  * 下面演示了通过原型的创建方式,使用基于原型的创建能够将属性和方法  * 设置为Person专有的,不能通过window来调用.  * 原型是javascript中的一个特殊对象,当一个函 ...

  5. linux系统编程:线程原语

    线程原语 线程概念 线程(thread),有时被称为轻量级进程(Lightweight Process,LWP).是程序运行流的最小单元.一个标准的线程由线程ID.当前指令指针(PC),寄存器集合和堆 ...

  6. web office apps 在线预览实践

    摘要 在一些项目中需要在线预览office文档,包括word,excel,ppt等.达到预览文档的目的有很多方法,可以看我之前总结,在线预览的n种方案: [Asp.net]常见word,excel,p ...

  7. iOS中bundle的意义

    什么是bundle? bundle就是一个文件夹,按照一定标准组织的目录结构.每个iOS APP至少有一个main bundle,这个main bundle包含了app的二进制代码及任何你用到的资源, ...

  8. java基础之hashcode理解及hashmap实现原理及MD5

    HashCode值 1. hashcode值是int的,64位.int hashCode(). 2. java object类默认的hashcode()计算方法是根据对象的内存地址来计算的.所以可由此 ...

  9. Extjs Gridpanel 动态加载

    colMArray_ljdj=[smQd, {header : /*"代销机构代码"*/"机构", dataIndex : "dxjgdm" ...

  10. TPL中限制进程数量

    The MaxDegreeOfParallelism sets the maximum number of simultaneous threads that will be used for the ...