一.场景
在前端大屏页面中，用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" 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'; } } } }