nginx 配置跨域不生效 如下配置
server {
listen 80;
server_name localhost;
# 接口轉(zhuǎn)發(fā)
location /api/ {
# 允許請(qǐng)求地址跨域 * 做為通配符
add_header 'Access-Control-Allow-Origin' '*';
# 設(shè)置請(qǐng)求方法跨域
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
# 設(shè)置是否允許 cookie 傳輸
add_header 'Access-Control-Allow-Credentials' 'true';
# 設(shè)置請(qǐng)求頭 這里為什么不設(shè)置通配符 * 因?yàn)椴恢С?
add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,X-Data-Type,X-Requested-With,X-Data-Type,X-Auth-Token';
# 設(shè)置反向代理
proxy_pass 127.0.0.1:8081/;
}
}
網(wǎng)上的 nginx 跨域配置主要是以上版本，然而很多都是抄一抄，并沒有真的去實(shí)踐，故寫了下文章提醒下有需要的人，不要盲目抄，學(xué)會(huì)分析。
nginx 修改如下配置后生效
server {
listen 80;
server_name localhost;
# 接口轉(zhuǎn)發(fā)
location /api/ {
# 允許請(qǐng)求地址跨域 * 做為通配符
add_header 'Access-Control-Allow-Origin' '*';
# 設(shè)置請(qǐng)求方法跨域
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
# 設(shè)置是否允許 cookie 傳輸
add_header 'Access-Control-Allow-Credentials' 'true';
# 設(shè)置請(qǐng)求頭 這里為什么不設(shè)置通配符 * 因?yàn)椴恢С?
add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,X-Data-Type,X-Requested-With,X-Data-Type,X-Auth-Token';
# 設(shè)置 options 請(qǐng)求處理
if ( $request_method = 'OPTIONS' ) {
return 200;
}
# 設(shè)置反向代理
proxy_pass 127.0.0.1:8081/;
}
}
兩者代碼區(qū)別 主要就是下面這行代碼
if ( $request_method = 'OPTIONS' ) {
return 200;
}
因?yàn)?post 請(qǐng)求 瀏覽器會(huì)發(fā)送一個(gè) options 的預(yù)檢請(qǐng)求，主要將本次的請(qǐng)求頭 發(fā)送給服務(wù)端，若服務(wù)端允許，再發(fā)送真正的post請(qǐng)求，所以 f12 看到，經(jīng)常 post 會(huì)發(fā)送兩次請(qǐng)求。因?yàn)楹蠖?java 代碼沒有對(duì) options 請(qǐng)求做出處理，導(dǎo)致 options 接口請(qǐng)求的時(shí)候，報(bào) 403 forbidden , 這里 nginx 對(duì) options 的請(qǐng)求直接返回 200，不用到達(dá)接口層，直接允許 post 響應(yīng)頭，即可使得上述失效配置能夠生效
附贈(zèng) 一個(gè)小知識(shí)點(diǎn)
proxy_pass 127.0.0.1:8081/;
針對(duì)反向代理里面這個(gè)/ 加不加的問題；
訪問 http://localhost/api/user/login;
- 加/ 則 實(shí)際訪問的是 127.0.0.1:8081/user/login;
- 不加 / 則實(shí)際訪問的是 127.0.0.1:8081/api/user/login;
加了斜杠意味著所有的 /api 請(qǐng)求都會(huì)轉(zhuǎn)發(fā)到根目錄下，也就是說 /api 會(huì)被 / 替代，這個(gè)時(shí)候接口路徑就變了，少了一層 /api 。而不加斜杠的時(shí)候呢？這代表著轉(zhuǎn)發(fā)到127.0.0.1:8081的域名下， /api 的路徑不會(huì)丟失
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
