如何实现跨域？

以你之姓@ 2023-08-17 15:55 133阅读 0赞

1.最经典的跨域方案jsonp  
jsonp本质上是一个Hack，它利用<script>标签不受同源策略限制的特性进行跨域操作。  
jsonp优点：  
实现简单  
兼容性非常好  
  
jsonp的缺点：  
只支持get请求（因为<script>标签只能get）  
有安全性问题，容易遭受xss攻击  
需要服务端配合jsonp进行一定程度的改造

<script type="text/javascript">
                function JSONP({  
                  url,
                  params,
                  callbackKey,
                  callback
                }) {
                  // 在参数里制定 callback 的名字
                  params = params || {}
                  params[callbackKey] = 'jsonpCallback'
                    // 预留 callback
                  window.jsonpCallback = callback
                    // 拼接参数字符串
                  const paramKeys = Object.keys(params)
                  const paramString = paramKeys
                    .map(key => `${key}=${params[key]}`)
                    .join('&')
                    // 插入 DOM 元素
                  const script = document.createElement('script')
                  script.setAttribute('src', `${url}?${paramString}`)
                  document.body.appendChild(script)
                }
                
                JSONP({  
                  url: 'http://s.weibo.com/ajax/jsonp/suggestion',
                  params: {
                    key: 'test',
                  },
                  callbackKey: '_cb',
                  callback(result) {
                    console.log(result.data)
                  }
                })
            </script>

2.最流行的跨域方案cors  
cors是目前主流的跨域解决方案，跨域资源共享(CORS) 是一种机制，它使用额外的 HTTP 头来告诉浏览器  
让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。  
当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。  
如果你用express，可以这样在后端设置

<script type="text/javascript">
                //CORS middleware
                var allowCrossDomain = function(req, res, next) {
                    res.header('Access-Control-Allow-Origin', 'http://example.com');
                    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
                    res.header('Access-Control-Allow-Headers', 'Content-Type');
                
                    next();
                }
                
                //...
                app.configure(function() {
                    app.use(express.bodyParser());
                    app.use(express.cookieParser());
                    app.use(express.session({ secret: 'cool beans' }));
                    app.use(express.methodOverride());
                    app.use(allowCrossDomain);
                    app.use(app.router);
                    app.use(express.static(__dirname + '/public'));
                });
            </script>

3.最方便的跨域方案Nginx  
nginx是一款极其强大的web服务器，其优点就是轻量级、启动快、高并发。  
现在的新项目中nginx几乎是首选，我们用node或者java开发的服务通常都需要经过nginx的反向代理。  
反向代理的原理很简单，即所有客户端的请求都必须先经过nginx的处理，nginx作为代理服务器再讲请求转发给node或者java服务，这样就规避了同源策略。

<script type="text/javascript">
                #进程, 可更具cpu数量调整
                worker_processes  1;
                
                events {
                    #连接数
                    worker_connections  1024;
                }
                
                http {
                    include       mime.types;
                    default_type  application/octet-stream;
                
                    sendfile        on;
                
                    #连接超时时间，服务器会在这个时间过后关闭连接。
                    keepalive_timeout  10;
                
                    # gizp压缩
                    gzip  on;
                
                    # 直接请求nginx也是会报跨域错误的这里设置允许跨域
                    # 如果代理地址已经允许跨域则不需要这些, 否则报错(虽然这样nginx跨域就没意义了)
                    add_header Access-Control-Allow-Origin *;
                    add_header Access-Control-Allow-Headers X-Requested-With;
                    add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
                
                    # srever模块配置是http模块中的一个子模块，用来定义一个虚拟访问主机
                    server {
                        listen       80;
                        server_name  localhost;
                        
                        # 根路径指到index.html
                        location / {
                            root   html;
                            index  index.html index.htm;
                        }
                
                        # localhost/api 的请求会被转发到192.168.0.103:8080
                        location /api {
                            rewrite ^/b/(.*)$ /$1 break; # 去除本地接口/api前缀, 否则会出现404
                            proxy_set_header Host $host;
                            proxy_set_header X-Real-IP $remote_addr;
                            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                            proxy_pass http://192.168.0.103:8080; # 转发地址
                        }
                        
                        # 重定向错误页面到/50x.html
                        error_page   500 502 503 504  /50x.html;
                        location = /50x.html {
                            root   html;
                        }
                
                    }
                
                }
            </script>

