angular5 接口跨域请求配置

时间:2024-01-21 14:11:39

首先,咱们前端在做angular5项目的时候,避免不了的要进行数据请求,怎么才能请求到数据呢?

第一步:引入模块:

    在app.module.ts里面引入HttpClientModule,然后在组件的ts文件里面引入HttpClient模块。

第二步:配置:

    首先在根目录中添加 proxy.config.json,写入内容

    {

      "/api":{

        "target":"http://localhost:8080" //此处设置你的数据所在的域名和端口

      }

    }

    然后找到 package.json ,修改启动模式,找到scripts内容:

    "scripts":{

      "ng":"ng",

      "start":"ng serve --proxy-config proxy.config.json"

    }

    修改之后重新启动项目,使用启动命令为:npm run start。

    然后,就可以使用HttpClient模块处理数据了,调用的时候接口形式写成: "/api/接口地址"即可,此刻的\'/api\'就是你接口所在的服务器地址。

    以上是关于angular5的请求数据配置。