對(duì)于正在學(xué)習(xí)vue的人來說，axios是繞不開的一個(gè)話題。而跨域是前端開發(fā)中經(jīng)常會(huì)碰到的問題之一，那么如何在vue項(xiàng)目中使用axios跨域呢？

在vue項(xiàng)目中使用axios發(fā)送請(qǐng)求，可常見的是利用proxyTable配置來進(jìn)行跨域請(qǐng)求，不過這種方式更適用于開發(fā)模式。如果是生產(chǎn)環(huán)境中，我們需要使用后端來進(jìn)行跨域處理。

// 在vue項(xiàng)目的main.js文件中引入axios
import axios from 'axios'
// 配置axios跨域請(qǐng)求的代理地址
axios.defaults.baseURL = '/api'
// axios攔截器，用于在請(qǐng)求發(fā)送前添加請(qǐng)求頭
axios.interceptors.request.use((config) => {
config.headers['Content-Type'] = 'application/json;charset=UTF-8'
return config
})
// 在vue實(shí)例中掛載axios方法
Vue.prototype.$axios = axios

配置好axios的基本信息后，我們需要在后端進(jìn)行跨域處理。以Node.js為例，代碼如下：

// 引入express框架
const express = require('express')
const app = express()
// 引入cors模塊進(jìn)行跨域處理
const cors = require('cors')
// cors跨域處理
app.use(cors())
// 后臺(tái)接口代碼
app.get('/api/data', (req, res) => {
// 后臺(tái)返回?cái)?shù)據(jù)
res.json({
code: 200,
message: 'success',
data: '這是后臺(tái)返回的數(shù)據(jù)'
})
})
// 監(jiān)聽端口
app.listen('8080', () => {
console.log('正在監(jiān)聽8080端口')
})

以上代碼中，我們使用cors模塊對(duì)Express項(xiàng)目進(jìn)行跨域處理，然后在接口代碼中返回?cái)?shù)據(jù)。這樣，在vue項(xiàng)目中發(fā)送請(qǐng)求時(shí)，即可成功獲取到數(shù)據(jù)。