CORS(Cross-Origin Resource Sharing)是一种安全策略,用来限制不同域上的资源的交互。当使用Angular Http服务请求Express REST API时,由于域名不同,可能会出现CORS问题。为了解决这个问题,可以在Express API的响应头中设置Access-Control-Allow-Origin、Access-Control-Allow-Methods和Access-Control-Allow-Headers等属性,允许请求站点的跨域访问。示例代码如下:
Express代码:
const express = require('express')
const app = express()
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Methods", "GET, PUT, POST, DELETE");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
app.get('/api/data', (req, res) => {
res.send({message: 'Express API Response'})
})
app.listen(3000, () => {
console.log('Express server started at http://localhost:3000')
})
Angular代码:
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Injectable } from '@angular/core';
@Injectable()
export class DataService {
constructor(private http: HttpClient) { }
getData(): Observable {
const headers = new HttpHeaders().set('Content-Type', 'application/json');
return this.http.get('http://localhost:3000/api/data', { headers });
}
}