背景
在开发 Vue.js 单页应用（SPA）时，通常会使用 Axios 库来发送 HTTP 请求。然而，在开发过程中，我们可能会遇到跨域请求的问题。
跨域请求是指在浏览器中，从一个域名（或 IP 地址）向另一个域名（或 IP 地址）发起 HTTP 请求。由于浏览器的安全策略限制，跨域请求会被拒绝。
在 Vue.js SPA 项目中，我们通常会将前端和后端部署在不同的域名或端口上，因此跨域请求是不可避免的。
本文将介绍在 Vue.js SPA 项目中，如何使用 Axios 解决跨域请求的问题。
解决方法
Axios 提供了一个 withCredentials 配置项，用于发送跨域请求时携带凭证信息（如 Cookies、HTTP 认证等）。
要使用 withCredentials 配置项，需要将 Axios 实例的 withCredentials 属性设置为 true。
import axios from 'axios'
const instance = axios.create({
baseURL: 'http://api.example.com',
withCredentials: true // 允许携带凭证信息
})
export default instance此外，后端服务器也需要设置 Access-Control-Allow-Origin 头，允许前端跨域请求。
// Node.js + Express 示例
app.use(function(req, res, next) {
res.header('Access-Control-Allow-Origin', 'http://localhost:8080') // 允许跨域请求的域名
res.header('Access-Control-Allow-Credentials', true) // 允许携带凭证信息
next()
})示例代码
以下是一个使用 Axios 发送跨域请求的示例代码：
-- -------------------- ---- ------- ------ ----- ---- --------------- ------------------ - ---------------- ---- -- -------- ---------------- -- - -------------------------- -------------- -- - -------------------- --
总结
在 Vue.js SPA 项目中，使用 Axios 发送跨域请求时，需要设置 Axios 实例的 withCredentials 属性为 true，并且后端服务器也需要设置 Access-Control-Allow-Origin 头，允许前端跨域请求。这样就可以解决跨域请求的问题了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6512935d95b1f8cacdb12558