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

原创已于 2022-06-22 17:35:53 修改 · 8.8k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #websocket

于 2022-01-30 01:10:20 首次发布

本文介绍浏览器同源策略导致的跨域问题及解决方法。通过配置Vue项目的devServer代理，实现前端开发环境中API请求的跨域处理。同时提供配置示例，并说明如何在部署后解决404错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

一、跨域是什么？
二、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