在Angular中使用HttpClient和Express中的CORS middleware解决跨域问题
示例代码:
在Angular中:
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
@Injectable()
export class DataService {
constructor(private http: HttpClient) { }
getSomeData() {
return this.http.get('http://localhost:3000/api/data');
}
}
在Express中:
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());
app.get('/api/data', function(req, res) {
res.send({ message: 'Server says hello!' });
});
app.listen(3000, function() {
console.log('Server listening on port 3000');
});
在以上示例代码中,在Angular服务中使用HttpClient发送GET请求来从Express服务器获取数据。使用Express的CORS middleware来允许跨域请求,然后简单地发送响应。这些代码可以在本地开发环境中工作,并且可以根据需要进行修改。