跨域请求是指在浏览器端，当一个网页的脚本向另一个域名的服务器请求数据时，由于浏览器的同源策略限制，该请求会被拒绝。Vue.js 作为一款流行的前端框架，其默认也是不支持跨域请求的。本文将介绍如何在 Vue.js 中处理跨域请求。
为什么需要处理跨域请求？
跨域请求是因为浏览器的同源策略限制导致的。同源策略是浏览器的一种安全机制，它限制在一个源（协议 + 域名 + 端口号）下的脚本只能访问该源下的资源。如果在一个页面中向另一个域名的服务器发送请求，就会被浏览器拒绝。这是为了防止恶意脚本攻击用户的隐私数据。
但是，在实际开发中，我们可能需要向其他域名的服务器请求数据，比如请求第三方 API，这时就需要处理跨域请求了。
处理跨域请求的方法
在 Vue.js 中，处理跨域请求有多种方法，下面分别介绍。
代理
代理是指在客户端和服务器之间增加一个中间层，客户端向中间层发送请求，中间层再将请求转发给服务器。这样，客户端和服务器之间的请求就不会跨域了。
在 Vue.js 中，可以通过配置 vue.config.js 文件来实现代理。下面是一个示例：
-------------- - -
---------- -
------ -
------- -
------- ------------------------
------------- -----
------------ -
-------- --
-
-
-
-
-上面的代码中，我们配置了一个代理，将客户端发送的以 /api 开头的请求转发到 http://localhost:3000，并将请求路径中的 /api 去掉。这样，客户端就可以向 /api 发送请求，而不用担心跨域问题了。
JSONP
JSONP 是一种跨域请求的解决方案，它利用了 <script> 标签不受同源策略限制的特点。JSONP 请求的原理是，在客户端创建一个 <script> 标签，标签的 src 属性指向服务器的 API 地址，API 返回的数据需要用一个回调函数包裹起来，客户端在收到响应后执行回调函数。
在 Vue.js 中，可以通过手动创建 <script> 标签来实现 JSONP 请求。下面是一个示例：
-------- ---------- --------- -
----- ------ - --------------------------------
---------- - ---
---------------------------------
---------------- - -------------- -
---------------------------------
------ ----------------
--------------
-
-
---------------------------------- -------------- -
-----------------
--上面的代码中，我们手动创建了一个 <script> 标签，标签的 src 属性指向 http://localhost:3000/api，并指定了一个回调函数。当 API 返回数据后，客户端执行回调函数，并将 API 返回的数据作为参数传入。
CORS
CORS 是一种跨域请求的标准，它允许服务器向浏览器发送一个特殊的响应头，告诉浏览器允许跨域请求。在 Vue.js 中，可以通过配置后端服务器来实现 CORS。下面是一个示例：
----- ------- - ------------------ ----- --- - --------- ------------- ---- ----- -- - -------------------------------------------- ---- --------------------------------------------- ----- ----- ---- -------- --------------------------------------------- --------------- ------ -- --------------- ----- ---- -- - ---------- ----- ------ ------- -- -- ---------------- -- -- - ------------------- ------- -- ---- ------ --
上面的代码中，我们在后端服务器中设置了响应头，允许所有域名的请求，并允许 GET、POST、PUT、DELETE 四种请求方法。当客户端向 /api 发送请求时，后端服务器返回一个 JSON 数据。
总结
本文介绍了在 Vue.js 中处理跨域请求的三种方法：代理、JSONP 和 CORS。代理是最常用的方法，可以通过配置 vue.config.js 文件来实现。JSONP 是一种比较老的方法，但在一些场景下依然有用。CORS 是一种标准，需要在后端服务器中配置响应头。
处理跨域请求是前端开发中一个常见的问题，掌握以上方法可以帮助我们更好地解决跨域请求的问题。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/660617d1d10417a2224085a4