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");
}
}
我给的代码并不完整,这些并不重要,只看标红的部分就够了,这个示例是根据官方的例子改的。
angular5使用httpclient时解决跨域问题的更多相关文章
- 外部调用mvc的api方法时,如何解决跨域请求问题?
首先,创建一个mvc项目(包含webapi),我们模拟一个场景 1)在项目的Controller 创建一个WeiXinApiController public class WeiXinApiContr ...
- Ajax 是什么?Ajax 的交互模型?同步和异步的区别?如何解决跨域问题?以及 HTTP状态码
一.Ajax 是什么: 1. 通过异步模式,提升了用户体验 2. 优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用 3. Ajax 在客户端运行,承担了一部分本来由服务器承担的工作 ...
- ajax 、ajax的交互模型、如何解决跨域问题
1.ajax是什么? — AJAX全称为“AsynchronousJavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术. — 不是一种新技 ...
- 详解Jquery和AngularJs,Servlet中jsonp解决跨域问题(转)
众所周知,jsonp可以解决跨域问题,下面是我在查阅资料和实际项目使用后的一些总结. Jquery中jsonp的使用 //myUrl = "http://localhost:8090/api ...
- js中ajax如何解决跨域请求
js中ajax如何解决跨域请求,在讲这个问题之前先解释几个名词 1.跨域请求 所有的浏览器都是同源策略,这个策略能保证页面脚本资源和cookie安全 ,浏览器隔离了来自不同源的请求,防上跨域不安全的操 ...
- HTML5解决跨域问题
HTML5解决跨域问题 由于浏览器的同源策略,网络连接的跨域访问是不被允许的,XHR对象不能直接与非同源的网站处理数据交互.而同源指的是什么呢?同源的范畴包括:规则(协议),主机号(域名.ip等),端 ...
- 用jQuery与JSONP轻松解决跨域访问的问题【转】
原文地址:http://www.jb51.net/article/46463.htm 好在,有jquery帮忙,跨域问题似乎没那么难缠了.这次也借此机会对跨域问题来给刨根问底,结合实际的开发项目,查阅 ...
- 一步一步学习SignalR进行实时通信_3_通过CORS解决跨域
原文:一步一步学习SignalR进行实时通信_3_通过CORS解决跨域 一步一步学习SignalR进行实时通信\_3_通过CORS解决跨域 SignalR 一步一步学习SignalR进行实时通信_3_ ...
- cookie解决跨域问题
v一.前言 随着项目模块越来越多,很多模块现在都是独立部署.模块之间的交流有时可能会通过cookie来完成.比如说门户和应用,分别部署在不同的机器或者web容器中,假如用户登陆之后会在浏览器客户端写入 ...
随机推荐
- BZOJ5137[Usaco2017 Dec]Standing Out from the Herd
看了半天题 不知道怎么用SAM维护 于是借(chao)鉴(xi)的一发神犇的 只要判断这个子串之前被标记的记号(也就是他属于第几个串)和这次转移到的是否相同 如果不同就说明该子串属于多个串 直接标记- ...
- Codeforces Round #222 (Div. 1) C. Captains Mode 状压
C. Captains Mode 题目连接: http://codeforces.com/contest/377/problem/C Description Kostya is a progamer ...
- php curl伪造referer
CURL方式: SOCKET方式: file_get_contents方法: 通过上面的代码,我们就把referer地址伪装为http://www.xxxx.com,你可以写一段代码: $_SERVE ...
- easyui中combobox 验证输入的值必须为选项框中的数据
当作为提示框的方式时,combobox必须设置为允许用户输入的模式,但是当用户输入后未选择正确的数据就直接按tab或点击鼠标离开控件会导致用户输入无效的值并且通过验证,为了避免这种情况的发生我们需要对 ...
- java.lang.ClassNotFoundException: com.mysql.jdbc.Driver解决方式
昨天整理桌面的时候将桌面的一堆文件移动到F盘去了,结果导致原来建的一些项目名称所有出现红色感叹号,打开一看,原来是由于我把hibernate的那些jar包移走了.导致user library里那些ja ...
- 转 Objective-C中不同方式实现锁(二)
在上一文中,我们已经讨论过用Objective-C锁几种实现(跳转地址),也用代码实际的演示了如何通过构建一个互斥锁来实现多线程的资源共享及线程安全,今天我们继续讨论锁的一些高级用法. .NSRecu ...
- oracle extract函数
oracle Extract 函数 //oracle中extract()函数从oracle 9i中引入,用于从一个date或者interval类型中截取到特定的部分 //语法如下: EXTRA ...
- 在Windows下编译Emacs
在Windows下编译Emacs Windows下编译好的Emacs主要有两个版本,一个来自http://nqmacs.sourceforge.net/,另一个来自http://www.crasseu ...
- APACHE 2.2.8+TOMCAT6.0.14配置负载均衡
目标: 使用 apache 和 tomcat 配置一个可以应用的 web 网站,要达到以下要求: 1. Apache 做为 HttpServer ,后面连接多个 tomcat 应用实例,并进行负载均 ...
- C#中的托管与非托管
在.net 编程环境中,系统的资源分为托管资源和非托管资源. 字面理解托管,就是托付个别人管理,要的是结果,具体怎么完成的我并不关心,就像某些'牛逼'的老板“我只要结果”那样. 在.NET FRAME ...