本地开发挂载文档登陆失败

问题描述

研发本地开发环境挂载 FilezOffice 文档时，iframe 一直停留在登录页面，无法进入文档编辑界面。

原因分析

高版本 Chrome/Edge 浏览器对跨域有严格限制。

解决方案

方案一：使用 Firefox 浏览器

Firefox 对跨域的限制相对宽松，可直接访问本地开发页面。

方案二：配置 Nginx 代理

通过 Nginx 将文档中台代理到本地开发环境的同域下，解决跨域问题。

Nginx配置（nginx.conf 文件内容如下，根据实际情况自行修改）

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid     logs/nginx.pid;

events {
   worker_connections  1024;
}

http {
   map $http_upgrade $connection_upgrade {
      default upgrade;
      ''    close;
  }
   include    mime.types;
   default_type  application/octet-stream;

  server {
    listen    8001;  
    ​     server_name  172.16.64.103;  
    location / {
        proxy_pass http://172.16.52.30:8001/;
        proxy_set_header Host $host; # pass the host header
        proxy_set_header Upgrade $http_upgrade; # allow websockets
        proxy_set_header Connection $connection_upgrade;
        proxy_set_header X-Real-IP $remote_addr; # Preserve client IP
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_http_version 1.1;
      }
   }
}

配置说明

环境示例

• FilezOffice 文档中台：http://172.16.52.30:8001/
• 本地开发页面：http://172.16.64.103:8002/

Nginx 配置原理

1. Nginx 监听本地开发环境的 8001 端口
2. 将请求反向代理到文档中台 http://172.16.52.30:8001/
3. 使本地页面和文档中台处于同域（都是 172.16.64.103）

使用方式

挂载文档时，将文档地址的 IP 替换为本地开发页面的 IP：

原地址：

http://172.16.52.30:8001/docs/app/local/xxx/edit/content

修改后：

http://172.16.64.103:8001/docs/app/local/xxx/edit/content

这样文档请求会通过 Nginx 代理到文档中台，实现同域访问。