最近在一個(gè)項(xiàng)目中遇到網(wǎng)站跨域訪問的問題距贷，花了半天時(shí)間來研究穗慕，并記錄一下：
問題：
兩個(gè)網(wǎng)站蝙寨，A網(wǎng)站需要調(diào)用B網(wǎng)站的restful API，B網(wǎng)站采用oauth2.0 進(jìn)行授權(quán)喜德，所以A網(wǎng)站在訪問B網(wǎng)站時(shí)女器，需要在請(qǐng)求頭中加入Authorization: bear token。
解決方案1-添加跨域注解：
B網(wǎng)站是一個(gè)Spring Boot項(xiàng)目住诸，可以在B網(wǎng)站中對(duì)需要進(jìn)行跨域訪問的API加入CrossOrigin注解
@CrossOrigin("*")
@RequestMapping("/user")
class UserController {
}
這種方案最簡(jiǎn)單，但是需要修改源代碼涣澡，并重新部署贱呐。因?yàn)槲覀兪褂昧薔ginx作為反向代理，所以決定通過修改Ningx配置達(dá)到目的入桂。
解決方案2-修改Nignx 配置
因?yàn)槲覀兪褂昧薔ginx作為反向代理奄薇，而Nginx修改配置后可以熱加載，所以對(duì)線上項(xiàng)目更小抗愁，并且將來如果需要添加更多的跨域配置馁蒂，都不用修改源代碼呵晚，重新部署。
跨域原理
先來談?wù)効缬蛟砟牛珹網(wǎng)站如果要能夠跨域訪問B網(wǎng)站饵隙，那么B網(wǎng)站的response header中，必須包含以下值：
Access-Control-Allow-Origin: *
后邊的*表示允許所有網(wǎng)站對(duì)B網(wǎng)站進(jìn)行跨域訪問沮脖，如果你只允許某幾個(gè)網(wǎng)站對(duì)B網(wǎng)站進(jìn)行跨域訪問金矛，那么把*改成對(duì)應(yīng)的域名即可，中間用空格分開勺届，如
Access-Control-Allow-Origin: 'https://www.baidu.com' 'https://www.taobai.com'
對(duì)于跨域訪問的某些請(qǐng)求驶俊，在發(fā)送正式請(qǐng)求之前，瀏覽器會(huì)先向服務(wù)器發(fā)送一個(gè)OPTIONS類型的預(yù)檢請(qǐng)求免姿，對(duì)服務(wù)器進(jìn)行詢問饼酿，是否支持我接下來要發(fā)送的請(qǐng)求。如果服務(wù)器回復(fù)支持胚膊，那么瀏覽器就繼續(xù)發(fā)送正式請(qǐng)求故俐，如果服務(wù)器回復(fù)不支持，那么瀏覽器就不會(huì)發(fā)送正式請(qǐng)求了澜掩。
對(duì)于什么時(shí)候?yàn)g覽器會(huì)發(fā)送OPTIONS购披，請(qǐng)參考什么時(shí)候發(fā)送options請(qǐng)求
在我們這個(gè)case中，因?yàn)锽網(wǎng)站是采用oauth2.0進(jìn)行校驗(yàn)的肩榕，A網(wǎng)站在發(fā)送請(qǐng)求時(shí)刚陡，需要在header中加上Authorization: bear token，這滿足瀏覽器發(fā)送option請(qǐng)求的條件株汉。所以服務(wù)器需要首先對(duì)options進(jìn)行回復(fù)筐乳，告訴瀏覽器其是否支持它接下來的請(qǐng)求。
解決方案
讓Nginx服務(wù)器來處理options請(qǐng)求乔妈，將正式請(qǐng)求轉(zhuǎn)發(fā)到B網(wǎng)站蝙云。
Nginx配置如下：
server {
listen 443 ssl;
server_name website-b.com;
# 對(duì)B網(wǎng)站添加A網(wǎng)站的跨域訪問支持
add_header 'Access-Control-Allow-Origin' https://www.website-a.com;
add_header 'Access-Control-Allow-Credentials' true;
add_header 'Access-Control-Allow-Headers' *;
add_header 'Access-Control-Allow-Methods' *;
add_header 'Access-Control-Expose-Headers' *;
location / {
# 所有的OPTIONS請(qǐng)求，返回204,
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' *;
add_header 'Access-Control-Allow-Methods' *;
add_header 'Access-Control-Allow-Headers' *;
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain; charset=utf-8';
add_header 'Content-Length' 0;
return 204;
}
proxy_pass http://website-b-backend/;
}
}
upstream website-b-backend {
server 10.96.0.3:80 max_fails=1 fail_timeout=3s;
}
轉(zhuǎn)自曾彪彪的個(gè)人博客路召，轉(zhuǎn)載請(qǐng)注明出處勃刨。
