zoukankan      html  css  js  c++  java
  • iframe的基本使用及利用nginx解决iframe跨域

    一.场景

    在前端大屏页面中,用iframe嵌套了手机模拟器,手机模拟器进入某个页面,这个页面调用接口实现单点登录

    前端大屏地址:https://域名1:7443/1.html    通过nginx访问的页面

    不可以调用成功接口的手机端地址:https://域名1/st_app/zlj_homepage/tourists_ys.html?utype=999

    前端报错:404,具有迷惑性,其实就是跨域了

    二.解决方式

    可以调用成功接口的手机端地址:https://域名1:7443/st_app/zlj_homepage/tourists_ys.html?utype=999

    三.iframe基本使用

    直接打开百度:f12-》元素-》以html格式修改-》写入代码

    <iframe src="https://www.baidu.com/?tn=85070231_7_hao_pg" width="900" heigth="900"></iframe>

    四、为什么会出现跨域问题出于浏览器的同源策略限制

    同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port)

    五、什么是跨域

    当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

    当前页面url 被请求页面url 是否跨域 原因
    http://www.test.com/ http://www.test.com/index.html 否 同源(协议、域名、端口号相同)
    http://www.test.com/ https://www.test.com/index.html 跨域 协议不同(http/https)
    http://www.test.com/ http://www.baidu.com/ 跨域 主域名不同(test/baidu)
    http://www.test.com/ http://blog.test.com/ 跨域 子域名不同(www/blog)
    http://www.test.com:8080/ http://www.test.com:7001/ 跨域 端口号不同(8080/7001)

    六、非同源限制

    【1】无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB

    【2】无法接触非同源网页的 DOM

    【3】无法向非同源地址发送 AJAX 请求

    七.nginx配置解决跨域

    #user  nobody;
    worker_processes  3;
    
    #debug | info | notice | warn | error | crit
    error_log  logs/error.log  warn;
    
    pid        logs/nginx.pid;
    
    #worker_rlimit_nofile 65535;
    
    
    events {
        worker_connections  8192;
    }
    
    http {
        include       mime.types;
        
        default_type  application/octet-stream;
    
        fastcgi_intercept_errors on; 
        
        log_format  main  '"$upstream_addr" $remote_addr - $remote_user [$time_local] "$request" '
                          '$status $body_bytes_sent "$http_referer" '
                          '"$http_user_agent" "$http_x_forwarded_for"';
    
        #access_log  logs/access.log  main;
        access_log off;
        open_log_file_cache max=1000 inactive=20s min_uses=2 valid=1m;
    
        server_names_hash_bucket_size 128;
    
        large_client_header_buffers 4 64k;
        
        client_header_buffer_size 32k;
        
        client_body_buffer_size    5120k;
        
        client_max_body_size    100m;
    
        server_tokens off;
        
        ignore_invalid_headers   on;
        
    
        recursive_error_pages    on;
    
        server_name_in_redirect off;
    
        sendfile  on;
    
        tcp_nopush  on;
    
        tcp_nodelay    on;
    
        keepalive_requests 3000;
        
        keepalive_timeout  120;
    
       client_body_timeout 12;
       client_header_timeout 12;
       send_timeout 10;
       
        autoindex off; 
        
        include    gzip.conf;
    
        map_hash_bucket_size 64;
    
        #FastCGI相关参数是为了改善网站的性能:减少资源占用,提高访问速度。下面参数看字面意思都能理解。
        fastcgi_connect_timeout 300;
        fastcgi_send_timeout 300;
        fastcgi_read_timeout 300;
        fastcgi_buffer_size 128k;
        fastcgi_buffers 8 64k;
        fastcgi_busy_buffers_size 128k;
        fastcgi_temp_file_write_size 128k;
        
       upstream st_app {
          ip_hash;  
          server 127.0.0.1:443  weight=1 max_fails=10 fail_timeout=120s;
        }
        
        upstream zlj_jhpt {
          ip_hash;  
          server IP:443 weight=1 max_fails=10 fail_timeout=120s;
          server IP:6443  weight=1 max_fails=10 fail_timeout=120s;
          #server IP:8080  weight=1 max_fails=10 fail_timeout=120s;    
          keepalive 64;
        }
    
        
        server {
        listen 8998 default;
        location / {
                root   error;
                index  index.html index.htm;
        }
        }
        
        server {
        
        listen       7443 ssl;
        server_name  域名1:7443;
        ssl_certificate       D:XXX;
        ssl_certificate_key   D:XXX;
    
        ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;
    
        #ssl_ciphers  HIGH:!aNULL:!MD5;
        ssl_ciphers AESGCM:ALL:!DH:!EXPORT:!RC4:+HIGH:!MEDIUM:!LOW:!aNULL:!eNULL;
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
        ssl_prefer_server_ciphers  on;
    
        charset ISO-88509-1;
    
        
            location /st_app {
            proxy_pass https://st_app;
            include    proxy.conf;
            # 配置html以文件方式打开
            if ($request_method = 'POST') {
                  add_header 'Access-Control-Allow-Origin' *;
                  add_header 'Access-Control-Allow-Credentials' 'true';
                  add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                  add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
              }
            if ($request_method = 'GET') {
                  add_header 'Access-Control-Allow-Origin' *;
                  add_header 'Access-Control-Allow-Credentials' 'true';
                  add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                  add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
            }
        }
        
        
        
        location /st {
            proxy_pass https://st;
            include    proxy.conf;
            # 配置html以文件方式打开
            if ($request_method = 'POST') {
                  add_header 'Access-Control-Allow-Origin' *;
                  add_header 'Access-Control-Allow-Credentials' 'true';
                  add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                  add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
              }
            if ($request_method = 'GET') {
                  add_header 'Access-Control-Allow-Origin' *;
                  add_header 'Access-Control-Allow-Credentials' 'true';
                  add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                  add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
            }
        }
            
        }    
        
    }
     
  • 相关阅读:
    LeetCode 79. 单词搜索
    LeetCode 1143. 最长公共子序列
    LeetCode 55. 跳跃游戏
    LeetCode 48. 旋转图像
    LeetCode 93. 复原 IP 地址
    LeetCode 456. 132模式
    LeetCode 341. 扁平化嵌套列表迭代器
    LeetCode 73. 矩阵置零
    LeetCode 47. 全排列 II
    LeetCode 46. 全排列
  • 原文地址:https://www.cnblogs.com/tongcc/p/15749530.html
Copyright © 2011-2022 走看看