在前端开发中，经常会遇到跨域请求的问题。跨域请求指的是在浏览器端，从一个域名下的网页向另一个域名下的接口发起请求。由于浏览器的同源策略限制，这种请求会被浏览器阻止。在 Vue.js 中，我们可以通过 CORS、JSONP 和代理这三种方式来解决跨域请求的问题。
什么是 CORS
CORS（Cross-Origin Resource Sharing）是一种跨域请求的解决方案。它通过在服务器端设置响应头信息，告诉浏览器该服务器允许哪些域名下的网页进行跨域请求。具体来说，服务器端需要设置 Access-Control-Allow-Origin 头信息，来允许指定的域名下的网页进行跨域请求。例如，以下是一个允许所有域名下的网页进行跨域请求的示例：
------------- ---- ----- -- - ----------------------------------------- ----- ------- ---
在 Vue.js 中，我们可以使用 axios 库来发起跨域请求。在发起请求时，如果需要带上 cookie 或者其他自定义的头信息，需要设置 withCredentials 和 headers 选项。以下是一个使用 CORS 发起跨域请求的示例：
------ ----- ---- --------
----------------------------------- - ---------------- ----- -------- - ------------------ -------- - --
-------------- -- -
---------------------------
--
------------ -- -
---------------------
---什么是 JSONP
JSONP（JSON with Padding）是一种跨域请求的解决方案。它通过在网页中动态创建 <script> 标签，将需要请求的数据包装成一个函数调用的形式，然后将该函数名作为参数传递给服务器端。服务器端在返回数据时，将数据包装成该函数调用的形式，然后返回给浏览器端。由于 <script> 标签不受同源策略限制，所以可以实现跨域请求。
在 Vue.js 中，我们可以使用 jsonp 库来发起 JSONP 请求。以下是一个使用 JSONP 发起跨域请求的示例：
------ ----- ---- --------
------------------------------------------------------- ------- --------- -- -
-- ------- -
---------------------
- ---- -
----------------------
-
---什么是代理
代理是一种跨域请求的解决方案。它通过在本地搭建一个代理服务器，将跨域请求转发到该代理服务器上，然后由代理服务器去请求目标接口。由于代理服务器和目标接口在同一个域名下，所以不存在跨域问题。在 Vue.js 中，我们可以使用 vue-cli 脚手架中的 proxyTable 选项来配置代理。
以下是一个使用代理发起跨域请求的示例：
-- ---------------
-------------- - -
---- -
----------- -
------- -
------- ---------------------
------------- ----
-
-
-
--
-- -------
------ ----- ---- --------
----------------- - ---------------- ---- --
-------------- -- -
---------------------------
--
------------ -- -
---------------------
---在以上示例中，我们将 /api 路径的请求转发到 http://example.com 域名下，并且设置了 changeOrigin 选项为 true，表示要修改 host 请求头信息。这样，我们就可以在本地发起跨域请求了。
总结
以上是 Vue.js 中应对跨域请求的三种解决方案：CORS、JSONP 和代理。在实际开发中，我们需要根据具体情况选择合适的方案。如果目标接口支持 CORS，我们可以优先考虑使用 CORS；如果目标接口不支持 CORS，我们可以考虑使用 JSONP；如果以上两种方案都不适用，我们可以考虑使用代理。无论使用哪种方案，我们都需要注意安全性和性能问题，避免出现安全漏洞和性能瓶颈。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65d949bc1886fbafa46dd2e2