vue通过代理devServer 解决跨域问题 与 配置代理后打包部署报错404的解决方法

https://blog.csdn.net/weixin_52641692/article/details/122749428

 

文章目录
一、跨域是什么？
二、devServer的作用
三、如何解决跨域问题
四、配置代理后打包部署报错404的解决方法
一、跨域是什么？
跨域问题的出现是因为浏览器的同源策略问题，所谓同源:就是两个页面具有相同的协议（protocol），主机（host）和端口号（port），它是浏览器最核心也是最基本的功能，如果没有同源策略我们的浏览器将会十分的不安全，随时都可能受到攻击。

二、devServer的作用
如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。
devServer.proxy 可以是一个指向开发环境 API 服务器的字符串：

module.exports = {
devServer: {
proxy: 'http://localhost:4000'
}
}

这会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到http://localhost:4000。
更多的代理控制行为，也可以使用一个 path: options 成对的对象。详细情况可以去官方文档查询：https://cli.vuejs.org/zh/config/#devserver

三、如何解决跨域问题
在vue中使用proxy进行跨域的原理是：将域名发送给本地的服务器（启动vue项目的服务,loclahost:8080），再由本地的服务器去请求真正的服务器。
　
在vue开发中实现跨域：在vue项目根目录下找到vue.config.js文件（如果没有该文件则自己创建），在proxy中设置跨域

代码如下（示例）：

ws:表示WebSocket协议；changeOrigin:true;表示是否改变原域名；

module.exports = {
devServer: {
proxy: { //配置跨域
'/api': {
target: 'https://你请求的后台地址.com', //这里后台的地址模拟的;应该填写你们真实的后台接口
changOrigin: true, //表示是否改变原域名
ws: true,//表示WebSocket协议
pathRewrite: {
/* 重写路径，当我们在浏览器中看到请求的地址为：/api/…… 时
实际上访问的地址是：http://"你请求的后台地址.com/……",因为重写了 /api
*/
'^/api': ''
}
},
}
},
}

设置完成后再将你要请求的地址更改成/api；如下图所示

更改前：

更改后：

四、配置代理后打包部署报错404的解决方法
在Vue项目中配置代理后，直接进行打包部署是无法生效的，且会报错404；
　

因为编译打包后，前端页面成为了单独的静态资源。但是资源要被访问，那必然还是需要有另一个 web 服务器来装载它，这个服务器常见的就是nginx。

所以部署之后，需要：
在nginx中进行配置代理或者后端配置跨域；

借鉴的地址：

https://www.cnblogs.com/lihaohua/p/12372267.html