面試被問跨域問題，怎么破？

點(diǎn)擊關(guān)注公眾號(hào)，Java干貨及時(shí)送達(dá)

作者：酒香逢

來源：www.cnblogs.com/fnz0/p/15803011.html

當(dāng)你遇到跨域問題，不要立刻就選擇復(fù)制去嘗試，請(qǐng)?jiān)敿?xì)看完這篇文章再處理，我相信它能幫到你。

分析前準(zhǔn)備：

前端網(wǎng)站地址：http://localhost:8080
服務(wù)端網(wǎng)址：http://localhost:59200

• Access-Control-Allow-Origin 用于設(shè)置允許跨域請(qǐng)求源地址 （預(yù)檢請(qǐng)求和正式請(qǐng)求在跨域時(shí)候都會(huì)驗(yàn)證）
• Access-Control-Allow-Headers 跨域允許攜帶的特殊頭信息字段 （只在預(yù)檢請(qǐng)求驗(yàn)證）
• Access-Control-Allow-Methods 跨域允許的請(qǐng)求方法或者說HTTP動(dòng)詞 （只在預(yù)檢請(qǐng)求驗(yàn)證）
• Access-Control-Allow-Credentials 是否允許跨域使用cookies，如果要跨域使用cookies，可以添加上此請(qǐng)求響應(yīng)頭，值設(shè)為true（設(shè)置或者不設(shè)置，都不會(huì)影響請(qǐng)求發(fā)送，只會(huì)影響在跨域時(shí)候是否要攜帶cookies，但是如果設(shè)置，預(yù)檢請(qǐng)求和正式請(qǐng)求都需要設(shè)置）。不過不建議跨域使用（項(xiàng)目中用到過，不過不穩(wěn)定，有些瀏覽器帶不過去），除非必要，因?yàn)橛泻芏喾桨缚梢源妗?/span>

開始動(dòng)手模擬：

server {
    listen       22222;
    server_name  localhost;
    location  / {
        proxy_pass  http://localhost:59200;
    }
}

情況1：

Access to XMLHttpRequest at 'http://localhost:22222/api/Login/TestGet' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

server {
    listen       22222;
    server_name  localhost;
    location  / {
       add_header Access-Control-Allow-Origin 'http://localhost:8080';
       proxy_pass  http://localhost:59200;
    }
}

server {
    listen       22222;
    server_name  localhost;
    location  / {
       add_header Access-Control-Allow-Origin 'http://localhost:8080' always;
       proxy_pass  http://localhost:59200;
    }
}

情況2：

Access to XMLHttpRequest at 'http://localhost:22222/api/Login/TestGet' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

server {
    listen       22222;
    server_name  localhost;
    location  / {
       add_header Access-Control-Allow-Origin 'http://localhost:8080' always;
       if ($request_method = 'OPTIONS') {
            return 204;
       }
       proxy_pass  http://localhost:59200;
    }
}

情況3：

Access to XMLHttpRequest at 'http://localhost:22222/api/Login/TestGet' from origin 'http://localhost:8080' has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.

server {
    listen       22222;
    server_name  localhost;
    location  / {
       add_header Access-Control-Allow-Origin 'http://localhost:8080' always;
       if ($request_method = 'OPTIONS') {
           add_header Access-Control-Allow-Headers 'authorization'; #為什么寫在if里面而不是接著Access-Control-Allow-Origin往下寫？因?yàn)檫@里只有預(yù)檢請(qǐng)求才會(huì)檢查
           return 204;
      }
    proxy_pass http://localhost:59200;
}
}

There could be several add_header directives. These directives are inherited from the previous level if and only if there are no add_header directives defined on the current level.

意思就是當(dāng)前層級(jí)無 add_header 指令時(shí)，則繼承上一層級(jí)的add_header。相反的若當(dāng)前層級(jí)有了add_header，就應(yīng)該無法繼承上一層的add_header。

