解决 Vue SPA 中使用 axios 跨域问题的方法-JavaScript中文网-JavaScript教程资源分享门户

解决 Vue SPA 中使用 axios 跨域问题的方法

背景

现在前端开发已经成为了我们日常开发中不可或缺的一部分，而单页面应用（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：

--- ------- ----- ------

在页面中使用 axios：

------ ----- ---- -------

----------------------
  ----------- -- -
    ----------------
  --
  ------------ -- -
    ----------------
  --

示例代码

-- -------
------ --- ---- -----
------ --- ---- -----------
------ ----- ---- -------

------------------------ - -----

------------------- - -----

--- -----
  ------- - -- -------
-----------------

-- -------
----------
  -----
    ------- --------------------------------
  ------
-----------

--------
------ ------- -
  ----- ------
  -------- -
    ----- --------- -
      --- -
        ----- --- - ----- ---------------------------
        ----------------
      - ----- ----- -
        ----------------
      -
    -
  -
-
---------

-- -------------
-------------- - -
  ---------- -
    ------ -
      ------- -
        ------- ------------------------
        --- -----
        ------------- -----
        ------------ -
          -------- --
        -
      -
    -
  -
-

总结

使用 Vue 不仅能够轻松开发 SPA，还能够通过配置 proxy 解决跨域问题。使用 axios 能够方便地发起各种请求。通过本文的介绍，相信大家已经掌握了如何在 Vue SPA 中使用 axios 以及如何解决跨域问题。

来源：JavaScript中文网，转载请联系管理员！本文地址：https://www.javascriptcn.com/post/64a7ca8448841e9894460238