背景
现在前端开发已经成为了我们日常开发中不可或缺的一部分，而单页面应用（SPA）已经成为了前端开发的一个不可忽略的技术点，其中，Vue 作为目前前端最火的框架之一，如何在 Vue SPA 中正确地使用 axios 并解决跨域问题是我们需要深入研究和掌握的知识点。
为什么会出现跨域问题？
在了解如何解决跨域问题之前，我们需要先明确一下什么是跨域问题。当一个域下的 web 页面去请求另一个域下的数据时，就会出现跨域问题。跨域问题属于浏览器的安全策略，为了保护用户的信息，浏览器会限制跨域的请求。
例如，我们的前端页面为 http://localhost:8080，而后端接口为 http://localhost:3000，这时候就会出现跨域问题。因为前端和后端的域名（端口号）不同。
使用 proxy 解决跨域问题
Vue-cli 搭建的项目中，使用 webpack-dev-server 来启动服务。在 webpack-dev-server 的配置中，可以通过配置 proxy 将 API 请求转发到后端服务器上。
我们可以通过在 vue.config.js 文件中配置 proxy 来解决跨域问题。vue.config.js 在 Vue CLI 3.x 中是默认不存在的，需要我们手动创建。
下面以 Vue-cli 3.x 为例，说明如何在 Vue 中配置 proxy：
在根目录下创建
vue.config.js文件。如果你已经有了这个文件，就无需再次创建。在
vue.config.js中，添加以下代码：
-- -------------------- ---- -------
-------------- - -
---------- -
------ -
------- -
------- ------------------------ -- ----
--- -----
------------- -----
------------ -
-------- -- -- -- --- ----- -----------
-
-
-
-
-以上代码表示将 /api 开头的请求转发到 http://localhost:3000 上。其中：
target：指定要代理的后端地址。changeOrigin：是否跨域，默认为 false，设为 true 表示实现跨域请求。pathRewrite：将请求前缀/api删除，确保请求地址正确。如果你的 API 的前缀不是/api，你需要修改这里的值。
- 运行
npm start启动服务。
现在，请求 /api 开头的 API 时，就会被转发到 http://localhost:3000 上，而不会出现跨域问题了。
在 Vue 中使用 axios
axios 是一个基于 Promise 的 HTTP 库，可以用于浏览器和 node.js 中的 HTTP 请求。
使用 axios 可以轻松地发起 GET、POST、PUT、DELETE 等请求。在 Vue 中使用 axios 也非常简单，只需要安装 axios：
npm install axios --save
在页面中使用 axios：
-- -------------------- ---- -------
------ ----- ---- -------
----------------------
----------- -- -
----------------
--
------------ -- -
----------------
--示例代码
-- -------------------- ---- -------
-- -------
------ --- ---- -----
------ --- ---- -----------
------ ----- ---- -------
------------------------ - -----
------------------- - -----
--- -----
------- - -- -------
-----------------
-- -------
----------
-----
------- --------------------------------
------
-----------
--------
------ ------- -
----- ------
-------- -
----- --------- -
--- -
----- --- - ----- ---------------------------
----------------
- ----- ----- -
----------------
-
-
-
-
---------
-- -------------
-------------- - -
---------- -
------ -
------- -
------- ------------------------
--- -----
------------- -----
------------ -
-------- --
-
-
-
-
-总结
使用 Vue 不仅能够轻松开发 SPA，还能够通过配置 proxy 解决跨域问题。使用 axios 能够方便地发起各种请求。通过本文的介绍，相信大家已经掌握了如何在 Vue SPA 中使用 axios 以及如何解决跨域问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a7ca8448841e9894460238