在开发 Vue.js 项目时，很容易遇到跨域问题。跨域问题的产生是由浏览器的同源策略所致，即只有同源的文档之间才允许交互。当我们通过 Ajax 请求非同源的资源时，浏览器会阻止这个行为，从而导致跨域问题的发生。本文将介绍 Vue.js 中如何避免跨域问题，并提供详细的示例代码。
什么是跨域问题？
在 Web 开发中，同源策略（Same-origin Policy）是一种安全策略，它是浏览器最基本的安全功能。同源是指协议、域名、端口号相同。如果两个页面的协议、域名、端口号有一个不同，就被认为是非同源。同源策略的作用是限制一个文档或脚本如何能与另一个源的资源进行交互。
跨域问题是由于浏览器的同源策略所致。当我们通过 Ajax 请求非同源的资源时，浏览器会阻止这个行为，从而导致跨域问题的发生。
如何避免跨域问题？
在 Vue.js 中，可以通过配置 webpack 的 devServer 来避免跨域问题。Webpack 是一款前端资源加载/打包工具，可以将多个 JavaScript 文件打包成一个文件，减少网络请求，提高页面加载速度。
在配置 webpack 的 devServer 时，设置 proxy 选项可以将请求代理到后端服务器上，从而避免跨域问题。
以下是一个配置 webpack 的示例代码：
-- -------------------- ---- -------
-- -----------------
----- ---- - ---------------
-------------- - -
-- ---
---------- -
-- ----
------ -
-- ---- ---- --------------
------- -
-- ------------
------- ------------------------
-- ------- ---- --
------------ - -------- -- --
-- ----
------------- ----
-
-
-
-在以上代码中，我们通过设置 proxy 属性，将所有以 /api 开头的请求代理到后端服务器上。target 属性指定了后端服务器的地址和端口号，pathRewrite 属性将路径中的 /api 前缀去掉，changeOrigin 属性设置为 true 表示允许跨域。
示例代码
以下是一个基于 Vue.js 和 Express 的示例代码。在该示例代码中，我们使用了 webpack 的 devServer 来代理请求，从而避免了跨域问题。
前端代码
-- -------------------- ---- -------
---- ---------- ---
--------- -----
------
------
----- ----------------
------------- ----------
-------
------
---- ---------
----
--- ----------- -- --------- ---------- -------
-----
------
------- -------------------------------
-------
-------// main.js
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})-- -------------------- ---- -------
-- -------
----------
-----
------- -------------------------------
------
-----------
--------
------ ------- -
------ -
------ -
------ --
-
--
-------- -
---------- -
-- -- --- --
------------------------------------------ -- -
---------- - -------------
--
-
-
-
---------后端代码
-- -------------------- ---- ------- -- --------- ----- ------- - ------------------ ----- --- - --------- ----- ----- - - - ------ ----- -- - ------ ----- -- - ------ ----- - - --------------------- ----- ---- -- - --------------- -- ---------------- -- -- - -------------------------------------------- --
在以上示例代码中，我们定义了一个 /api/items 接口，返回一个数组。在前端代码中，我们使用 Vue.js 提供的 $http 方法发送 GET 请求来获取数据，在后端代码中，我们使用 Express 框架来处理请求，将数据返回给前端代码。
在运行该示例代码时，我们可以在命令行中输入以下命令来启动 webpack 的 devServer：
$ npm run dev
启动成功后，我们可以在浏览器中访问 http://localhost:8080/ 来查看示例代码的运行效果。
结论
通过以上示例代码，我们可以看到如何在 Vue.js 中通过配置 webpack 的 devServer 来避免跨域问题。使用这种方法可以使前端代码更加简洁和优雅，同时提高了项目的可维护性和可扩展性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67033e29d91dce0dc84a8ede