nginx 配置跨域不生效 如下配置
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
server { listen 80; server_name localhost; # 接口轉發 location /api/ { # 允許請求地址跨域 * 做為通配符 add_header 'Access-Control-Allow-Origin' '*'; # 設置請求方法跨域 add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE'; # 設置是否允許 cookie 傳輸 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-Data-Type,X-Requested-With,X-Data-Type,X-Auth-Token'; # 設置反向代理 proxy_pass 127.0.0.1:8081/; } } |
網上的 nginx 跨域配置主要是以上版本，然而很多都是抄一抄，并沒有真的去實踐，故寫了下文章提醒下有需要的人，不要盲目抄，學會分析。
nginx 修改如下配置后生效
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
server { listen 80; server_name localhost; # 接口轉發 location /api/ { # 允許請求地址跨域 * 做為通配符 add_header 'Access-Control-Allow-Origin' '*'; # 設置請求方法跨域 add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE'; # 設置是否允許 cookie 傳輸 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-Data-Type,X-Requested-With,X-Data-Type,X-Auth-Token'; # 設置 options 請求處理 if ( $request_method = 'OPTIONS' ) { return 200; } # 設置反向代理 proxy_pass 127.0.0.1:8081/; } } |
兩者代碼區別 主要就是下面這行代碼
|
1
2
3
|
if ( $request_method = 'OPTIONS' ) { return 200;} |
因為 post 請求 瀏覽器會發送一個 options 的預檢請求，主要將本次的請求頭 發送給服務端，若服務端允許，再發送真正的post請求，所以 f12 看到，經常 post 會發送兩次請求。因為后端 java 代碼沒有對 options 請求做出處理，導致 options 接口請求的時候，報 403 forbidden , 這里 nginx 對 options 的請求直接返回 200，不用到達接口層，直接允許 post 響應頭，即可使得上述失效配置能夠生效
附贈 一個小知識點
proxy_pass 127.0.0.1:8081/;
針對反向代理里面這個/ 加不加的問題；
訪問 http://localhost/api/user/login;
- 加/ 則 實際訪問的是 127.0.0.1:8081/user/login;
- 不加 / 則實際訪問的是 127.0.0.1:8081/api/user/login;
加了斜杠意味著所有的 /api 請求都會轉發到根目錄下，也就是說 /api 會被 / 替代，這個時候接口路徑就變了，少了一層 /api 。而不加斜杠的時候呢？這代表著轉發到127.0.0.1:8081的域名下， /api 的路徑不會丟失
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://segmentfault.com/a/1190000020725137
