- 当前位置：首页 >应用开发 >前后端分离开发，Vue 如何处理跨域问题？
前后端分离开发，Vue 如何处理跨域问题？
发布时间：2025-11-05 12:06:05 来源：云智核 作者：IT科技类资讯
老实说，前后前后端分离其实并不难，端分前后端分离之后，离开理跨Java 工程师只需要专心写页面就可以了，何处在我看来工作可比以前轻松多了。域问
如果让一个专业的前后前端工程师来写前端页面，其实也不难，端分Vue 算是离开理跨三大前端框架中最容易上手的了。
那怎么样就有难度了呢？何处
让同一个人既写前端又写后端！
我知道很多小伙伴在这里总是域问想不通，很多人问的前后最多的问题就是前后端是怎么通信的？跨域是怎么解决的？刚好松哥最近在这里踩了个坑，就来和大家聊一聊这个问题。端分
不是离开理跨跨域的跨域如果你直接在项目中引入 Vue，像用 jQuery 那样用 Vue，何处那没什么问题，域问你应该也不会有跨域的疑问。但是如果你做的是单页面应用(SPA)，云服务器提供商那么必然会有这样的疑问，跨域问题怎么搞！
因为在单页面应用中，前端项目可以单独通过 node 启动，它单独占用一个端口，后端项目启动后也是另外一个端口，此时从前端发送请求到后端，由于两者处于不同的端口之上，因此必然存在一个跨域问题。
但是大家想想，这个跨域有可能只是在开发环境下存在，生产环境下有可能不存在。因为当项目开发完成之后，我们对前端项目进行打包，打包后部署在 Nginx 上或者直接拷贝到后端项目中运行都可以（一般使用前者）：
如果是前者，后端接口也通过 Nginx 进行映射，这个时候就不会存在跨域问题了如果是后者，那就更简单了，部署的时候前后端代码放在一起，更不会有跨域问题了因此，解决这个所谓的 “跨域” 问题，我们不能按照传统的思路来（通过 JSONP 或者 CORS），因为在项目真正上线后，源码库所谓的跨域问题可能就会消失。
那么这个问题怎么解决呢？我们可以在前端 nodejs 中配置请求转发。
配置请求转发其实不难，不过 vue-cli2 和 vue-cli3 的写法稍有不同，这也是我前一段时间踩坑的地方。
vue-cli2 方案如果我们使用的 vue-cli2 来创建的 SPA 应用，创建成功之后，在项目的 config 目录下有一个 index.js 文件，在这个文件中，我们可以进行请求转发配置，如下图：
配置内容如下：
module.exports = {
dev: {
// Paths
assetsSubDirectory: static,
assetsPublicPath: /,
proxyTable: {
/: {
target: http://localhost:8082,
changeOrigin: true,
pathRewrite: {
^/:
}
},
/ws/*: {
target: ws://127.0.0.1:8082,
ws: true
}
},
...
}proxyTable 就是我们配置的转发路由表。这个里边我们一共配置了两个规则：
第一个是拦截所有 HTTP 请求，将之转发到后端服务器上（前端默认端口是 8080），后端的端口是 8082。至于拦截规则/ ，大家可以自定义，根据实际情况来写，例如所有的 HTTP 请求都有一个统一的前缀 api，香港云服务器那么这里就可以写/api。第二个是拦截所有的 websocket 请求进行转发，我这里给所有的 websocket 请求取了一个统一的前缀/ws如果你有更多的拦截规则，继续在这里配置就可以了，这些配置只会在开发环境下生效，当项目编译打包时，这些配置是不会打包进去的，也就是说，项目发布的时候，这些配置是失效的，这个时候我们通过 Nginx 或者将前端代码拷贝到后端，就可以解决生产环境下的跨域问题了（相当于开发时候的跨域在生产环境下不存在）。
相对来说，vue-cli2 在这里的配置还比较容易。
vue-cli3 方案vue-cli3 去年出来后，当时就尝了一把鲜，但是可能 vue-cli2 用久了，一时半会还不愿意接受 vue-cli3 ，于是尝鲜完了之后就放下了，没怎么用了。直到前两天，新项目尝试了一下 vue-cli3，结果在请求转发这块就掉坑里了。
一开始没多想，还是 vue-cli2 里边的老办法，只不过是在 vue-cli3 创建的项目的 vue.config.js 文件中进行配置，文件位置如下图：
注意，使用 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 中请求的配置。
不过这里的配置老实说没有什么难度，做过一次就会啦，要是没做过，头一次可能得折腾半天。
结语很多小伙伴一直对于前后端分离开发，前后端请求是如何对接的一直有疑问，希望这篇文章能够给你一些启发。
- 苹果电脑Mac安装错误的解决方案（探索Mac安装过程中常见错误以及应对策略）
- DNS域名服务器，我们使用免费WiFi真的安全吗？
- 物联网如何改变访问控制系统?
- 物联网之数据分析建模
- LEPHONET708手机综合评测（领先技术、出色性能，LEPHONET708手机是你的最佳选择）
- 面向未来的 IIoT：开放硬件标准如何防止过时
- 物联网小知识：物联网平台中的“物模型”功能是什么，有什么作用？
- NIO与BIO的区别、NIO的运行原理和并发使用场景
- Mumble是一个自由开源的VoIP应用，在新的 BSD 许可证下发布，主要面向的用户群体是游戏玩家。运行起来类似于TeamSpeak和Ventrilo，用户通过连接到同一个服务器来实现相互通讯。Mumble提供了如下的漂亮特性: 低延迟，这点对游戏相当重要 提供游戏中的可视插件，通过它你可以知道是谁正在和你通话并定位他们的位置 交谈内容经过加密的，能够保护你的隐私和安全 界面简单易于上手 稳定高效的使用你的服务器资源安装 MumbleMumble已经流行开来，进入了许多linux主流发行版的软件仓库，这使它安装起来更加的方便。若你使用的是Ubuntu那么使用apt-get就能安装，详细命令如下：复制代码代码如下:$ sudo apt-get install mumble-server 这条命令将会在你的服务器上安装服务端（亦称Murmur）。配置 Mumble运行以下命令启动Mumble：复制代码代码如下: $ sudo dpkg-reconfigure mumble-server会弹出以下一些问题：选择“是”让服务器开机时自动启动mumble，接着它会询问你是否运行高优先级模式以保持低延迟，为了让它保持最佳性能这是个不错的主意。接着为你刚安装好的mumble服务端设管理员用户的密码，记住这个密码，它会在登录时用到。安装 Mumble 客户端客户端可以安装到许多的主流操作系统中，例如windows，mac和linux。我们将教你在Ubuntu linux上安装和配置，你可以使用软件中心也可以用命令安装客户端：复制代码代码如下: $ sudo apt-get install mumble第一次运行mumble时，配置向导将会帮助你配置音频的输入输出，使其能在客户端上保持最好的效果。第一次同样也会询问你要使用的是什么声音设备和麦克风：然后它将帮你校准设备：因为mumble会帮你加密所有的通讯内容所以它会要求你创建证书：完成配置向导后你就能添加第一个服务器，连接对话框如下图所示：首先输入一个标签，名字任意因为那只不过是为了记住服务器的，然后输入服务器的地址和端口，最后使用“SuperUser”作为用户名，而密码则是你配置mumble服务器端时输入的密码。现在你可以连接到服务器了，在联网玩游戏或与你好友、队友聊天开黑时享受这些功能给你带来的乐趣吧！
- 到2028年，全球蜂窝物联网设备数量将翻一倍
随便看看
- Copyright © 2025 Powered by 前后端分离开发，Vue 如何处理跨域问题？,云智核 滇ICP备2023006006号-28sitemap