生產環境 前后端分離部署 https 跨域cors netcore3.1 部署小計

 

業務場景描述:  頁面發起的所有請求都是https

1. 前端vue寫的 發布后部署在iis上 監聽內網端口F 綁定域名front.com

2. 后端代碼netcore寫的 部署在centos上 監聽內網端口B   nginx對外提供一個域名供前端調用 域名假定: backend.com

http請求過程:

瀏覽器輸入域名https://front.com =>Nginx1監聽域名front.com 443端口 -> 轉發內網端口F => vue調用后端接口  https://backend.com/login => Nginx2監聽域名backend.com 443端口 -> 轉發內網端口B

 

大的模塊:  1. net core項目部署及跨域配置

　　　　2.nginx配置證書及轉發請求

　　　　3. 跨域的一些問題

 

一.　　net core 項目配置 

注意事項:  origin為* 時候 allowcredentials 不能是true 不然會報錯

 

 

 至於為什么不允許origin和credentials一塊配置 應該是考慮到CSRF攻擊有關 可以反向思考下 origin配置為*時又允許credentials會怎么樣 以后理解了補充上

還有一點 怎么指定 代碼允許在哪個ip及端口 一般默認就是localhost:5000  可以看下面代碼

 

 

 

二.  nginx 配置證書及轉發

1. vue項目 nginx配置

http://127.0.0.1:2277/ 就是部署在iis上的前端代碼

server {
        listen 80;
        listen 443 ssl;
        server_name www.front.com  front.com;

       if ($server_port !~ 443){
               return 307 https://$host$request_uri;
       }
        ssl_certificate  ssl/1_front.com_bundle.crt;
        ssl_certificate_key ssl/2_front.com.key;

        gzip  on;
        gzip_proxied expired no-cache no-store private no_last_modified no_etag auth;
        gzip_types *;
        gzip_vary on;

        location / {
            proxy_pass http://127.0.0.1:2277/;
        }
}

 

2. 后台接口nginx配置

可以設置二級地址轉發 這樣就可以對外一個域名

http://10.0.1.5:15365/ 是部署在centos機器上的 netcore服務器代碼

server {
        listen 443 ssl;
        server_name backend.com  www.backend.com;

        ssl_certificate /usr/local/nginx/ssl/1_backend.com_bundle.crt;
        ssl_certificate_key /usr/local/nginx/ssl/2_backend.com.key;

        gzip  on;
        gzip_proxied expired no-cache no-store private no_last_modified no_etag auth;
        gzip_types *;
        gzip_vary on;

        location /agent/ {
                #root  /usr/src/gameclient/;
                #index  index.html index.htm;
                proxy_pass http://10.0.1.5:15365/;
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        }

        location /event/  {
                #root  /usr/src/gameclient/;
                #index  index.html index.htm;
                proxy_pass http://10.0.1.5:49835/;
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        }
}

 

三. 跨域的一些問題

1. 如果你的后台接口清楚的知道是給哪些域名調用的, 建議配置origin 就是第一張圖的注釋掉的部分 ,然后在配置文件配置允許跨域的域名/ip:port

　如果是需要對所有公網暴露的接口 則設置origin為* 這是 withcredentials 要注釋掉

2.  我把上面服務端代碼部署完后, postman調用 https post接口 正常返回

但是部署后就報錯 截圖如下

 

 不知道大家看明白了沒 就是前端發起 XMLHttpRequest 發出請求時 將 withCredentials 設置為 true。而服務端返回的response頭中

Access-Control-Allow-Origin 為true導致的 但是通過chrome給我呈現的http請求響應來看 看不到有效響應信息


但是用Firefox瀏覽器就捕捉到這個問題了
下面是Firefox的截圖 可以看到只發送了一個options的預請求,並沒有發送正式請求  options的響應頭的確是 Access-Control-Allow-Origin 為 * 
控制台報錯點擊詳情看下面2圖

 

 

 

 

 問題很明顯了 前端在發送XMLHttpRequest請求時,將withCredentials 設置為 true導致的  排查前端代碼發現確實如此 去掉之后請求正常 因為我們程序沒有用cookie 所以這個自然不需要

到此問題排查完畢