导读 在使用 Vue-cli3 开发项目时，经常会遇到跨域请求的问题。这不仅影响开发效率，还可能带来安全隐患。别担心，今天就来教你如何优雅地解决
在使用 Vue-cli3 开发项目时，经常会遇到跨域请求的问题。这不仅影响开发效率，还可能带来安全隐患。别担心，今天就来教你如何优雅地解决 Axios 跨域问题，并对 Axios 进行封装，让代码更整洁！🚀
首先，在 Vue-cli3 项目中，我们可以通过配置 `vue.config.js` 文件来处理跨域问题。例如：
```javascript
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'https://your-api-domain.com',
changeOrigin: true,
pathRewrite: { '^/api': '' }
}
}
}
};
```
这样设置后，前端的 `/api` 请求会被代理到目标服务器，轻松解决跨域问题。🎯
接着，我们可以对 Axios 进行封装，提升代码复用性。比如创建一个 `axiosInstance.js` 文件：
```javascript
import axios from 'axios';
const instance = axios.create({
baseURL: '/api',
timeout: 5000
});
// 添加请求拦截器
instance.interceptors.request.use(config => {
// 在这里可以添加 token 等操作
return config;
}, error => Promise.reject(error));
export default instance;
```
通过以上方法，你的项目将更加健壮且易于维护。💪🎉
Vue Axios 跨域解决方案 前端开发