4.其它跨域方案  
HTML5 XMLHttpRequest 有一个API，postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。  
WebSocket 是一种双向通信协议，在建立连接之后，WebSocket 的 server 与 client 都能主动向对方发送或接收数据，连接建立好了之后 client 与 server 之间的双向通信就与 HTTP 无关了，因此可以跨域。  
window.name + iframe：window.name属性值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值，我们可以利用这个特点进行跨域。  
location.hash + iframe：a.html欲与c.html跨域相互通信，通过中间页b.html来实现。 三个页面，不同域之间利用iframe的location.hash传值，相同域之间直接js访问来通信。  
document.domain + iframe： 该方式只能用于二级域名相同的情况下，比如 a.test.com 和 b.test.com 适用于该方式，我们只需要给页面添加 document.domain ='test.com' 表示二级域名都相同就可以实现跨域，两个页面都通过js强制设置document.domain为基础主域，就实现了同域。  
  
6.其余方案来源于九种跨域方式

转载于:https://www.cnblogs.com/wangxi01/p/11590185.html

发表评论取消回复

表情：

评论列表（有 0 条评论，133人围观）

还没有评论，来说两句吧...

相关阅读

相关什么是JS跨域访问如何实现跨域访问

>什么是跨域？ A网站想要获取B网站服务器上的资源，网站通过[AJAX][]发送请求的时候，本地服务器地址与请求地址、协议类型（http）、IP地址（域名）、端口，三者有其一

逃离我推掉我的手/ 2024年04月01日 14:30/ 0 赞/ 82 阅读

相关 springboot中如何实现跨域请求

Springboot中如何处理跨域请求一.什么是跨域? 我们知道Url的一般格式：协议 + 域名（子域名 + 主域名） + 端口号 + 资源地址比如： ht

曾经终败给现在/ 2024年03月31日 16:10/ 0 赞/ 49 阅读

相关【跨域】如何解决跨域问题

同源策略同源相同协议+相同域名+相同端口内容 [浏览器的同源策略 - Web 安全 | MDN (mozilla.org)][- Web _ _

超、凢脫俗/ 2024年03月16日 13:32/ 0 赞/ 126 阅读

相关如何实现跨域？

1.最经典的跨域方案jsonp jsonp本质上是一个Hack，它利用<script>标签不受同源策略限制的特性进行跨域操作。 jsonp优点：实现简单兼容

以你之姓@/ 2023年08月17日 15:55/ 0 赞/ 134 阅读

相关如何实现跨域？

前言 -------------------- 跨域是个比较古老的命题了，历史上跨域的实现手段有很多，我们现在主要介绍三种比较主流的跨域方案，其余的方案我们就不深入讨论

你的名字/ 2022年12月02日 00:52/ 0 赞/ 204 阅读

相关如何实现跨域cookie

不同域名之间，cookie不能传递。解决方案 A应用发送请求的时候将cookie作为参数传递，B应用在自己的域名种下cookie。当然，如果是单次请求的话，也可以

妖狐艹你老母/ 2022年11月16日 10:48/ 0 赞/ 236 阅读

相关如何实现 Ajax 的跨域访问？

简介由于受浏览器的同源策略（same-origin policy）的影响， Ajax 请求默认只能在同一域名下进行访问。同源策略是浏览器安全的基石，所有的浏览器都实

逃离我推掉我的手/ 2022年05月27日 08:14/ 0 赞/ 250 阅读

相关什么是跨域？跨域如何解决

什么是跨域？ A页面访问B页面的资源，如果A，B页面的域名、端口、协议、IP其中一个不同，这种行为都叫跨域；它是由于浏览器的同源策略形成的，也是对javascript的安

朴灿烈づ我的快乐病毒、/ 2022年02月01日 05:36/ 0 赞/ 373 阅读

相关如何解决跨域？

如何解决跨域？ JSONP 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，兼容性好（兼容低版本IE），缺点是只支持get请求，不支持post请求。核心思...

朱雀/ 2021年04月16日 15:30/ 0 赞/ 607 阅读

相关如何解决跨域

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对 JavaScript 施加的安全限制。

灰太狼/ 2020年04月25日 16:21/ 0 赞/ 876 阅读