如何在 nginx conf debug

利用  add_header 特性 把 要除錯的 目標寫在裡面

set $cors '';
            if ($http_origin ~ '^https?://(localhost|www\.g\.com|www\.g2\.com|g\.com|fun588\.com|g3\.com)') {
                    set $cors 'true';
            }
        
            if ($cors = 'true') {
                    add_header 'cors : ' $cors ; //假設我今天想觀察該變數運行
                    //注意 字串部份不能使用特殊符號 會印不出來
                    add_header 'Access-Control-Allow-Origin' "$http_origin" always;
                    add_header 'Access-Control-Allow-Credentials' 'true' always;

我們就可以在 瀏覽器 工具模式下 Headers 找到 印出的變數

nginx 限制 domain 域名 ( Nginx restrict domains )

當客戶端 跨域名存取 檔案時 會遇到 allow cross domain 限制
基本上可以針對 POST , GET 在 nginx 做相對映的設定

location / {
     if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        #
        # Custom headers and headers various browsers *should* be OK with but aren't
        #
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        #
        # Tell client that this pre-flight info is valid for 20 days
        #
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain; charset=utf-8';
        add_header 'Content-Length' 0;
        return 204;
     }
     if ($request_method = 'POST') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
     }
     if ($request_method = 'GET') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
     }
}

上述表示結果 任何條件都開放
如果要有條件開放 部份域名才能訪問

set $cors '';
if ($http_origin ~* 'https?://(localhost|www\.example\.com|m\.example\.com)') {
        set $cors 'true';
}

if ($cors = 'true') {
        add_header 'Access-Control-Allow-Origin' "$http_origin";
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Mx-ReqToken,X-Requested-With';
}

[ HTML5 ] 影響網頁效能筆記,

1. 在 css 使用過多的 position

2. 使用 css 去處理過多 表格 child 計算

3.  使用 Fix 固定表格

https://blog.miniasp.com/post/2009/04/20/Use-CSS-table-layout-property-to-speed-up-table-rendering.aspx

當你的表格擁有固定的寬度，例如版面寬度定義為 950px 時，只要將 <table> 的 table-layout 屬性設定成 fixed，並且再設定 width 屬性，就會明顯感覺到表格在下載 HTML 的過程中不會等待 </table> 讀完就會直接顯示表格內容，速度將會差非常多。