Q-Logo 我的学习笔记分享

Quasar框架 - 前端跨域访问后端服务器

Quasar是MIT许可的基于Vue.js的开源前端框架。Quasar开发的推荐方式是使用 Quasar CLI 。当使用Quasar 框架开发前端后端分离项目时，与普通Vue 项目类似，可以通过配置Webpack 开发服务器选项（ Webpack devServer options），来实现跨域访问后端页面 （@Vue/CLI 跨域访问配置可参考 https://www.qcloud.fun/2020/04/23/vue-cli-cors/ ）。与@Vue/CLI 项目不同的是，Quasar CLI 项目的配置文件是 quasar.conf.js，我们需要在这个文件中配置跨域访问的代理。

编辑Quasar 项目根目录下的quasar.conf.js 文件，在devServer的proxy配置中跨域 ：

// quasar.conf.js：

module.exports = {
devServer: {
proxy: {

// 将所有 '/api' 开头的请求进行代理
'/api': {
target: 'http://www.target.com:8000',
changeOrigin: true,

pathRewrite: {
/* 重写路径，请求的地址为 'http://127.0.0.1:8080/api/some/data' 时
实际上会从 'http://121.121.67.254:8185/some/data' 请求数据，即'^/api' 被替换为''，

而 'http://127.0.0.1:8080' 会被替换为target中的 'http://www.target.com:8000'
*/
'^/api': ''
},

// 如果需要处理cookie

cookieDomainRewrite: {
'www.target.com': '127.0.0.1'
}
}
}
}
}

设置完后，重启前端服务即可。

Return

© 2020 Q Cloud By Qi. All Rights Reserved 冀ICP备20003377号-1 冀公网安备 13010402001886号