在 Angular 16 项目中，当我们从项目调用 REST Api 时，它会显示错误，但是当我们直接从 POSTMAN 或浏览器调用时，它会显示数据

Question

1. Angular 16项目服务数据调用

getData() { this.regionService.getAllRegion().subscribe(data => { this.regionValue = 数据；

})}

2. 服务数据调用rest Api

getAllRegion(): Observable<RegionI> {      const regionUrl = this.serverUrl + '/getRegion';     return this.httpClient.get<RegionI>(regionUrl); // return an observable

}

3. 数据类型列表 Observable

    export interface RegionI {
   
        region_name: string;
        created_by: string;
        region_code: string;
        region_id: string;
        created_date: Date;
        status: boolean;
   
   }
   

4. json数据调用结果 [{“created_date”：“2023-11-27T01：59：35.280Z”，“_id”：“6557c94afa43c40a54b3157d”，“region_name”：“非洲”，“created_by”：“TINKU”，“region_code”：“AFR” ,"region_id":"RE3","status":true}]

5. 这将在邮递员中显示，也可以在网络浏览器中直接调用

6. 上面的代码使用 json 服务器完美运行，结果相同

7. NodeJs 代码写为

   api.get('/getRegion',function( req , res ){

    Region.find().then((data) => {
   
        if(!data) {
            console.log(!data);
            res.json("no data found");
        }
        else {
   
            res.status(200).json(data);
            console.log(data);
        }
   

   }）； });

8. 网址调用 公共静态Live_Web_Server_Path = 'http://localhost:9003'; 'REST Api 服务器节点、Express、mongo Db' 公共静态 json_Web_Server_Path = 'http://localhost:3000'; “json 服务器”

9. Angular 16 项目使用 JSON_SERVER 运行良好，但当 REST API 从节点服务器调用时

然后作为 Observable 返回，但不会获取数据

但使用邮递员或网络浏览器显示直接 REST API 调用结果 [{“created_date”：“2023-11-27T01：59：35.280Z”，“_id”：“6557c94afa43c40a54b3157d”，“region_name”：“非洲”，“created_by”：“TINKU”，“region_code”：“AFR” ,"region_id":"RE3","status":true}]

从项目调用 api 时显示错误

从源“http://localhost:4200”访问“http://localhost:9003/master/getRegion”处的 XMLHttpRequest 已被 CORS 策略阻止：不存在“Access-Control-Allow-Origin”标头所请求的资源。 区域.组件.ts:50

   GET http://localhost:9003/master/getRegion net::ERR_FAILED 200 (OK)

region.component.ts:50 ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: '未知错误', url: 'http://localhost:9003/master/getRegion', ok: false, ...}错误：

Answer 1

在服务器端为路由启用cors

var cors = require('cors');

var corsOptions = {
  origin: 'http://localhost:9003',
  optionsSuccessStatus: 200
};

// Allow all
app.use(cors(corsOptions));

api.get('/getRegion',function( req , res ){
 res.set('Access-Control-Allow-Origin', 'http://localhost:9003');

 Region.find().then((data) => {

     if(!data) {
         console.log(!data);
         res.json("no data found");
     }
     else {

         res.status(200).json(data);
         console.log(data);
     }
}); 
});

或通过代理配置启用cors