在 Vue.js 项目的开发过程中，很多情况需要通过 ajax 请求向后端服务器获取数据。通常情况下，这些请求是同源的，也就是说前端代码与后端服务器具有相同的协议、主机和端口。然而，当前端代码和后端服务器的协议、主机或端口不同的时候，就会出现跨域请求的问题。
本文将介绍 Vue.js 中使用 axios 发起跨域请求时，可能遇到的一些问题，以及解决这些问题的方式。
跨域请求的问题
跨域请求指的是前端代码向一个不同于自己的源发送 ajax 请求。这种情况下，浏览器会发出一个“跨域请求”的错误，即“Access-Control-Allow-Origin”头部不允许跨域请求。
这种情况下，请求不会成功，服务器不会收到请求，XHR 对象也无法读取服务器的响应。
解决跨域请求问题的方式
1. 服务器端设置 Access-Control-Allow-Origin 头
这是最常见的解决方式，服务器端应该在响应中设置“Access-Control-Allow-Origin”头，并将该头的值设置为“*”，表示允许任何源发起跨域请求。
例如，假设服务器 API 地址是 http://example.com/api，前端代码的域名是 http://localhost:8080。那么，服务器端应该响应如下：
app.use('/api', function(req, res) {
res.header('Access-Control-Allow-Origin', '*')
res.send('Hello World')
})2. 使用 CORS 中间件
这是另一种常见的解决方式，使用 CORS 中间件可以在服务器端自动设置“Access-Control-Allow-Origin”头部。例如，使用 Node.js 的 express 库可以这样设置：
-- -------------------- ---- ------- ----- ------- - ------------------ ----- ---- - --------------- ----- --- - --------- --------------- --------------- ------------- ---- - --------------- ------- -- ----------------
3. 使用 JSONP
JSONP 通过 script 标签动态加载数据，从而避免了跨域请求的问题。不过，需要服务器支持 JSONP。
例如，假设服务器 API 地址是 http://example.com/api，前端代码可以这样使用 JSONP：
-- -------------------- ---- ------- -------- ---------- --------- - ----- ------ - -------------------------------- --------------------------- ------------------ ---------- - --- - ------------ - -------- --------------------------------- - ------------------------------- -------------- - ----------------- --
4. 使用反向代理
使用反向代理的方式将所有请求都代理到同一个主机上，也可以避免跨域请求的问题。这种方式需要在服务器上进行配置，不是前端项目的解决方案。
axios 跨域请求的问题
axios 是一个强大且灵活的 HTTP 客户端，常用于在 Vue.js 项目中发起 ajax 请求。然而，在 axios 中发起跨域请求时，仍然可能出现一些问题。
1. 带有 cookies 的请求
当发送带有 cookies 的请求时，浏览器会在同域名下自动添加 cookies 到请求头中，但不会自动向不同域名下发送 cookies。如果需要在跨域请求时发送 cookies，可以在 axios 请求中配置 withCredentials 为 true：
axios.get('http://example.com/api', {
withCredentials: true
})2. 预检请求
当请求方式为 PUT、DELETE、OPTIONS 等非简单请求时，浏览器会先发送一个“预检请求”（Preflight Request）到服务器，请求方式为 OPTIONS。服务器需要响应一个 200 OK 的状态码，并在响应中设置“Access-Control-Allow-Methods”、"Access-Control-Allow-Headers"和“Access-Control-Max-Age”头部。
例如，假设前端代码发送一个 PUT 请求到 http://example.com/api，那么服务器需要响应一个如下格式的响应：
Access-Control-Allow-Origin: * Access-Control-Allow-Methods: PUT, OPTIONS Access-Control-Allow-Headers: Content-Type, X-Custom-Header Access-Control-Max-Age: 86400
在开发过程中，如果遇到了预检请求的问题，可以在服务器端设置如下示例代码：
-- -------------------- ---- ------- ------------------- ------------- ---- - ----------------------------------------- ---- ------------------------------------------ ----- ---- ----- ------- --------- ------------------------------------------ -------- ----------------- ------------- ------- --------------- ---------------------------------------------- ------- ------------------------------------ -------- ------------- -- --------------- ------------- ---- - ----------------------------------------- ---- ------------- --
总结
在 Vue.js 项目中发起跨域请求时，可能会遇到一些问题，但这些问题都可以通过上述的解决方法来解决。使用 axios 发起跨域请求时，需要注意带有 cookies 的情况以及预检请求的问题。通过了解这些问题及解决方法，我们可以更好地完成 Vue.js 项目的开发工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649bedb148841e98948b1065