关于nginx:前端跨域问题解决办法-Nginx配置为例

前端微服务

💡 Tips：能够将多个零碎交融成一个零碎，无技术壁垒，能够像 iframe 一样实现性能组合
● qiankun（阿里反对）
● micro-app（京东反对）
● wujie（腾讯反对）自己举荐

应用微服务会导致跨域问题

💡 Tips：跨域就是非同源网站发动申请，浏览器安全策略爱护机制导致的
● 文件跨域：html 页面，动态资源跨域等
● 接口跨域：get，post 等等申请跨域

跨域问题解决

💡 Tips：这里以 Nginx 配置为例
Nginx 配置详解，例子内要害行都有正文；

跨域遵循谁被援用，配置谁的准则

        listen       8088;
        server_name  10.72.159.133;
        location / {
            root /jur;
            index index.html index.htm;
            try_files $uri $uri/ /index.html;
            # 使得 html 文件能够在跨域拜访
            add_header Access-Control-Allow-Origin *;
        }
        location /api/ {# 因为跨域申请会先发动 option( 预检) 申请，而预检申请要通知客户端哪些货色能通过因而要害配置 option 申请即可
                if ($request_method = 'OPTIONS') {
                    # 使得申请从哪其余地位来能够通过
                    add_header 'Access-Control-Allow-Origin' $http_origin;
                    # 使申请能够携带 cookie
                    add_header 'Access-Control-Allow-Credentials' 'true';
                    # 通知客户端哪些申请能够通过
                    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE, PATCH, PUT';
                    # 设置申请最大值
                    add_header 'Access-Control-Max-Age' 1728000;
                    add_header 'Content-Type' 'text/plain; charset=utf-8';
                    # add_header 'Content-Type' 'application/json;charset=UTF-8';
                    # 容许自定义 authorization 申请头通过
                    add_header 'Access-Control-Allow-Headers' 'authorization,Content-Type,XFILENAME,XFILECATEGORY,XFILESIZE';
                    # 不限度内容长度
                    add_header 'Content-Length' 0;
                    # 返回通过 code
                    return 204;
                }
                # 申请转发
                proxy_pass http://xx.xxx.xxx.xxx:8000/api/;
                proxy_redirect default;
                    proxy_cookie_path ~*^/.* /;
                    proxy_set_header Host $host;
                    proxy_set_header X-Real-IP $remote_addr;
                    proxy_set_header REMOTE-HOST $remote_addr;
                    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_connect_timeout   18000;
                    proxy_send_timeout      18000;
                    proxy_read_timeout      18000;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {root html;}
    }

如果 Ngnix 是通过 docker 启动的

💡 Tips：docker 启动 Nginx 须要配置 docker-componse.yml 文件
docker-componse.yml 须要配置文件 / 目录 / 端口等映射关系，否则基于 docker 启动的 Nginx 无法访问