angular7中解决跨域问题

Love The Way You Lie 2022-02-17 03:11 149阅读 0赞

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

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

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]

#### 启动服务 ####

`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 = '/'; // 使用了代理重写`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 1]

#### 官网地址 ####

[https://angular.cn/guide/build\#proxying-to-a-backend-server][https_angular.cn_guide_build_proxying-to-a-backend-server]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]: /images/20220217/731f426fee9045f2925a1fcc4d0b219d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 1]: /images/20220217/9dc95fa01be74a249371152254ee65d4.png
[https_angular.cn_guide_build_proxying-to-a-backend-server]: https://angular.cn/guide/build#proxying-to-a-backend-server