Vue3 跨域配置devServer的参数和设置方法

Vue3 是一款流行的前端框架，它允许我们在开发中使用各种功能强大的功能，其中包括跨域请求。在本篇文章中，我将为您讲解如何在 Vue3 项目中配置 devServer 实现跨域请求。

什么是跨域请求？

在 Web 开发中，域指的是通过互联网来唯一标识一个网络资源的字符串。跨域请求则是指在客户端浏览器向服务器发起请求时，所请求的资源的域名与当前网页的域名不同，这种请求不能直接进行数据交互，因为同源策略的限制。

Vue3 devServer参数配置解析

在 Vue3 的项目中，devServer是一个用于本地开发环境的服务器相关配置项，其中包括了很多常用的配置项，如下：

devServer: {
     // proxy代理
     proxy: {},
     // 基本路径
     baseUrl: '',
     // 主机名
     host: '',
     // 端口号
     port: '',
     // https
     https: false,
     // 热更新
     hotOnly: false
}

下面来详细讲解这些参数及其作用。

proxy

该参数用于配置代理，由于Vue3项目中开发环境可能涉及到前后端分离的情况，在开发时需要模拟与后端接口的交互，配置代理会使得在浏览器中发起的请求被代理到服务器上，这样就能够克服跨域请求的限制了。

下面的示例展示了如何在项目中使用proxy参数进行跨域请求：

devServer: {
    proxy: {
        '/api': {
            target: 'http://localhost:3000', // 设置代理目标
            changeOrigin: true, // 改变Host请求头
            pathRewrite: {
                '^/api': '' // 重写路径
            }
        }
    }
}

在以上示例中，我们配置了一个代理对象，路径以/api开头的请求会被转发到本地的http://localhost:3000，并将请求头中的Host设置为该代理目标的Host，同时更改请求路径，去掉/api前缀。

baseUrl

该参数用于配置基地址路径，如果开发时需要将请求发送到其他网站或者本地其他服务器，则需要使用此参数进行配置，在Vue3中，它的默认值为“/”，示例如下：

devServer: {
    baseUrl: '/',
}

host

该参数用于设定要绑定的本地主机名，如果值设为0.0.0.0，则可以通过总是使用网络地址来访问服务器，示例如下：

devServer: {
    host: '0.0.0.0',
}

port

该参数用于设定开发时候本地网站的端口号，示例如下：

devServer: {
    port: 8888, // 设定端口号为8888
}

https

该参数用于配置是否启用https协议，示例如下：

devServer: {
    https: true, //启用https协议
}

hotOnly

该参数用于设置热重载选项，为true时，表示只有热更新失败时才会刷新页面，示例如下：

devServer: {
    hotOnly: true, 
}

总结

在本篇文章中，我们详细讲解了Vue3 devServer参数的配置和作用，以及如何利用proxy参数进行跨域请求。同时，我们还给出了相关示例，帮助您更好地了解Vue3项目在开发环境中的跨域请求配置。