vue3设置Access-Control-Allow-Origin
时间: 2023-11-08 18:03:34 浏览: 175
Access-Control-Allow-Origin
5星 · 资源好评率100%
在Vue3中设置Access-Control-Allow-Origin可以通过配置服务端来实现。以下是一种常见的方法:
1. 在Vue项目的根目录下创建一个`vue.config.js`文件(如果已存在则直接打开)。
2. 在`vue.config.js`中添加以下代码:
```javascript
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://example.com', // 设置你的后端接口地址
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
```
上述代码的含义是将以`/api`开头的请求代理到`http://example.com`,你需要将`http://example.com`替换为你的后端接口地址。
3. 在前端代码中发送请求时,将请求地址改为以`/api`开头,例如:
```javascript
axios.get('/api/some-api')
.then(response => {
console.log(response);
})
.catch(error => {
console.error(error);
});
```
这样设置后,前端发送的请求会自动带上正确的`Access-Control-Allow-Origin`头,允许跨域请求。
阅读全文