server {
    listen       22222;
    server_name  localhost;
    location  / {
        add_header Access-Control-Allow-Origin 'http://localhost:8080' always;
        if ($request_method = 'OPTIONS') {
            add_header Access-Control-Allow-Origin 'http://localhost:8080';
            add_header Access-Control-Allow-Headers 'authorization';
            return 204;
        }
        proxy_pass  http://localhost:59200;
    }
}

server {
    listen       22222;
    server_name  localhost;
    location  / {
        if ($request_method = 'OPTIONS') {
            add_header Access-Control-Allow-Origin 'http://localhost:8080';
            add_header Access-Control-Allow-Headers 'authorization';
            return 204;
        }
        if ($request_method != 'OPTIONS') {
            add_header Access-Control-Allow-Origin 'http://localhost:8080' always;
        }
        proxy_pass  http://localhost:59200;
    }
}

情況4：

Access to XMLHttpRequest at 'http://localhost:22222/api/Login/TestGet' from origin 'http://localhost:8080' has been blocked by CORS policy: Method PUT is not allowed by Access-Control-Allow-Methods in preflight response.

server {
    listen 22222;
    server_name localhost;
    location / {
        if ($request_method = 'OPTIONS') {
            add_header Access-Control-Allow-Origin 'http://localhost:8080';
            add_header Access-Control-Allow-Headers 'content-type,authorization';
            add_header Access-Control-Allow-Methods 'PUT';#為這么只加在這個(gè)if中，不再下面的if也加上？因?yàn)檫@里只有預(yù)檢請(qǐng)求會(huì)校驗(yàn)，當(dāng)然你加上也沒事。
            return 204;
        }
        if ($request_method != 'OPTIONS') {
            add_header Access-Control-Allow-Origin 'http://localhost:8080' always;
        }
        proxy_pass http://localhost:59200;
    }
}

情況5：

Access to XMLHttpRequest at 'http://localhost:22222/api/Login/TestGet' from origin 'http://localhost:8080' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values '*, http://localhost:8080', but only one is allowed.

↓ ↓ ↓ ↓ ↓

server {
    listen       22222;
    server_name  localhost;
    location  / {
        if ($request_method = 'OPTIONS') {
            add_header Access-Control-Allow-Origin 'http://localhost:8080';
            add_header Access-Control-Allow-Headers '*';
            add_header Access-Control-Allow-Methods '*';
            add_header Access-Control-Allow-Credentials 'true';
            return 204;
        }
        if ($request_method != 'OPTIONS') {
            add_header Access-Control-Allow-Origin 'http://localhost:8080' always;
            add_header Access-Control-Allow-Credentials 'true';
        }
        proxy_pass  http://localhost:59200;
    }
}

或者：

server {
    listen       22222;
    server_name  localhost;
    location  / {
        add_header Access-Control-Allow-Origin 'http://localhost:8080' always;
        add_header Access-Control-Allow-Headers '*';
        add_header Access-Control-Allow-Methods '*';
        add_header Access-Control-Allow-Credentials 'true';
        if ($request_method = 'OPTIONS') {
            return 204;
        }
        proxy_pass  http://localhost:59200;
    }
}

  
往
期
推
薦
1、社區(qū)糾紛不斷：程序員何苦為難程序員？
2、該死的單元測(cè)試，寫起來到底有多痛？
3、互聯(lián)網(wǎng)人為什么學(xué)不會(huì)擺爛
4、為什么國外JetBrains做 IDE 就可以養(yǎng)活自己，國內(nèi)不行？區(qū)別在哪？
5、相比高人氣的Rust、Go，為何 Java、C 在工具層面進(jìn)展緩慢？
6、讓程序員早點(diǎn)下班的《技術(shù)寫作指南》
點(diǎn)分享
點(diǎn)收藏
點(diǎn)點(diǎn)贊
點(diǎn)在看