Vue CLI 是一款快速開發(fā) Vue.js 應(yīng)用程序的標(biāo)準(zhǔn)工具集，它為開發(fā)者提供了豐富的插件集合，讓開發(fā)者能夠更加便捷地進(jìn)行前端開發(fā)。在 Vue CLI 中，跨域請求是一項(xiàng)非常重要的功能，因?yàn)樵S多開發(fā)者在前后端分離的開發(fā)模式下需要進(jìn)行跨域請求。本文將會詳細(xì)介紹 Vue CLI 中的跨域請求功能。

在 Vue CLI 中，實(shí)現(xiàn)跨域請求的方式有兩種：一種是通過配置代理服務(wù)器，另一種是通過在開發(fā)環(huán)境中使用 webpack-dev-server 的 proxyTable 屬性。下面我們將分別介紹這兩種方式的實(shí)現(xiàn)方法。

第一種方式是通過配置代理服務(wù)器進(jìn)行跨域請求。首先需要在 package.json 文件中添加一個腳本命令，用于啟動代理服務(wù)器。具體命令如下：

"scripts": {
"serve": "vue-cli-service serve",
"proxy": "node build/proxy.js"
}

在上述代碼中，我們添加了一個名為 proxy 的腳本命令，并將其映射到了 build/proxy.js 文件。接著，我們需要在 build/proxy.js 文件中編寫代理服務(wù)器的代碼：

const express = require('express')
const httpProxy = require('http-proxy')
const app = express()
const proxy = httpProxy.createProxyServer()
app.all('/api/*', (req, res) =>{
proxy.web(req, res, {
target: 'http://localhost:8080'
})
})
app.listen(3000, () =>{
console.log('Proxy server is running on port 3000')
})

在上述代碼中，我們使用了 Express 框架和 http-proxy 模塊，構(gòu)建了一個簡單的代理服務(wù)器。代理服務(wù)器監(jiān)聽 3000 端口，并將所有 /api/* 開頭的請求轉(zhuǎn)發(fā)到本地的 8080 端口。

第二種方式是通過在開發(fā)環(huán)境中使用 webpack-dev-server 的 proxyTable 屬性進(jìn)行跨域請求。我們只需要在 config/index.js 中進(jìn)行如下配置：

module.exports = {
dev: {
// ...
proxyTable: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
pathRewrite: {
'^/api': '/api'
}
}
}
}
// ...
}

在上述代碼中，我們使用了 webpack-dev-server 的 proxyTable 屬性，將所有 /api 開頭的請求轉(zhuǎn)發(fā)到本地的 8080 端口，并將請求頭中的 Origin 字段改為代理服務(wù)器所在的域名。

總結(jié)來說，Vue CLI 提供了兩種方式實(shí)現(xiàn)跨域請求：一種是通過配置代理服務(wù)器，另一種是通過在開發(fā)環(huán)境中使用 webpack-dev-server 的 proxyTable 屬性。開發(fā)者可以根據(jù)實(shí)際情況來選擇合適的方式進(jìn)行跨域請求。希望本文能夠?qū)δ?Vue CLI 中實(shí)現(xiàn)跨域請求的過程有所幫助。