1、在跟目录中创建配置文件:proxy.config.json ,文件内容如下:

{
"/api": {
"target": "http://192.168.0.200:10091",
"secure": false,
"pathRewrite": {
"^/api": ""
}
}
}

2、修改 package.json 配置文件内容,内容修改如下:

"start": "ng serve --proxy-config proxy.config.json",

3、启动项目

npm run start

3、angular http 请求:

this.http.get("/api/queryitem").subscribe((res: any) => {
console.log(res);
});

请求的时候,会自动将 /api 替换成 http://192.168.0.200:10091,在浏览器调试中网络监控中显示的会依旧是网站自身的域名。

angular http 跨域访问的更多相关文章

  1. angularJS1笔记-(18)-$http及用angular实现JSONP跨域访问过程

    官网上的解释为: The $http service is a core AngularJS service that facilitates communication with the remot ...

  2. 前后端分离跨域 关于前后端分离开发环境下的跨域访问问题(angular proxy=>nginx )

    前后端分离后遇到了跨域访问的问题: angular1中使用proxy很麻烦,最后还是失败结束:最后总结3种方法如下: 本人使用的第一种方法,只是开发环境下使用很方便! 1:禁掉谷歌的安全策略(Turn ...

  3. 【AngularJs】---JSONP跨域访问数据传输

    大家会自然想到只有一个字母之差的JSON吧~ JSON(JavaScript Object Notation)和JSONP(JSON with Padding)虽然只有一个字母的差别,但其实他们根本不 ...

  4. angualr跨域访问配置

    浏览器对于javascript的同源策略的限制,例如a.cn下面的js不能调用b.cn中的js,对象或数据(因为a.cn和b.cn是不同域),所以跨域就出现了: 简单的解释就是相同域名,端口相同,协议 ...

  5. Angular http跨域

    原文:Angular http跨域 - 飞翔的小仓鼠 - 博客园 var app = angular.module('Mywind',['ui.router']); app.controller('M ...

  6. 【AngularJs】---JSONP跨域访问数据传输(JSON_CALLBACK)

    大家会自然想到只有一个字母之差的JSON吧~ JSON(JavaScript Object Notation)和JSONP(JSON with Padding)虽然只有一个字母的差别,但其实他们根本不 ...

  7. angular之跨域

    一.什么是跨域? 跨域是指一个域下的文档或者脚本去请求另一个域下的资源.(广义) 广义的跨域: 1.资源跳转:链接跳转.重定向.表单提交. 2.资源嵌入:<link>.<script ...

  8. 解决cookie跨域访问

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

  9. Angular2中对ASP.NET MVC跨域访问

    应用场景 项目开发决定使用angular2进行前后端分离开发,由我负责后端服务的开发,起初选择的是web api进行开发.对跨域访问通过API中间件+过滤器对跨域访问进行支持.开发一段后,通知需要移植 ...

随机推荐

  1. [BUUOJ记录] [BJDCTF 2nd]fake google

    本题考查python jinjia2的ssti,其实tplmap直接梭哈都可以 随便输入一个值,查看源代码就能看到一个Hint: 用下面的流程图测试一下,看看是什么模板引擎: 用Payload测试之后 ...

  2. C# 转化成 json ,特殊字符的处理

    //1.定义string jsonText0= "{\"beijing\":{\"zkkke\":\"2222\",\" ...

  3. Poi Excel 设置列宽计算公式

    int width = 40;sheet.setColumnWidth(0,252*width+323); 作者:彼岸舞 时间:2020\07\27 内容关于:工作中用到的小技术 本文来源于网络,只做 ...

  4. Hint usenl usage /*+ leading(emp,dept) usenl(emp) */

    SQL> select /*+ leading(emp,dept) usenl(emp) */ emp.*,dept.* from tb_emp03 emp,tb_dept03 dept whe ...

  5. Nginx 路由--Location的使用

    一. 路由--Location的使用 9.1. Location语法规则 语法规则: location [=|~|~*|^~] /uri/ {… } 首先匹配 =,其次匹配^~,其次是按文件中顺序的正 ...

  6. 软件定义网络实验(一)----Mininet源码安装和可视化拓扑工具

    一.实验任务 掌握 Mininet 的源码安装方法和 miniedit 可视化拓扑生成工具. 二.实验任务 使用源码安装 Mininet 的 2.3.0d6 版本,并使用可视化拓扑工具生成一个最简拓扑 ...

  7. 字符串split的用法

    拆分字符串:张三:20|李四:40|王五:40 这个可以使用两次分割,第一次使用 | 分割,放到arr数组里,然后使用循环对arr[i]进行使用:分割 public static void main( ...

  8. 性能测试1:loadrunner介绍及代理录制

    一.安装loadrunner lr安装环境要求: Lr11只支持ie9及一下,火狐30以下,不支持chrome.  操作系统只支持到win7.Lr打开时必须用管理员身份打开 在虚拟机中安装的win7, ...

  9. Idea没安装几款好用的插件,怎么风骚的写代码???

    ​ 工欲善其事,必先利其器,好的工具可以提升我们的开发效率,越来越多的Java程序员从Eclipse转到了Jetbrains家的Idea.今天给大家介绍的是我常用的十几款Idea必装的插件. ​ Ti ...

  10. H5C3综合案例

    案例:实现步骤 1. 搭建HTML结构 <section> <div></div> <div></div> <div></ ...