在網(wǎng)站開發(fā)過程中，很多時候需要實現(xiàn)跨域請求，在Vue項目中也是如此。Vue項目在開發(fā)時，可以使用webpack-dev-server來啟動本地服務器進行調(diào)試和開發(fā)，這種情況下不需要跨域。但是，在線上部署時，Vue項目需要與后端進行交互，因此跨域問題就會出現(xiàn)。本文將為大家分享Vue項目線上跨域的解決方法。

首先，我們需要明確vue項目跨域的原因。瀏覽器的同源策略限制了前端頁面只能訪問本域下的資源，也就是說，如果當前的頁面地址是http://www.a.com，那么這個頁面只能訪問地址以http://www.a.com開頭的資源，如果需要訪問其他域名下的資源，就需要進行跨域請求。

/** 示例代碼 **/
const axios = require('axios');
const instance = axios.create({
baseURL: 'http://www.b.com',
});
instance.get('/api/users')
.then(res =>console.log(res.data))
.catch(error =>console.log(error));

在這個示例代碼中，我們使用axios向http://www.b.com發(fā)起了一個get請求，獲取了該地址下的api/users資源。但是，由于同源策略的限制，瀏覽器會拋出一個錯誤信息，禁止跨域訪問。這時候我們需要使用后端進行跨域請求。

Vue項目的線上部署通常是通過Nginx反向代理實現(xiàn)的，因此可以在Nginx中進行配置來解決跨域請求問題。為了進行跨域，我們需要在Nginx中添加如下配置：

location /api/ {
proxy_pass http://www.b.com/;
add_header Access-Control-Allow-Origin http://www.a.com;
}

以上Nginx配置中，location /api/表示訪問/api/路徑下的資源會被轉(zhuǎn)發(fā)到http://www.b.com/地址。add_header Access-Control-Allow-Origin http://www.a.com;設置了響應頭中的Access-Control-Allow-Origin為http://www.a.com，表示允許http://www.a.com的代碼訪問該資源。這樣就解決了跨域請求的問題。

除了Nginx配置解決跨域問題，Vue項目也可以使用axios中的proxyTable來實現(xiàn)跨域請求。

module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://www.b.com',
changeOrigin: true,
pathRewrite: {
'^/api': '/api',
},
},
},
},
};

以上代碼中，我們配置了Vue項目的devServer，通過proxy將/api下的請求轉(zhuǎn)發(fā)到http://www.b.com地址。changeOrigin設置了是否跨域，pathRewrite設置了請求地址的替換規(guī)則，也就是將/api替換為/api。這樣就可以在開發(fā)環(huán)境中進行跨域請求。

總結(jié)一下，Vue項目的跨域請求問題可以通過Nginx反向代理和axios的proxyTable來解決。這樣就可以在線上正常使用Vue項目，與后端進行交互，獲取所需的數(shù)據(jù)。