vue 请求的资源上不存在“Access Control Allow Origin”标头。
时间: 2024-03-16 16:40:54 浏览: 185
这是因为浏览器实施了跨域资源共享策略(CORS),限制了从一个源站点向另一个源站点发起的跨域请求。如果你想要从一个源站点向另一个源站点发起跨域请求,需要在目标站点的响应头中添加 "Access-Control-Allow-Origin" 标头来允许跨域请求。
解决这个问题的方法有多种,下面列举两种常用的方式:
1. 服务端添加 CORS 响应头
如果你是目标站点的开发者,可以在服务端的响应头中添加以下代码:
```javascript
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
```
这将允许来自任意源站点的跨域请求。注意,这种方式会开放服务端的访问权限,如果你需要更加严格的控制访问权限,可以根据实际需求进行设置。
2. 使用代理
在开发环境下,可以通过配置代理来避免跨域问题。在 Vue CLI 3.x 中,可以在 `vue.config.js` 中进行配置:
```javascript
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
```
上面的配置表示将 `/api` 开头的请求代理到 `http://localhost:3000`,同时开启跨域支持。在客户端发起请求时,只需要将请求路径指定为 `/api` 开头即可,如下所示:
```javascript
axios.get('/api/users')
```
这样,客户端发起的请求会被代理到 `http://localhost:3000/users`,从而避免了跨域问题。
阅读全文