引言
在单页应用开发中，使用 Vue.js 作为前端框架很常见。在这个过程中，会有很多 ajax 请求需要和后端交互数据。但是，在跨域请求时，浏览器会拦截请求，我们需要通过某些方法来解决这个问题。本文将介绍解决 Vue.js 单页应用中 ajax 请求的跨域问题的方法。
跨域请求
在前端开发中，大部分的数据请求是通过 ajax 实现的。而跨域请求指的是在当前页面向其他域名下的服务器发送 ajax 请求。浏览器会限制跨域请求获取数据，因为如果没有限制，那么用户就可以通过前端页面向其他网站发送请求获取数据，这是不安全的。
在单页应用中，由于前端应用通过路由系统实现页面跳转，跳转到其他路由时，url 会改变，而不是整个页面的刷新，此时就需要跨域请求获取数据。
解决跨域请求问题
1. 服务端设置跨域请求
在后端设置 Access-Control-Allow-Origin 头，允许前端的跨域请求。这个方法比较简单，但是需要是服务器端有权控制响应头的情况下才能使用。如果对方服务器没有设置这个头，那么就需要使用其他方法。
例如，在 php 里，可以通过以下代码设置跨域请求：
----------------------------------------
2. JSONP
JSONP 可以通过 script 标签发送跨域请求，但是只支持 GET 方法。JSONP 的原理是将要请求的数据作为参数传递给一个 js 函数，并且再向服务器发起一个 GET 请求，返回一个 js 脚本。通过动态插入 script 标签，触发这个函数，然后就可以拿到返回结果。
--- ------ - --------------------------------- ---------- - ---- - ------------ - ---- ---------------------------------- -------- -------------------- ------------------ -
3. 使用代理
服务器端支持 CORS 的情况下，可以直接在前端请求服务端，这种方法比较简单，但是存在安全问题。如果到对端服务器不支持设置 CORS，我们就需要通过代理实现跨域请求。代理方法是，前端向当前服务端发送请求，服务端再以自己的身份向对方服务器请求数据，然后再返回给前端。这种方法的缺点是会影响响应的速度，但是可以避免安全问题。
4. 使用 CORS
CORS(跨域资源共享) 是 W3C 标准，通过服务端设置响应头部信息，允许浏览器进行跨域访问操作。在响应头中加入以下代码：
---------------------------- -------
需要注意的是，在允许跨域请求的同时也需要设置其他安全措施，才能防止 csrf 攻击等问题。
Vue.js 中的跨域请求
在 Vue.js 中，可以通过 axios 发送 ajax 请求。为了使咱们要实现跨域请求，我们需要在 axios 的配置中加入以下内容：
------------------------------------------- - ------------------------------------ ------------------------------ - ----- -------------------------- - ----- ---------------------- - ----
这些配置可以告诉 axios，在请求中携带 CORS 相关的信息。需要注意的是，这些配置一定要在创建 axios 实例前进行设置，否则无效。
示例代码
-- -- ----- -
------ ----- ---- --------
-- -- ----- ----------
----- -------- - --------------
-------- ----
---------------- -----
------------ -----
-------- -
--------------- -----------------------------------
-
---
---------
-- -- ------- ---- ---- --
------ ------- -
-- -- --- --
-------- ------- -
------ --- ----------------- ------- -- -
----------------- - ------ --
-------------- -- -
-----------------------
--
------------ -- -
--------------
---
---
--
-- -- ---- --
--------- ----- -
------ --- ----------------- ------- -- -
------------------ -----
-------------- -- -
-----------------------
--
------------ -- -
--------------
---
---
-
--结论
解决 Vue.js 单页应用中 ajax 请求的跨域问题，可以通过服务端设置响应头信息，使用 JSONP、代理、CORS 等方法。在 Vue.js 中，可以通过配置 axios 实现跨域请求。选择哪种方法要根据情况而定，同时需要考虑安全问题。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67206f722e7021665e0233b5