在前端开发中，经常会遇到跨域问题。跨域访问是指客户端 JavaScript 通过浏览器使用 XmlHTTPRequest 或 Fetch API 访问不同域名下的资源时被限制。由于浏览器的限制，跨域请求是无法操作的，但是在 Vue.js 中，我们可以通过一些优雅的方式解决跨域问题。
解决方案
JSONP
JSONP 是一种跨域请求数据的方法，利用 <script> 标签没有跨域限制的特性，通过动态创建 script 标签发送请求并在服务端进行回调，绕过浏览器的跨域限制。在 Vue.js 中，我们可以利用 Vue 的 template 模板和 script 标签来实现 JSONP 请求。
-- -------------------- ---- -------
----------
-----
------ ------- -------
------
-----------
--------
------ ------- -
------ -
------ -
-------- --
--
--
--------- -
---------------
--
-------- -
--------- -
----- -------- - ----------------
----- --- - ------------------------------------------------
----- ------ - ---------------------------------
---------- - ----
----------------------------------
---------------- - ------ -- -
------------ - -------------
-
-
-
-
---------这里通过动态创建 script 标签发送请求，然后将结果回调到 window 对象，最终将结果渲染到页面。其中，callback 参数用来指定回调函数的名称。
CORS
CORS 是一种标准的跨域解决方案，全称为跨域资源共享（Cross-Origin Resource Sharing）。CORS 通过在 http 头部添加一些特殊的域控制信息，让浏览器允许使得跨域这一操作成为可能。在 Vue.js 中，可以通过配置 axios 的 baseURL 和 headers 来进行 CORS 请求。
-- -------------------- ---- -------
------ ----- ---- --------
----- -------- - --------------
-------- ----------------------
-------- -
------------------------------ ---
-
---
---------------------
---------------- -- -
----------------------
--
-------------- -- -
-------------------
---这里通过配置 axios 的 baseURL 和 headers 来实现 CORS 请求，其中 Access-Control-Allow-Origin 指定了请求允许的域名，这里设置为 * 表示允许所有域名的请求。
总结
通过学习 JSONP 和 CORS 的方式，我们可以在 Vue.js 中优雅地解决跨域问题。在实际开发中，我们需要根据需求和实际情况选择合适的解决方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647c0e3d968c7c53b0741be0