生产环境 前后端分离部署 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 所以这个自然不需要

到此问题排查完毕