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

一直報錯：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 的響應結果：

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

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