快捷導(dǎo)航

解決nginx已經(jīng)配置過(guò)跨域不生效問(wèn)題

更新時(shí)間：2023年12月22日 09:03:50 作者：空城舊夢(mèng)丨

這篇文章主要介紹了解決nginx已經(jīng)配置過(guò)跨域不生效的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

nginx已經(jīng)配置過(guò)跨域不生效問(wèn)題

前端訪問(wèn)后臺(tái)時(shí)提示跨域

服務(wù)器nginx配置如下

server {    
	listen       80;
	server_name  xxxxxx.com;

	location / {
		proxy_pass http://localhost:8061/;
		proxy_set_header   Host             $host;
		proxy_set_header   X-Real-IP        $remote_addr;
		proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
	}
	
       add_header Access-Control-Allow-Origin *;
       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,token,platform;
       add_header Access-Control-Allow-Methods GET,POST,OPTIONS,HEAD,PUT;
       add_header Access-Control-Allow-Credentials true;
  
       proxy_set_header x-real-ip $remote_addr;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;


	access_log /var/log/nginx/api-access.log;
	error_log  /var/log/nginx/api-error.log;

}

很多文章都是說(shuō)要加上

add_header Access-Control-Allow-Origin *;

但事實(shí)證明我這里已經(jīng)配置了，還是報(bào)跨域，經(jīng)過(guò)查詢(xún)后發(fā)現(xiàn)關(guān)鍵點(diǎn)在這里

 if ( $request_method = 'OPTIONS' ) { 
       return 200;
  }

最終的配置就是

server {    
	listen       80;
	server_name  xxxxxx.com;

	location / {
		proxy_pass http://localhost:8061/;
		proxy_set_header   Host             $host;
		proxy_set_header   X-Real-IP        $remote_addr;
		proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
	}
	
       add_header Access-Control-Allow-Origin *;
       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,token,platform;
       add_header Access-Control-Allow-Methods GET,POST,OPTIONS,HEAD,PUT;
       add_header Access-Control-Allow-Credentials true;
  
       proxy_set_header x-real-ip $remote_addr;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

	   if ( $request_method = 'OPTIONS' ) { 
		     return 200;
		}

	access_log /var/log/nginx/api-access.log;
	error_log  /var/log/nginx/api-error.log;

}

因?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 代碼沒(méi)有對(duì) options 請(qǐng)求做出處理，導(dǎo)致 options 接口請(qǐng)求的時(shí)候，報(bào) 403 forbidden , 這里 nginx 對(duì) options 的請(qǐng)求直接返回 200，不用到達(dá)接口層，直接允許 post 響應(yīng)頭，即可使得上述失效配置能夠生效