Vite 代理与 Vue 配置代理：解决前端跨域的利器

前端

2023-05-24 19:46:03

代理配置：轻松解决跨域难题

跨域的本质

在前端开发中，跨域是一个常见的拦路虎。跨域是指浏览器出于安全考虑，禁止不同源的网页互相请求资源。源由协议、域名和端口组成，只要三者有任何一个不同，就视为跨域。

代理的原理

代理是一种通过中间服务器间接访问其他服务器的方式。当我们使用代理访问跨域资源时，请求会先发送到代理服务器，再由代理服务器转发到目标服务器。这样一来，浏览器就不会检测到跨域，从而成功获取资源。

Vite 中的代理配置

Vite 是一个现代的前端构建工具，它支持代理配置，可以轻松解决跨域问题。在 Vite 配置文件中，我们可以使用 devServer.proxy 属性来配置代理。

devServer: {
  proxy: {
    '/api': {
      target: 'http://localhost:8080',
      changeOrigin: true,
      secure: false,
    },
  },
},

在上面的配置中，我们将 '/api' 路径下的请求代理到 'http://localhost:8080' 地址。changeOrigin 属性表示是否修改请求头中的 Origin 字段，设置为 true 表示修改，否则不修改。secure 属性表示是否使用 HTTPS 协议，设置为 false 表示不使用。

Vue 中的代理配置

Vue 也可以通过配置代理来解决跨域问题。在 Vue 配置文件中，我们可以使用 devServer.proxyTable 属性来配置代理。

devServer: {
  proxyTable: {
    '/api': {
      target: 'http://localhost:8080',
      changeOrigin: true,
      secure: false,
    },
  },
},

在上面的配置中，我们将 '/api' 路径下的请求代理到 'http://localhost:8080' 地址。changeOrigin 属性和 secure 属性的含义与 Vite 中的相同。

实战教程

下面我们来通过一个实战教程，演示如何在 Vite 和 Vue 中配置代理来解决跨域问题。

安装 Vite 和 Vue
- 安装 Vite：npm install vite
- 安装 Vue：npm install vue
创建一个新的项目
- Vite 项目：vite create my-app
- Vue 项目：vue create my-app
编辑配置文件
- Vite 项目：编辑 vite.config.js 文件，添加代理配置。
- Vue 项目：编辑 vue.config.js 文件，添加代理配置。
启动项目
- Vite 项目：npm run dev
- Vue 项目：npm run serve
访问跨域资源
- 打开浏览器，访问跨域资源，即可看到跨域问题已经解决。