angular的跨域

1.在根目录下创建一个proxy.config.json文件

proxy.config.json

{

    "/api":{

        "target":"http://192.168.1.116:3000/mock/41",//你所要跨域的地址

        "secure":false,//是否开启跨域保护 https的时候 使用该参数

        "logLevel":"debug",//日志级别的调试

        "changeOrigin":true,//是否跨域

        "pathRewirte":{//重写路径

            "^/api":""

        }

    }

}

 

2.在package,json文件中配置或是在angular.json文件中配置

packae.json

在"scripts"中的"start"的值后面加

--proxy-config proxy.config.json

在angular.json中的"serve"下的"options"下加

"proxyConfig":proxy.config.json,

”disableHostCheck“:true

 

3.在app.module.ts中引入

import { HttpClientModule } from '@angular/common/http'

在imports中注入

imports:[

　　HttpClientModule

]

 

4.在组件的 组件.component.ts中引入http

import {HttpClient} from '@angular/common/http'

在contructor中声明

constructor(private http:HttClient){

}

在ngOnInit生命周期使用

例如

contructor(private http:HttpClient){}

ngOnInit(){

　　let url = '/api/files';

　　this.http.get(url).subscribe((data:any)=>{

　　　　console.log(data);//data就是获取过来的数据

　　})

}