1問題背景
公司項目調(diào)試期間，瀏覽網(wǎng)頁的時候可能會瀏覽失敗，調(diào)出F12查看報錯，會看到以下報錯信息?No 'Access-Control-Allow-Origin' header is present on the requested resource.Origin?
出現(xiàn)此類報錯的時候說明出現(xiàn)了跨域問題
跨域的意思是使用js獲取數(shù)據(jù)時，涉及到的兩個url只要協(xié)議、域名、端口有任何一個不同，都被當(dāng)作是不同的域，相互訪問就會有跨域問題。
例如你的web域名是www.a.com.cn,登錄的時候會調(diào)用www.b.cn上面的資源,此時就會出現(xiàn)跨域
2解決方法
拿以上案例來說，a域名要去請求b域名的資源，那么b域名的nginx的配置中，就要設(shè)置允許跨域訪問（注意：此方法僅適用于使用nginx的web項目）。
方法1：通用配置
在nginx 的b域名的server? location配置下面增加如下配置
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,X-Requested-With';
add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE';
配置介紹
1）add_header 'Access-Control-Allow-Origin' '*';#允許指定的域名訪問所在域的資源，比如允許a訪問b的資源，那就就在b的location里面寫上add_header 'Access-Control-Allow-Origin' 'www.a.com.cn'，
后面的域名可以用*號代替，*號代表所有的域。假如說我們還有c域名，d域名等等的n個域也想訪問b的資源的時候，我們就沒辦法手動配置那么多的域名了，所以我們就用*號來代表所有的域
2）add_header 'Access-Control-Allow-Credentials' 'true';#表示是否允許發(fā)送Cookie，該字段是可選的，默認情況下，Cookie不包括在CORS請求之中。設(shè)為true，即表示服務(wù)器明確許可，Cookie可以包含在請求中，一起發(fā)給服務(wù)器。這個值也只能設(shè)為true，
3）add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,X-Requested-With';#服務(wù)器支持的所有頭信息字段，后面可添加的字段很多，我們可以多添加一點，防止有些頭信息字段不支持，后可添加的字段詳細配置可參考https://www.w3.org/TR/cors/#access-control-allow-headers-response-header
4）add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE';#服務(wù)器支持的所有跨域請求的方法，其實方法無非就那么幾個，get，post，options，put，delete等等，但是還是要跟開發(fā)的確認好，防止有些方法不支持
一般來說，nginx加上這些配置就可以解決跨域問題了，如果還是不行的話，我們就嘗試下面這種方法
方法2：特殊配置
if ($request_method = 'OPTIONS') {
? ? ?add_header 'Access-Control-Allow-Origin' '*';
? ? ?add_header 'Access-Control-Allow-Credentials' 'true';
? ? ?add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, PATCH,? ? ? ?OPTIONS';
? ? ?add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-? ? ? ? ?Alive,User-? Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-? ? ? ? ? ? ? ? Type,Authorization,token';? ? ? ? ? ?
? ? return 204;}
if ($request_method = 'POST') {
? add_header 'Access-Control-Allow-Origin' '*';
? add_header 'Access-Control-Allow-Credentials' 'true';
? add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, PATCH, OPTIONS';
? add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,token';}
? if ($request_method = 'GET') {
? ? add_header 'Access-Control-Allow-Origin' '*';
? ? add_header 'Access-Control-Allow-? ? Credentials' 'true';
? ? add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, PATCH, OPTIONS';
? ? add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,token';}
? ? if ($request_method = 'PUT') {
? ? ? add_header 'Access-Control-Allow-Origin' '*';
? ? ? add_header 'Access-Control-Allow-Credentials' 'true';
? ? ? add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE,? ? ? PATCH, OPTIONS';
? ? ?add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,token';}
? ? ?if ($request_method = 'DELETE') {
? ? ?add_header 'Access-Control-Allow-Origin' '*';
? ? ?add_header 'Access-Control-Allow-Credentials' 'true';
? ? ?add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, PATCH, OPTIONS';
? ? ?add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,token';}
上面的配置中，不同的請求方法會有不同的處理策略，根絕請求方法的不同可以根據(jù)自己的實際情況去做對應(yīng)調(diào)整。
配置好之后，就不會再有跨域的問題了
3常見問題
如果瀏覽器報錯說跨域的'Access-Control-Allow-Headers’缺少字段，比如缺少Authorization，那我們就在其后面添加Authorization
如果報錯The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed.，說明這個add_header 'Access-Control-Allow-Origin' '*';配置項重復(fù)了
這個配置項要么配置在代碼里面，要么配置在nginx里面，不能倆個位置同時出現(xiàn)此配置
4參考網(wǎng)址
1）https://www.w3.org/TR/cors/
2）http://www.ruanyifeng.com/blog/2016/04/cors.html
3）https://www.cnblogs.com/sunmmi/articles/5956554.html
