使用nginx代理 解决 跨域调用子页面iframe方法的问题

---------1   场景

***在当前项目里调用子页面(iframe)里面的方法  , iframe是一个 ppt页面  ，里面暴露出了ppt切换到下一帧的方法

***简单介绍一下项目 ，这是一个在线授课的项目  当前这个页面是学生端听课页面    ， 老师授课时 切换ppt至下一帧  ， 学生端调用iframe里的方法同步切换(通过socket链接)

 

 

---------2   环境

***iframe页面已经部署到服务器上   （ppt 地址）

***当前项目还在本地开发 

 

---------3  接下来就是调用iframe以及iframe里面的方法了

//ppt的相关操作
     pptSyncAnim(current){
        let currentArr = current.split(',');
        //ppt帧动画切换  syncAnim 是ppt页面暴露出来的方法 ， 接收一个当前帧参数
        //pptIframe  是iframe的name值
        window.pptIframe.syncAnim(currentArr[3][0]);   
     }

  调用iframe里的方法报错  ，报错原因是因为 不能再跨域的情况下调用iframe 里的方法，本地项目在8000端口上,而iframe已经部    署在服务器环境下 ，所以我在本地就没办法调试

为了解决这个问题，使用了nginx代理，把本地项目 和iframe页面代理到同样的域 ，同样的端口下，这样就能解决跨域的问题 ，我在本地也就能开始调试 。   (ps: 其实h5的window.postmessage可以不受跨域影响，但是得改变iframe源码 ，所以我选择放弃了，这个iframe页面有其他端在调用 ， 已经统一了一套传输方案 )

 

---------4  nginx代理

mac 安装nginx以及基本命令

输入 nginx -V   (可以查看到nginx安装路径)

输入 vi /usr/local/etc/nginx/nginx.conf   (修改nginx配置文件 ，nginx安装位置得先找到)

输入 i (开始修改)

说明：

nginx启动在80端口

location里配置转发   ， 请求 localhost:80/ 的时候会转发到 localhost:8000（我的本地项目） ，请求localhost:80/ 会转发到我的iframe项目上 ， 这样两个项目都启动在localhost 80上 ， 就不存在跨域的问题了

    server {
        listen       80;
        server_name  localhost;
        location / {
               proxy_pass http://localhost:8000;

        }
        location /ppt {
               proxy_pass            https://api.mizholdings.com/t/mizhu/web/course/previewPpt;

        }
        #charset koi8-r;

        #access_log  logs/host.access.log  main

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

依次按下esc  :wq 保存nginx配置 

启动nginx服务

sudo nginx

 

---------5  修改iframe src地址为localhost:80后  ，就不会出现错误了 ，本地也能开心的调试了

<div className="boardCantainer">
                            <canvas ref='canvas'></canvas>
                            {boardType == 2 && <div className={'ppt'}><iframe name='pptIframe' src={`http://localhost:80/ppt${_ppt[currentInPage.index - 1].board.ppt.slice(_ppt[currentInPage.index - 1].board.ppt.indexOf('?'))}`}></iframe> </div>}

                        </div>