1

私のセットアップは次のとおりです。

  • カスタム TLD を localhost に向けるカスタム DNS サーバー
  • リバース プロキシとしての nginx
  • golang バックエンド
  • vue-cli による VueJS フロントエンド

私が望むのは、API とフロントエンドの両方を sub.domain.tld に配置することです。ここで、/api は API にリバース プロキシし、他のすべては vuejs 開発サーバーに移動します。

私が持っている現在のnginx構成は私のニーズに合わせて機能していますが、vue devserverの接続を妨げています:

server {
        listen      80;
        server_name sub.domain.tld;
        return 301 https://$server_name$request_uri;
}

server {
        listen 443 ssl http2;
        server_name sub.domain.tld;

        ssl_certificate /opt/ssl/domain.tld.pem;
        ssl_certificate_key /opt/ssl/domain.tld-key.pem;

        include snippets/ssl.conf;

        access_log /tmp/nginx.log combined;

        add_header 'Access-Control-Allow-Origin' "*" always;
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,X-Refresh-Token';

        location /auth {
                if ($request_method = OPTIONS ) {
                        add_header "Access-Control-Allow-Origin"  "*" always;
                        add_header "Access-Control-Allow-Methods" "GET, POST, OPTIONS, HEAD";
                        add_header "Access-Control-Allow-Headers" "Authorization, Origin, X-Requested-With, Content-Type, Accept, X-Refresh-Token";
                        return 200;
                }

                proxy_pass http://localhost:2394;
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
        }

        location / {
                if ($request_method = OPTIONS ) {
                        add_header "Access-Control-Allow-Origin"  "*" always;
                        add_header "Access-Control-Allow-Methods" "GET, POST, OPTIONS, HEAD";
                        add_header "Access-Control-Allow-Headers" "Authorization, Origin, X-Requested-With, Content-Type, Accept, X-Refresh-Token";
                        return 200;
                }

                proxy_pass http://localhost:8935;
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
        }
}

そして vue.config.js:

module.exports = {
        devServer: {
                disableHostCheck: true,
                proxy: 'https://sub.domain.tld/'
        }
}

唯一の問題は、vue-cli に含まれているライブ エラー表示/ライブ更新を推測すると、まだエラーが発生することです (フランス語で申し訳ありませんが、基本的には CORS エラー メッセージです)。

Blocage d’une requête multiorigines (Cross-Origin Request) : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur https://192.168.1.12:8935/sockjs-node/info?t=1609950092054. Raison : échec de la requête CORS.
4

1 に答える 1

1

そのため、最終的には次のセットアップで動作するようになりました。

vue-cli / webpack に、ブラウザーが指定された URL からアクセスすることを知らせます。

vue.config.js

module.exports = {
  publicPath: '/app/', // Only required if the app is not at the root
  devServer: {
    "public": "sub.domain.tld"
  }
}

次に、nginx を正しく構成するだけです。この場合、すべてが同じドメインから提供されるため、CORS は必要ありません。

server {
        listen      80;
        server_name sub.domain.tld;
        return 301 https://$server_name$request_uri;
}

server {
        listen 443 ssl http2;
        server_name sub.domain.tld;

        ssl_certificate /opt/ssl/domain.tld.pem;
        ssl_certificate_key /opt/ssl/domain.tld-key.pem;

        include snippets/ssl.conf;

        access_log /tmp/nginx.log combined;

        # My golang backend
        location / {
            proxy_pass http://localhost:1635;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "Upgrade";
            proxy_set_header Host $host;
        }

        # My VueJS app
        location /app {
            proxy_pass http://localhost:8080;
        }

        # Access for webpack WS for debug
        location /sockjs-node {
            proxy_pass http://localhost:8080;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "Upgrade";
            proxy_set_header Host $host;
        }

        # Since I'm building my app on a sub-path I want the root to redirect to it
        location = / {
            return 301 $scheme://$host/app;
        }
}
于 2021-02-02T20:48:47.003 に答える