angular cli 反向代理实现跨域
版本:
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 反向代理实现跨域的更多相关文章
- nginx反向代理实现跨域请求
nginx反向代理实现跨域请求 跨域请求可以通过JSONP实现,缺点是需要修改被请求的服务器端代码进行配合,稍显麻烦通过在自己服务器上配置nginx的反向代理,可以轻松实现跨域请求 思路 示例服务器A ...
- windows环境下 nginx+iis 反向代理解决跨域问题
项目基本完成,是时候花点时间整理一下最近的姿势了 1 什么是跨域? 网上对于跨域的概念会有大篇幅的文章去解释,似乎有点玄乎,初学者很容易对这个概念产生恐惧,跨域其实很简单,其实只要知道一点,无法跨域访 ...
- nginx反向代理解决跨域问题
跨域:浏览器从一个域名的网页去请求另一个域名的资源时,域名.端口.协议任一不同,都是跨域 . 下表格为前后端分离的域名,技术信息: 域名 服务器 使用技术 前端 http://b.yynf.com ...
- VUE线上通过nginx反向代理实现跨域
1.NGINX反向代理实现跨域 VUE代码中配置参考上一篇文章 nginx配置,红色框线内: 代码: location /list { proxy_set_header X-Real-IP $remo ...
- 利用nginx 反向代理解决跨域问题
说到nginx,不得不说真的很强大,也带来很多便利用于解决一些头疼的难题. 一般来说可以用来做:静态页面的服务器.静态文件缓存服务器.网站反向代理.负载均衡服务器等等,而且实现这一切,基本只需要改改那 ...
- 前端通过Nginx反向代理解决跨域问题
在前面写的一篇文章SpringMVC 跨域,我们探讨了什么是跨域问题以及SpringMVC怎么解决跨域问题,解决方式主要有如下三种方式: JSONP CORS WebSocket 可是这几种方式都是基 ...
- nginx介绍(六) - 通过反向代理实现跨域访问
前言 跨域访问问题, 相信很多人都遇到过, 并且都用不同的办法去解决过. 方法有很多种, 不一一叙述了. 这里主要使用nginx反向代理来解决跨域问题. 啥是跨域 假如你是百度开发人员, 在百度页面去 ...
- nginx反向代理解决跨域问题,使本地调试更方便
我们可能都会遇到一个这样的问题,线上环境是https://...,本地启动了项目,域名是localhost:8000等,本地想要访问线上的接口,直接在本地调试,却提示跨域,这个时候我们可以配置ngin ...
- .NET 反向代理 YARP 跨域请求 CORS
使用过 nginx 的小伙伴应该都知道,这个中间件是可以设置跨域的,作为今天的主角,同样的 反向代理中间件的 YARP 毫无意外也支持了跨域请求设置. 有些小伙伴可能会问了,怎样才算是跨域呢? 在 H ...
随机推荐
- 华为eNSP路由交换-静态路由
静态路由 一. 静态路由及默认路由基本配置 1.1实验内容 在由三台路由器所组成的简单网络中,R1和R3各连着一台PC,现在要求能够实现PC-1和PC-2之间的通信.本实验将通过配置基本的静态路由和默 ...
- RestTemplate常用的get和post带参数请求
在RestTemplate提供的方法中,有一个参数就是目标URL,参数是跟在后面的一个数量可变参数,但是在这里就有个问题,这个方法怎么知道我传的参数值是对应在目标接口的哪个参数的呢: public & ...
- 【CentOS7】开发环境配置
[CentOS7]开发环境配置 目录 ===================================================================== 1.安装openjdk ...
- 【VUE】数组
[VUE]常用函数 转载:https://www.cnblogs.com/yangchongxing/p/10637087.html 目录 ============================== ...
- 2019年Spring Boot面试都问了什么?快看看这22道面试题!
Spring Boot 面试题 1.什么是 Spring Boot? 2.Spring Boot 有哪些优点? 3.什么是 JavaConfig? 4.如何重新加载 Spring Boot 上的更改, ...
- Jrules sample server 配置
配置文件位置:[Jrules install location]/shared/tools/AppServerCommunityEdition/var/config
- 稳定易用的 Django 分页库,完善分页功能
作者:HelloGitHub-追梦人物 文中所涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 在 通过 Django Pagination 实现简单分页 中,我们实现了一个简单的 ...
- SoC的软件开发流程,主要包含一些Linux下的操作命令
该笔记主要记录SoC的软件开发流程,主要包含一些Linux下的操作命令 1. 编写design file .c .h 2. 编写makefile 可执行文件名,交叉编译环境,compile fl ...
- EFCore连接池的坑 差点晚年不保
长话短说 上个月公司上线了一个物联网数据科学项目,我主要负责前端接受物联网事件,并提供 参数下载. webapp 部署在Azure云上,参数使用Azure SQL Server存储. 最近从灰度测试转 ...
- django基础之day08,ajax结合sweetalert的使用
models.py文件 from django.db import models class User(models.Model): username=models.CharField(max_len ...