版本:

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. 华为eNSP路由交换-静态路由

    静态路由 一. 静态路由及默认路由基本配置 1.1实验内容 在由三台路由器所组成的简单网络中,R1和R3各连着一台PC,现在要求能够实现PC-1和PC-2之间的通信.本实验将通过配置基本的静态路由和默 ...

  2. RestTemplate常用的get和post带参数请求

    在RestTemplate提供的方法中,有一个参数就是目标URL,参数是跟在后面的一个数量可变参数,但是在这里就有个问题,这个方法怎么知道我传的参数值是对应在目标接口的哪个参数的呢: public & ...

  3. 【CentOS7】开发环境配置

    [CentOS7]开发环境配置 目录 ===================================================================== 1.安装openjdk ...

  4. 【VUE】数组

    [VUE]常用函数 转载:https://www.cnblogs.com/yangchongxing/p/10637087.html 目录 ============================== ...

  5. 2019年Spring Boot面试都问了什么?快看看这22道面试题!

    Spring Boot 面试题 1.什么是 Spring Boot? 2.Spring Boot 有哪些优点? 3.什么是 JavaConfig? 4.如何重新加载 Spring Boot 上的更改, ...

  6. Jrules sample server 配置

    配置文件位置:[Jrules install location]/shared/tools/AppServerCommunityEdition/var/config

  7. 稳定易用的 Django 分页库,完善分页功能

    作者:HelloGitHub-追梦人物 文中所涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 在 通过 Django Pagination 实现简单分页 中,我们实现了一个简单的 ...

  8. SoC的软件开发流程,主要包含一些Linux下的操作命令

    该笔记主要记录SoC的软件开发流程,主要包含一些Linux下的操作命令 1. 编写design file .c .h 2. 编写makefile    可执行文件名,交叉编译环境,compile fl ...

  9. EFCore连接池的坑 差点晚年不保

    长话短说 上个月公司上线了一个物联网数据科学项目,我主要负责前端接受物联网事件,并提供 参数下载. webapp 部署在Azure云上,参数使用Azure SQL Server存储. 最近从灰度测试转 ...

  10. django基础之day08,ajax结合sweetalert的使用

    models.py文件 from django.db import models class User(models.Model): username=models.CharField(max_len ...