[筆記] 解決 Vue 專案的 localhost:8080/sockjs-node 的無效請求

Posted on2019-12-212019-12-18AuthorANDY LIEN

章節連結

步驟
參考資料
其他 Vue.js 相關文章

這篇是解決不時在測試 Vue 專案上時，常會在瀏覽器的 console 內看見的無效 GET 請求如：http://localhost:8080/sockjs-node/info?t=<一串亂數>，要如何處理。

步驟

1.若是處在開發階段看到的話，會因為你所在的虛擬網路環境的IP位置不同，而導致出現這個錯誤。例如說你由 192.168.1.XXX 換成 10.84.12.XXX 之類的，那麼你的 localhost 的 IP 就變了。解決方法就是重新啟動伺服器就好。
2.若是正式上線環境，那麼要檢查域名和IP對照彼此之間有無錯誤。

// dev mode
// 1. 先退出現有的伺服器 
// 2. 重新啟動
npm run serve

// prodution mode
// 1. 在專案根目錄下新增 vue.config.js
// 2. 配置參考：
module.exports = {
    /* 部署環境URL*/
    publicPath: process.env.NODE_ENV === 'production' ? './' : '',
    /* webpack-dev-server */
    devServer: {
        /* 自動開啟瀏覽器 */
        open: true,
        /* IP設置，0.0.0.0是所有輸入都可訪問 */
        host: '0.0.0.0',
        port: 8000,
        https: false,
        hotOnly: false,
        /* 使用代理 */
        proxy: {
            '/api': {
                /* proxy 位置 */
                target: 'http://localhost:9005/',
                /* 允許跨域 */
                changeOrigin: true,
            },
        },
    }
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

// dev mode

// 1. 先退出現有的伺服器

// 2. 重新啟動

npm run serve

// prodution mode

// 1. 在專案根目錄下新增 vue.config.js

// 2. 配置參考：

module.exports = {

/* 部署環境URL*/

publicPath: process.env.NODE_ENV === 'production' ? './' : '',

/* webpack-dev-server */

devServer: {

/* 自動開啟瀏覽器 */

open: true,

/* IP設置，0.0.0.0是所有輸入都可訪問 */

host: '0.0.0.0',

port: 8000,

https: false,

hotOnly: false,

/* 使用代理 */

proxy: {

'/api': {

/* proxy 位置 */

target: 'http://localhost:9005/',

/* 允許跨域 */

changeOrigin: true,

},

},

}

}

P.S. Vue.config.js 要自行在專案的根目錄中新增。

參考資料

1. vue.config.js 配置
2. vue-cli 3.0 配置文件 vue.config.js
3. 项目运行时一直发http://localhost:8080/sockjs-node/info?t=1462183700002请求

其他 Vue.js 相關文章

★全文分享★ [筆記] Vue 按鈕 / 篩選資料架構

[筆記] Vue 按鈕 / 篩選資料架構

這是一篇在 Vue 上實作按鈕 / 篩選器的資

★全文分享★ [指南] Vue.js 搭配 Docker 進行佈署

[指南] Vue.js 搭配 Docker 進行佈署

Docker 是個運用了虛擬化技術的套件，讓不

★全文分享★ [筆記] Vue-Carousel 輕量化輪撥套件介紹

[筆記] Vue-Carousel 輕量化輪撥套件介紹

說到 Carousel 輪撥系列的套件，Swiper 可以

★全文分享★ [筆記] 在 Vue 中正確引用 src/assets 裡的圖片

[筆記] 在 Vue 中正確引用 src/assets 裡的圖片

在 Vue 專案內放於 src/assets 裡面的圖片檔

★全文分享★ [筆記] 將 Vue 專案自動佈署到 Github Pages 上

[筆記] 將 Vue 專案自動佈署到 Github Pages 上

每次完成了一個 Vue 專案，要佈署到 Github

★全文分享★ [筆記] Vue 如何監控視窗寬度，並讓每個 component 可以取用

[筆記] Vue 如何監控視窗寬度，並讓每個 component 可以取用

Vue 的專案裡，若要監測使用者的視窗大小

★全文分享★ [指南] 在 Vue 專案中，修改樣式方法

[指南] 在 Vue 專案中，修改 <body data-lazy-src=

樣式方法” title=”[指南] 在 Vue 專案中，修改樣式方法”>

在 Vue 專案中，若要修改對於 <body> 上

★全文分享★ [筆記] 從 Vue CLI 3 開始建立規模化專案

[筆記] 從 Vue CLI 3 開始建立規模化專案

用 Vue CLI 3，可以快速的建立一個 Vue 專案

★全文分享★ [筆記] 運用 Moment.js 製作 AM / PM 時間外掛

[筆記] 運用 Moment.js 製作 AM / PM 時間外掛

運用 Vue 和 Moment.js 來將 input-time 的 12 小

★全文分享★ [筆記] CodeSandbox 線上編輯器模擬前端框架

[筆記] CodeSandbox 線上編輯器模擬前端框架

隨著前端框架的發展，當需要多人編輯、

★全文分享★ [筆記] 工字型樣板，長方形依照比例縮放

[筆記] 工字型樣板，長方形依照比例縮放

這回要挑戰工字型( I-Shape )的顯示樣板。

★全文分享★ [筆記] Element-UI 的自定義表格邊框樣式

[筆記] Element-UI 的自定義表格邊框樣式

Element UI 的表格算是非常常用的模組化套

★全文分享★ [筆記] Vue 關於 slot-scope 的簡易認知

[筆記] Vue 關於 slot-scope 的簡易認知

Vue 的 slot 系列使用方法，頭一回在 Element-

★全文分享★ [筆記] Vue Watch 監聽並延後發送請求

[筆記] Vue Watch 監聽並延後發送請求

當使用 Vue Watch 的事件監聽時，若有要觸

★全文分享★ [筆記] Element UI Table 表格表頭縱向顯示

[筆記] Element UI Table 表格表頭縱向顯示

這回在從事公司專案時，遇上了一個稍嫌

★全文分享★ [筆記] Vue SCSS 使用 Deep Selectors

[筆記] Vue SCSS 使用 Deep Selectors

在 Vue Sass 的使用方法上，若你有和其他的

★全文分享★ [筆記] Vue 使用 SCSS

[筆記] Vue 使用 SCSS

運用 Vue-cli 建立的專案，若要使用 SCSS 來

★全文分享★ [筆記] 自定義 Element UI 標題欄位遇上 Vue/no-unused error 的解決方法

[筆記] 自定義 Element UI 標題欄位遇上 Vue/no-unused error 的解決方法

在 Vue template 的檔案，有時會需要運用到 s

★全文分享★ [筆記] Vue 生命週期

[筆記] Vue 生命週期

每一個 Vue Instance 在創建時，都會經歷過

★全文分享★ [筆記] Vue 單元測試初探

[筆記] Vue 單元測試初探

隨著程式開發越來越龐大，那麼以「程式

★全文分享★ [筆記] Vue2 Perfect-Scrollbar 置底開始

[筆記] Vue2 Perfect-Scrollbar 置底開始

Vue 的 Perfect-Scrollbar 套件，是 Vue 中滿常使

★全文分享★ [筆記] Vue 的狀態管理 Vuex 實作心得

[筆記] Vue 的狀態管理 Vuex 實作心得

Vuex 是 Vue 中用於狀態管理的工具，你可以

★全文分享★ [筆記] Vue 自訂綁定 style 標籤

[筆記] Vue 自訂綁定 style 標籤

Vue 中的 v-bind 有一些預設的 style 選項如 :d

★全文分享★ [筆記] Body-Parser 無法解析的 FormData 解決方案 – multer

[筆記] Body-Parser 無法解析的 FormData 解決方案 – multer

運用 express 的框架來架設後端的 Node.js 伺

★全文分享★ [筆記] Vue 頁面元件定時自動跳轉

[筆記] Vue 頁面元件定時自動跳轉

當 Vue 頁面需要定時自動跳轉的功能時，

★全文分享★ [筆記] Vue 刷新當前頁面

[筆記] Vue 刷新當前頁面

Vue 的使用上，若是要進行完某個操作後重

★全文分享★ [全端開發] 打造一個公開聊天室 Vue.js+MySQL+Socket.io+passport-jwt

[全端開發] 打造一個公開聊天室 Vue.js+MySQL+Socket.io+passport-jwt

這回實際演練來打造一個即時聊天室來練

★全文分享★ [筆記] BootstrapVue Pagination Vue 分頁套件使用

[筆記] BootstrapVue Pagination Vue 分頁套件使用

在網路世界中常用的前端 css 套件 – Bootstra

★全文分享★ [筆記] Vue 避免 ESLint 的 Unexpected Console Statement

[筆記] Vue 避免 ESLint 的 Unexpected Console Statement

當運用官方套件迅速建立一個 Vue 專案後

★全文分享★ [筆記] Vue-cli 輸出 console.log 的結果

[筆記] Vue-cli 輸出 console.log 的結果

使用 Vue-cli 輸出頁面結果到網頁上時，若

★全文分享★ [筆記] Vue.js 前端分頁、搜尋表格內容 – 運用 props, data, computed, methods, watch

[筆記] Vue.js 前端分頁、搜尋表格內容 – 運用 props, data, computed, methods, watch

運用 Vue.js 前端框架，將發送到後端 API 請

★全文分享★ [筆記] 解決 Vue-cli 打包後，無法顯示 Favicon 的問題

[筆記] 解決 Vue-cli 打包後，無法顯示 Favicon 的問題

Vue-cli 運用 npm run build 將專案打包成靜態

★全文分享★ [筆記] 全端開發本機端資料互通 Vue.config.js 設定

[筆記] 全端開發本機端資料互通 Vue.config.js 設定

在本機端執行前後端(全端)共同開發時，

★全文分享★ [筆記] Vue.js & Node.js 專案初始化筆記

[筆記] Vue.js & Node.js 專案初始化筆記

這篇主要是筆記下如何快速的在本機端生

按讚加入粉絲團

延伸閱讀

Blogimove部落格搬家技術服務