江苏龙网

  1. 主页 > 生活百科 > >

前后端分离开发，Vue 如何处理跨域问题？( 二 )

vue


相对来说 ， vue-cli2 在这里的配置还比较容易 。
 
vue-cli3 方案 
vue-cli3 去年出来后 ， 当时就尝了一把鲜 ， 但是可能 vue-cli2 用久了 ， 一时半会还不愿意接受 vue-cli3  ， 于是尝鲜完了之后就放下了 ， 没怎么用了 。直到前两天 ， 新项目尝试了一下 vue-cli3 ， 结果在请求转发这块就掉坑里了 。
一开始没多想 ， 还是 vue-cli2 里边的老办法 ， 只不过是在 vue-cli3 创建的项目的 vue.config.js 文件中进行配置 ， 文件位置如下图：

前后端分离开发，Vue 如何处理跨域问题？

文章插图
注意 ， 使用 vue-cli3 创建的 SPA 应用 ， 没有 config 目录了 ， 因此请求转发的配置我们要在 vue.config.js 这个配置文件中来配置 。
一开始我直接把 vue-cli2 中的请求转发配置拷贝过来 ， 这样发送 HTTP 请求倒是没问题 ， 但是 websocket 请求一直有问题 ， 后来经过仔细分析 ， 发现这两者在请求转发配置上有一点点差异 ， 我们来看看 vue-cli3 中的请求转发配置(这也是我这里 vue.config.js 文件的完整内容)；
let proxyObj = {};
proxyObj['/ws'] = {
ws: true,
target: "ws://localhost:8081"
};
proxyObj['/'] = {
ws: false,
target: "http://localhost:8081",
changeOrigin: true,
pathRewrite: {
'^/': ''
}
};
module.exports = {
devServer: {
host: 'localhost',
port: 8080,
proxy: proxyObj
}
}
首先我们创建一个 proxyObj 用来放各种代理对象 ， 至于代理的内容这里的则和 vue-cli2 中的没有太多差异 。要注意的是 ， HTTP 请求代理中 ， 多了一个属性 ws: false ， 用过 vue-cli3 同学可能发现了 ， 如果不加这个属性 ， 浏览器控制台会一直报连不上 socket 的错 ， 加上就没事了 。
最后在 devServer 中指定项目的 host 和 port  ， 然后再配置一下 proxy 对象就可以啦 。
这就是我们在 vue-cli3 中请求的配置 。
不过这里的配置老实说没有什么难度 ， 做过一次就会啦 ， 要是没做过 ， 头一次可能得折腾半天 。
 
结语 
很多小伙伴一直对于前后端分离开发 ， 前后端请求是如何对接的一直有疑问 ， 希望这篇文章能够给你一些启发 。如果看懂了 ， 可以点个在看或者转发支持下哦 。

【前后端分离开发，Vue 如何处理跨域问题？】


推荐阅读


上一篇：不止于虚拟化，如何实现 VMware 整体方案国产替代？

下一篇：产品权重该如何提高？