当前位置：首页 > news >正文

在 VUE 项目中，使用 Axios 请求数据时，提示跨域，该怎么解决？

news 2025/6/27 10:35:03

在 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 请求，通过以下方式获取服务器返回的数据。

axios.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 选项为 trueaxios.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);});