Vue-cli3.x + axios 跨域方案踩坑指北

Vue-cli 3.x与axios跨域方案的踩坑指南

近日，我在重构旧项目的过程中遇到了跨域问题。前端需要通过Vue-cli 3.x和axios向后端服务发送请求，这就涉及到跨域的处理。在这个过程中，我遇到了一些问题并积累了一些经验，希望能与大家一起分享，帮助大家避开这些坑。

随着前后端分离的流行，前端工程化逐渐成为主流。为了提高开发效率和体验，前端往往会搭建自己的小型服务器，如webpack的devServer。这就会引发跨域问题。本文将重点讨论Vue-cli 3.x环境下，如何利用axios解决开发环境中的跨域问题。需要注意的是，本文所讨论的方法仅适用于开发环境，生产环境下需采取其他措施。

开始填坑之前，我先来介绍一下跨域问题的基本概念。简单来说，跨域问题就是浏览器出于安全考虑，禁止网页从不同的源加载的脚本之间相互访问资源。这里的“源”指的是协议、域名和端口三者之一不同就算跨域。在前端开发中，跨域问题的解决通常依赖于后端服务的支持。在开发环境中，我们可以通过一些手段模拟后端服务来解决跨域问题，以便进行前端开发。

接下来，我将介绍如何在Vue-cli 3.x项目中配置axios以实现跨域。在项目的根目录下创建vue.config.js文件（如果还没有的话），然后在其中配置devServer.proxy对象。以我的项目为例，我将展示如何配置devServer.proxy来解决跨域问题。

配置过程相对简单，主要包括以下几个步骤：

1. 在vue.config.js文件中添加devServer对象；

2. 在devServer对象中添加proxy属性；

3. 在proxy对象中定义需要代理的接口路径和对应的目标地址；

4. 配置其他选项，如changeOrigin和pathRewrite等。

通过配置devServer.proxy对象，我们可以将前端发起的请求转发到后端服务，从而实现跨域。在这个过程中，我们需要理解配置选项的含义和作用。例如，'/index'这个key用于匹配请求的path路径，一旦匹配成功，就会把请求转发到target字段对应的主机地址（这里是

什么是pathRewrit？

在Vue中使用axios

在Vue项目中，我们有很多选择来发送HTTP请求，其中ajax封装的库如axios、jquery.ajax和vue-resource等都非常受欢迎。在Vue中使用axios，网上通常有两种方式：一种是将axios直接挂载到Vue的原型上。但我更倾向于推荐第二种方法。

通过npm安装axios和vue-axios库：

```bash

npm install axios vue-axios

```

然后，在Vue项目中导入这两个库并配置Vue使用它们：

```javascript

import axios from 'axios';

import VueAxios from 'vue-axios';

Vue.use(VueAxios, axios);

```

假设你已经配置了合适的代理规则，现在要让代理成功转发到localhost/index/phpinfo.php。在Vue实例中，你可以通过axios来请求这个地址：

```javascript

this.axios.get('/index/phpinfo.php').then((response) => {

console.log(response);

});

```