Docker 環境下 Vue dev 跨域的深刻回憶

wonderfate發表於2020-09-17

一直報錯:Proxy error: Could not proxy request /authorizations from localhost:8080 to localhost:8000 (ECONNREFUSED).

ECONNREFUSED (Connection refused) 說是連線不活動的主機

終於 Google 到了問題所在,我居然又給忘記了 Docker容器和橋接網路的區別,上次第一次接觸 Docker 時也遇到過,但給忘了。沒完全理解這概念
傳送門:stackoverflow 的答案

VUE 程式碼

.env.development:

# base api
VUE_APP_BASE_API = '/api'

vue.config.js:

devServer: {
    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: 'http://nginx:8000', // 這樣才能正確訪問到
        // target: 'http://localhost:8000', 這是錯誤的程式碼,連線不到 後臺Api介面 的 nginx 容器
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    }
  },

Docker nginx 配置:

server {
    listen 8000; # 埠為 8000

    server_name fate-shop.com;
    root /var/www/shop/public;    # 這是後臺 API 
    index index.php index.html index.htm;

    location / {
        try_files $uri $uri/ /index.php$is_args$args;
    }
    .
    .
    .
}

請求示例程式碼

例如登入的後臺 API 為 http://fate-shop.com/authorizations

// /api 意思為 proxy.pathRewrite 當請求地址有 /api 時轉為空字串
// 這裡實際就是請求了  http://fate-shop.com/authorizations
axios.post('/api/authorizations', {
    username: 'Fate',
    password: '123456'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

devServer.proxy.target 為 localhost:8000 的響應結果:

Docker 環境下 Vue 跨域的深刻回憶

Docker 環境下 Vue 跨域的深刻回憶

devServer.proxy.target 為 nginx:8000 的響應結果:

Docker 環境下 Vue 跨域的深刻回憶

Docker 環境下 Vue 跨域的深刻回憶

本作品採用《CC 協議》,轉載必須註明作者和本文連結

相關文章