angular7中解决跨域问题

在前后端分离开发的过程中,跨域问题是不可避免的。
在angular中如何解决跨域问题呢?和在vue中类似,同样适用代理。

1. 在angular项目根目录下创建proxy.config.json文件:

{
    "/api": {
        "target": "http://192.168.1.114:8041/", // 代理的地址
        "secure": false,
        "pathRewrite": {"^/api": ""}
    }
}

2. 在angular.json文件中添加如下代码

angular7中解决跨域问题_第1张图片

启动服务

ng serve

请求使用

// ajax数据测试 post
    doPost() {
        const obj = {
            LogID: 'zhangabo',
            OldPwd: '123456',
            NewPwd: '123456'
        };
        this.http.doPost('api/ActionApi/UserInfo/ChangePassword', obj).subscribe((data: any) => {
            console.log(data, 'post请求');
        });
    }

doPost方法

这个只需要加 /,不需要完全api地址
public api = '/'; // 使用了代理重写
angular7中解决跨域问题_第2张图片

官网地址

https://angular.cn/guide/build#proxying-to-a-backend-server

你可能感兴趣的:(angular)