版本:

1、后端实现跨域(php)

header("Access-Control-Allow-Origin: *");
// // 响应类型
// header('Access-Control-Allow-Methods:POST');
// // 响应头设置
// header('Access-Control-Allow-Headers:x-requested-with, content-type');

2、前端跨域

项目目录下新建proxy.config.json文件

proxy.config.json

{
"/api": {
"target": "http://localhost", // php服务路径
"logLevel": "debug",
"changeOrigin": true,
"pathRewrite": {
"^/api": ""
}
}
}

package.json

{
"name": "web",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.config.json --open", // 修改
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^8.0.0",
"@angular/cdk": "^8.0.0",
"@angular/common": "~8.0.0",
"@angular/compiler": "~8.0.0",
"@angular/core": "~8.0.0",
"@angular/forms": "~8.0.0",
"@angular/material": "^8.0.0",
"@angular/platform-browser": "~8.0.0",
"@angular/platform-browser-dynamic": "~8.0.0",
"@angular/router": "~8.0.0",
"@types/echarts": "^4.4.1",
"@types/jquery": "^3.3.29",
"chart.js": "^2.8.0",
"crypto": "^1.0.1",
"echarts": "^4.4.0",
"express": "^4.17.1",
"font-awesome": "^4.7.0",
"jquery": "^3.4.1",
"mysql": "^2.17.1",
"ngx-echarts": "^4.2.1",
"primeflex": "^1.0.0",
"primeicons": "^1.0.0",
"primeng": "^7.1.3",
"rxjs": "~6.4.0",
"tslib": "^1.9.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.800.0",
"@angular/cli": "~8.0.1",
"@angular/compiler-cli": "~8.0.0",
"@angular/language-service": "~8.0.0",
"@types/jasmine": "^3.3.16",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^8.10.59",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"node-mysql": "^0.4.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.4.3"
}
}

启动使用 npm start

访问使用 http:localhost:4200/api  就会映射到http:localhost

this.http.post('http://localhost:4200/api', {name: this.name, company: this.company, price: this.price }, {
headers: {
'Content-Type': 'application/json'
}
}).subscribe((res: any) => {
if (res.resultCode == 200) { }
// 加载成功之后做一些事
}, (err: any) => {
});

angular cli 反向代理实现跨域的更多相关文章

  1. nginx反向代理实现跨域请求

    nginx反向代理实现跨域请求 跨域请求可以通过JSONP实现,缺点是需要修改被请求的服务器端代码进行配合,稍显麻烦通过在自己服务器上配置nginx的反向代理,可以轻松实现跨域请求 思路 示例服务器A ...

  2. windows环境下 nginx+iis 反向代理解决跨域问题

    项目基本完成,是时候花点时间整理一下最近的姿势了 1 什么是跨域? 网上对于跨域的概念会有大篇幅的文章去解释,似乎有点玄乎,初学者很容易对这个概念产生恐惧,跨域其实很简单,其实只要知道一点,无法跨域访 ...

  3. nginx反向代理解决跨域问题

    跨域:浏览器从一个域名的网页去请求另一个域名的资源时,域名.端口.协议任一不同,都是跨域 . 下表格为前后端分离的域名,技术信息:   域名 服务器 使用技术 前端 http://b.yynf.com ...

  4. VUE线上通过nginx反向代理实现跨域

    1.NGINX反向代理实现跨域 VUE代码中配置参考上一篇文章 nginx配置,红色框线内: 代码: location /list { proxy_set_header X-Real-IP $remo ...

  5. 利用nginx 反向代理解决跨域问题

    说到nginx,不得不说真的很强大,也带来很多便利用于解决一些头疼的难题. 一般来说可以用来做:静态页面的服务器.静态文件缓存服务器.网站反向代理.负载均衡服务器等等,而且实现这一切,基本只需要改改那 ...

  6. 前端通过Nginx反向代理解决跨域问题

    在前面写的一篇文章SpringMVC 跨域,我们探讨了什么是跨域问题以及SpringMVC怎么解决跨域问题,解决方式主要有如下三种方式: JSONP CORS WebSocket 可是这几种方式都是基 ...

  7. nginx介绍(六) - 通过反向代理实现跨域访问

    前言 跨域访问问题, 相信很多人都遇到过, 并且都用不同的办法去解决过. 方法有很多种, 不一一叙述了. 这里主要使用nginx反向代理来解决跨域问题. 啥是跨域 假如你是百度开发人员, 在百度页面去 ...

  8. nginx反向代理解决跨域问题,使本地调试更方便

    我们可能都会遇到一个这样的问题,线上环境是https://...,本地启动了项目,域名是localhost:8000等,本地想要访问线上的接口,直接在本地调试,却提示跨域,这个时候我们可以配置ngin ...

  9. .NET 反向代理 YARP 跨域请求 CORS

    使用过 nginx 的小伙伴应该都知道,这个中间件是可以设置跨域的,作为今天的主角,同样的 反向代理中间件的 YARP 毫无意外也支持了跨域请求设置. 有些小伙伴可能会问了,怎样才算是跨域呢? 在 H ...

随机推荐

  1. 关于Python中的错误与异常,你是否了解的够仔细?

    每次版本结束都描述这着同样的错误,相似的问题,但始终没见解决.所以今天,我就来总结下Python的错误与异常! 异常与错误 错误 语法错误 可以通过IDE或者解释器给出提示的错误 opentxt('a ...

  2. Linux-Ubuntu学习笔记

    因学习Python需求,特开此贴用于记录Linux-Ubuntu操作系统的学习笔记. Linux命令-基础版 Linux命令-高级版 此贴终结了,主要用于开发过程中忘记命令时使用.

  3. react-native-linear-gradient颜色渐变

    目录 一 安装 二 使用 2.1 colors 2.2 start / end eg1:斜角渐变 eg2: 从左到右 2.2 locations eg1: 0.4是渐变的起点,0.6是渐变的终点 一 ...

  4. hdu4585Shaolin

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4585 题意: 第一个人ID为1,战斗力为1e9. 给定n,给出n个人的ID和战斗力. 每个人必须和战斗 ...

  5. [FPGA]Verilog 60s秒表计时器(最大可计时间长达9min)

    [FPGA]Verilog 60s秒表计时器 1.引述 这次的实验来自于本人本科课程数电结课时的自选题目.由于这次上传是后知后觉,学校已将小脚丫板子回收,所以在这篇文章中没法贴出代码结果的效果图了,但 ...

  6. Python之数据分析工具包介绍以及安装【入门必学】

    前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 首先我们来看 Mac版 按照需求大家依次安装,如果你还没学到数据分析,建议你 ...

  7. jwt Token验证与解析

    网上似乎没有相关代码 贴上一段Token的解析认证 [TestMethod] public void TestMethod1() { string Token = "eyJhbGciOiJI ...

  8. CapSupport 的使用

    CapSupport 是在CAP的操作上做了一些封装 目的是让事务同时执行或者同时回滚 startup services.AddCapSupport((optaion) => { optaion ...

  9. iSensor APP 之 摄像头调试 OV9655

    iSensor APP 之 摄像头调试  OV9655 iSensor app 非常适合调试各种摄像头,已测试通过的sensor有: l  OV7670.OV7725.OV9650.OV9655.OV ...

  10. Golang 怎么给WaitGroup加超时时间

    怎么给WaitGroup加超时时间呢?刚好群里有人问了我这个问题,我就把我的方法在这边贴出来了. var w = sync.WaitGroup{} var ch = make(chan bool) w ...