什么是跨域问题
在前后端分离的开发中，前端往往通过AJAX技术向后端发送请求获取数据，而存在于不同域名、端口或协议的请求会触发浏览器的同源策略，导致跨域问题。跨域问题是指在浏览器中发起的跨域请求会被阻止，从而导致无法正常获取返回的数据。
为什么需要配置跨域
配置跨域是为了解决前后端分离开发中的跨域问题。在开发过程中，前端经常需要与多个后端服务进行交互，如果不配置跨域，就无法在浏览器中正常发送跨域请求，无法获取到所需的数据，从而导致应用功能无法正常运行。
如何配置Vue 3.0跨域
在Vue 3.0中，配置跨域主要依赖于Webpack的devServer选项。首先，在项目根目录下找到vue.config.js文件（如果没有则创建），在该文件中添加以下配置：
module.exports = {
devServer: {
proxy: {
'^/api': {
target: 'http://api.example.com',
changeOrigin: true,
pathRewrite: { '^/api': '' }
}
}
}
}
以上配置的含义是，当在开发环境中的前端请求URL以"/api"开头时，将请求代理到"http://api.example.com"域名下。changeOrigin参数设置为true表示允许跨域请求，并且通过pathRewrite将URL中的"/api"前缀去除。这样一来，在开发环境下发起的跨域请求就能成功获取到数据了。
实战例子
假设前端需要获取后端提供的用户列表数据，后端API的地址为"http://api.example.com/user/list"。前端项目通过Vue CLI创建，在vue.config.js中进行跨域配置：
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://api.example.com',
changeOrigin: true,
pathRewrite: { '^/api': '' }
}
}
}
}
配置完成后，在前端代码中可以直接通过发起"/api/user/list"的请求获取数据，而无需考虑跨域问题。
注意事项
在生产环境中，前端的跨域请求应该由后端服务器进行代理，而不是依赖于开发环境的配置。因此，以上所述的跨域配置只适用于开发环境，不应在生产环境中使用，避免造成安全风险。
另外，跨域配置时需谨慎选择目标域名，确保目标域名的可靠性、安全性和稳定性，以避免被恶意攻击或无效的请求带来的问题。
