代理到后端服务器
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")
})
发送请求
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
}
}