vuecors解决跨域
时间: 2023-09-12 22:11:14 浏览: 99
在 Vue.js 中解决跨域问题可以通过配置 CORS(跨域资源共享)来实现。以下是一种常见的方法:
1. 在 Vue 项目的根目录下找到 `vue.config.js` 文件,如果不存在则创建该文件。
2. 在 `vue.config.js` 文件中添加以下内容:
```javascript
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://api.example.com', // 修改成你需要跨域请求的后端接口地址
changeOrigin: true,
pathRewrite: {
'^/api': '' // 如果你的后端接口地址中没有 "/api" 前缀,可以将此处改为空字符串
}
}
}
}
}
```
上述配置将所有以 `/api` 开头的请求代理到 `http://api.example.com` 这个后端接口地址。
3. 保存文件并重新启动 Vue 开发服务器。
现在,你可以在 Vue 组件中通过发送请求到 `/api` 的方式来访问后端接口,Vue 会自动将请求转发到目标地址并返回响应结果。注意要根据实际情况修改 `target` 配置项来指向正确的后端接口地址。
这样就完成了在 Vue 中解决跨域问题的配置。如果你使用的是其他构建工具或框架,也可以类似地配置代理来解决跨域问题。
阅读全文