我看一下解决跨域后的案例代码
时间: 2024-09-25 11:05:56 浏览: 20
AngularJs解决跨域问题案例详解(简单方法)
跨域请求的一个常见情况是在Node.js后端(例如Express应用)处理API,这里有一个简单的例子,展示如何在Express应用中启用CORS:
```javascript
const express = require('express');
const app = express();
// 添加CORS中间件
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', '*'); // 允许所有来源
res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
if (req.method === 'OPTIONS') {
res.status(204).end(); // 对于预检请求,无实际内容返回
} else {
next();
}
});
// 示例路由
app.get('/api/data', function(req, res) {
res.json({ data: 'Your API response here' });
});
// 启动服务器
app.listen(3000, () => {
console.log('Server running on port 3000 with CORS enabled.');
});
```
在这个例子中,当接收到一个跨域请求时,`Access-Control-Allow-*` 头部会被添加到响应中,告知浏览器该服务接受来自任何源的请求,并允许指定的HTTP方法和头信息。对于OPTIONS请求(也叫预检请求),服务器简单地返回204状态码并结束,这有助于确认客户端是否可以实际发出请求。
如果你是前端开发者,通常你会在发送异步请求时,如axios或fetch,设置合适的CORS选项:
```javascript
axios.get('/api/data', {
headers: {
'Authorization': 'Bearer your_token',
},
}).then(response => {
console.log(response.data);
}).catch(error => {
console.error(error);
});
```
注意这里的`/api/data`应该替换为你实际的目标URL。
阅读全文