Vue使用Axios库请求数据时跨域问题的解决方法详解
作者：设计师工作日常
在 VUE 项目开发时，遇到个问题，正常设置使用 Axios 库请求数据时，报错提示跨域问题。
那在生产坏境下，该去怎么解决呢？
其可以通过以下几种方式去尝试解决：
1、设置允许跨域请求的响应头
1.1 在响应头中添加 Access-Control-Allow-Origin 字段，将其值设置为允许跨域请求的源地址。
例如，如果您的源地址是 http://localhost:8080，则可以设置如下响应头：
Access-Control-Allow-Origin: http://localhost:8080
1.2 下面是一个简单的示例，展示如何在服务器端使用 Node.js 设置响应头。
const express = require('express')
const app = express()
// 设置允许跨域请求的响应头
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', 'http://localhost:8080')
next()
})
// 处理 GET 请求
app.get('/api/data', (req, res) => {
res.json({ message: 'Hello World!' })
})
// 启动服务器
app.listen(3000, () => {
console.log('Server started on port 3000')
})
在上面代码中，使用 Express.js 创建简单的服务器，允许跨域请求的地址是 http://localhost:8080。
在每个请求中，都会在响应头中添加 Access-Control-Allow-Origin，并将值设置为http://localhost:8080，这样浏览器就不会阻止跨域请求的发送了。
1.3 VUE应用层使用 Axios 发送 GET 请求，通过以下方式获取服务器返回的数据。
.get('http://localhost:3000/api/data')
.then(response => {
console.log(response.data.message)
})
.catch(error => {
console.error(error)
})
在上面代码中，使用 Axios 发送 GET 请求到 http://localhost:3000/api/data，获取服务器返回的数据，并将返回的消息打印到控制台。
要注意在实际开发中，为了应用的安全性，尽量缩小允许跨域请求的源地址。
2、使用 proxy 代理。
2.1 在 VUE 的配置文件 config.js 中配置代理，请求转发到目标服务器。
例如，如果目标服务器地址是 http://api.example.com，则可以在 vue.config.js 中添加配置：
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://api.example.com',
changeOrigin: true
}
}
}
}
在 VUE 发送请求时，将会被代理到 http://api.example.com/api。
2.2 下面简单示例如何在 VUE 项目中使用代理。
2.2.1 安装 http-proxy-middleware 库
npm install http-proxy-middleware --save-dev
2.2.2 配置代理
const proxyMiddleware = require('http-proxy-middleware')
module.exports = {
devServer: {
before: function(app, server) {
app.use('/api', proxyMiddleware({
target: 'http://api.example.com',
changeOrigin: true
}))
}
}
}
配置文件中，使用 http-proxy-middleware 创建代理，并将其应用到所有路径以 /api 开发的请求中。
在配置中，目标地址设置为 http://api.example.com，changOrigin 设置为 true,表示发送请求时将设置正确的 Origin 头部。
2.2.3 在 VUE 应用层中发送请求。
axios.get('/api/data')
.then(response => {
console.log(response.data)
})
.catch(error => {
console.error(error)
})
这里使用了相对路径 /api/data 发送了一个 GET 请求，实际上该请求会被代理到 http://api.example.com/api/data 上。
通过这种方式，我们可以使用 VUE 提供的代理功能，将跨域请求转发到目标服务器，从而避免跨域问题。
注意：为确保代理功能正常工作，需要将 VUE 应用层的开发服务器启动在和代理服务器相同的域名和端口下。
3、设置 withCredentials 来解决 VUE 中跨域请求问题
3.1 让 Axios 在所有请求中携带凭证信息。
import axios from 'axios';
axios.defaults.withCredentials = true; // 设置 withCredentials 选项为 true
axios.get('https://api.example.com/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
3.2 让 Axios 在单个请求中携带凭证信息。
axios.get('https://api.example.com/data', {
withCredentials: true
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
注意： 当使用 withCredentials 时，服务器端需要设置 Access-Control-Allow-Credentials 响应头为 true，才能让浏览器接受带有凭证信息的跨域请求。
到此这篇关于Vue使用Axios库请求数据时跨域问题的解决方法详解的文章就介绍到这了,更多相关Vue Axios跨域问题解决内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！