在項目根目錄下創建vue.config.js文件：

vue.config.js:

module.exports = {devServer: {host: 'localhost',port: 8080,https: false,open: false, // 配置自動啟動瀏覽器hotOnly: true, // 是否熱更新proxy: {'/api': { // 路徑中有 /api 的請求都會走這個代理target: 'http://127.0.0.1:5000/api/', // 要訪問的接口域名ws: true, // 是否啟用 websockets// secure: false,changeOrigin: true,// 開啟代理：在本地會創建一個虛擬服務端，// 然后發送請求的數據，并同時接收請求的數據，// 這樣服務端和服務端進行數據的交互就不會有跨域問題pathRewrite: {'^/api': '' // 這里理解成用/api代替target里面的地址，即去掉路徑中的/api 的這一截}}}} }

/api實際上是一層攔截，當我們前端訪問到這個路由時，會自動代理到我們taregt中的內容，然后將

changeOrigin改為true，這句話的意思時是否將主機頭的原點更改為目標的請求頭。pathRewrite是將api路由地址更改為某一個值，我們這里給空。

? 我們這里的服務器使用的是nodejs，且端口為5000，我們web項目服務器端口為8080，因此這里web端訪問服務器時就會跨域。

由上圖課之，請求成功了，解決了跨域問題，接著我們再看一下Request URL中的內容，我們發現這里的主機名以及端口都是我們前端web服務器的。就好像這個接口是我們同源下的接口，然后內部實際上訪問的是http://127.0.0.1:5000/api/users/register

總結

以上是生活随笔為你收集整理的vue-cli4.x 中 配置允许跨域请求的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。