使用proxytable 配置解决 vue-cli 的跨域请求问题【推

面向的读者：

本文面向熟悉Vue CLI和Webpack模板结构的前端开发者。如果你熟悉axios的基本用法并正在使用Vue CLI构建一个基于Webpack模板的Vue项目，那么本文的内容将对你非常有帮助。

问题描述：

在前后端分离的开发模式中，前端项目与后端项目的IP地址、端口号或协议可能不同。这会导致浏览器出于安全考虑拦截前端发起的跨域请求。本文将以一个示例说明这个问题。

假设你有一个前端页面组件，它在加载时会向后端发送一个请求以获取书籍数据。代码示例如下：

前端项目在`localhost:8081`上运行，而你的后端项目则通过Apache运行在`localhost/test/public/api/books`上。当你在浏览器中运行前端页面并尝试获取后端数据时，浏览器会由于跨域限制而阻止请求。

解决方案：

解决跨域问题的方法有很多种，其中之一是通过配置Vue项目中的`config/index.js`文件来解决。本文将详细介绍如何通过配置`proxyTable`来解决这个问题。

在`config/index.js`中的`dev`对象里配置`proxyTable`，如下所示：

```javascript

module.exports = {

// ...其他配置

dev: {

// ...其他配置

proxyTable: {

'/api': {

target: ' // 指向你的后端API地址

changeOrigin: true, // 改变请求头中的Host为后端API地址

'^/api': ''

}

}

}

}

}

```

接下来，修改你的Vue组件中的ajax请求代码，将直接请求后端API的URL改为以`/api`开头的相对路径：

```javascript

// 修改前的代码：axios.get("

// 修改后的代码：axios.get("/api/books")

```

现在，当你重新运行你的Vue项目时，通过配置`proxyTable`，你的前端请求将被正确地路由到后端API，浏览器不再显示跨域错误。这就是如何通过配置`proxyTable`解决Vue CLI的跨域请求问题。希望本文能对你有所帮助！网络请求的奥秘：Webpack-dev-server的前端ajax请求之旅

当我们打开浏览器的开发者工具，深入网络请求的秘密时，会惊讶地发现，那些神秘的ajax请求竟然都是向我们亲爱的webpack-dev-server发出的。更令人难以置信的是，它们居然能准确无误地返回所需数据。

在浏览器的工作中，存在着安全策略的限制，这些限制对于第三方的服务（或服务器）是存在的。我们可以通过一种巧妙的方式绕过这些限制：让浏览器访问前端开发服务器的url，然后由前端开发服务器代为向后端服务器发送请求，再返回数据给浏览器。这样一来，我们就不存在所谓的跨域问题了。

在配置中，我们可以像这样设置：

对于运行在8081端口的开发服务器来说，所有以/api开头的uri都会被巧妙地转发到指定的地址。也就是说，当你在浏览器中访问localhost:8081/api/books时，前端开发服务器就会像骑士般向指定的地址请求数据。这个过程就是简单粗暴地在target之后拼接上当前的uri。

我们可能会发现这样的设置会使得实际的url中多了一个/api，这并不能满足我们的需求。怎么办呢？这时候，我们就需要用到pathRewrite这个神器了。它可以将我们指定的字符串替换掉。

还有一个重要的配置项changeOrigin: true。这个配置项的作用是设置前端开发服务器向后端发送请求时HTTP包中的HOST字段。当设置为true时，HOST会被设置成目标地址(target)中的主机。这个选项对于后端服务器是虚拟主机或者同一个IP绑定了多个服务器服务的情况尤为重要。如果不设置，可能会导致请求无法获取到数据。

更多的proxyTable的可用参数可以参考相关文档。通过这些设置，我们可以更好地控制网络请求，使得前端开发更加便捷高效。

让我们以一句代码结束这次之旅：

Cambrian.render('body')，让我们在前端开发的海洋中自由遨游！