在Vue中解决前后端跨域问题,需要通过配置和设置代理来实现。
- 配置
在Vue的config目录下的index.js文件中,找到devServer选项,在其中添加如下代码:
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',//要代理的后台地址
ws: true, // 启用WebSocket
changeOrigin: true, // 是否启用跨域
pathRewrite: {
'^/api': '' //若后台地址的接口没有 /api,需要将此处的/api去掉
}
}
}
},
以上代码表示将访问地址中以“/api”开始的所有请求,代理到地址为“http://localhost:3000”的后台服务上。其中,参数解释如下:
- target:代理的后台地址;
- ws:是否启用WebSocket;
- changeOrigin:是否启用跨域;
- pathRewrite:路径重写规则,将“/api”去掉不传递给后台。
- 设置代理
在Vue的main.js文件中,添加以下代码:
// 设置代理
Vue.prototype.ajaxUrl = '/api';
以上代码表示将Vue的原型中的“ajaxUrl”属性设置为“/api”,即“/api”开头的请求将被代理到后台服务上。
需要注意的是:以上代码只针对Vue的“axios”插件进行设置,若使用其他插件或代码进行请求,则需要对其进行相应的修改。
通过以上配置和设置,即可解决Vue中的前后端跨域问题。