angular学习9-angular中的反向代理

代理到后端服务器

src/app/proxy.conf.json

{
	"/api"{
		"target":"http://localhost:3000",
		"secure":false,
		"logLevel":debug,
		"pathreWrite":{
			"^/api":""
		}
	}
}

引入

angular.json

"serve":{
	"options":{
		"proxyConfig":"src/proxy.conf.json"
	}
}

本地服务器

const express = require('express')
const app =  express()
const router = app.Router()
router.get("/testGet",function(req,res){
	res.json('it is work')
}){}
router.post("/testPost",function(req,res){
	res.json("post is work")
})
app.use(router)
app.listen(3000,function(){
	console.log("listen port 3000 success")
})

发送请求

//app.component.ts

import{HttpClient} from '@angular/common/http'
import {OnInit} from '@angular/core'
export class AppCompnent implements OnInit{
	constructor(private http:HttpClient){
	
	}
	ngOnInit(){
		this.http.get("/api/testGet").subscribe(res=>{
			console.log(res
		})
	}
}

向/api/testGet发送请求经过了以下几个步骤:
Proxy检测到 /api ,把它代理到http://localhost:3000。
通过pathReWrite把/api路径重写为""。
请求路径就从 http://localhost:4200/api/testGet
变成了 http://localhost:3000/testGet
而http://localhost:3000/testGet
即使我们搭建的express路径的路径,它监听了3000端口。
Tips:
如果要代理的目标不再localhost下,需要在proxy.conf.json
中添加

{
	"/api":{
		"target":"https://baidu.com",
		"changeOrigin":true
		}
}

猜你喜欢

转载自blog.csdn.net/gexiaopipi/article/details/89190984
今日推荐