對于使用Vue開發前端應用的開發者而言，涉及到跨域問題時常會考慮使用JSONP方式來解決。JSONP是一種跨域請求數據的方案，可以通過script標簽來實現，但是要注意的是該方案只支持GET請求。

在Vue中，JSONP的使用很簡單，只需要配置axios的jsonpAdapter即可：

axios.defaults.jsonp = true;
axios.defaults.jsonpAdapter = function (config) {
return new Promise(function (resolve, reject) {
window[config.jsonpCallback] = function (res) {
resolve({
data: res
});
};
var script = document.createElement('script');
var callback = config.jsonpCallback || 'jsonpCallback';
script.src = config.url + '&callback=' + callback;
document.body.appendChild(script);
});
}

這里我們重點看一下jsonpAdapter的具體實現：

axios.defaults.jsonpAdapter = function (config) {
return new Promise(function (resolve, reject) {
// 創建JSONP回調函數
window[config.jsonpCallback] = function (res) {
resolve({
data: res
});
};
// 創建script標簽
var script = document.createElement('script');
// JSONP的回調函數名，默認為jsonpCallback
var callback = config.jsonpCallback || 'jsonpCallback';
// 設置script標簽的src屬性
script.src = config.url + '&callback=' + callback;
document.body.appendChild(script);
});
}

通過設置jsonp參數為true，axios就會使用默認的JSONP適配器來處理請求。

使用時，我們只需要在請求時指定jsonpCallback參數即可，例如：

axios({
url: '/api/data',
params: {
callback: 'handleData'
}
}).then(function (res) {
console.log(res.data);
}).catch(function (err) {
console.log(err);
});

以上就是Vue中使用JSONP的配置方法，在使用的過程中需要注意請求URL中是否有callback參數，以及JSONP回調函數名的保持一致。