JS中常用的8种跨域方式讲解

最新推荐文章于 2024-10-01 09:15:46 发布
最新推荐文章于 2024-10-01 09:15:46 发布
阅读量115 收藏
点赞数
文章标签： 网络 运维 前端 ViewUI
原文链接：https://juejin.im/post/5b19da706fb9a01e4b0623eb
版权

1. 什么是跨域

简单的来说就是:

在A域名下向B域名发起了 request。

一个完整的URL应该包含 http(协议)://www.baidu.com（域名）：80（端口）/index.html(路由)。

同源策略 就是指的 协议，域名，端口必须保持一致。任何不符合同源策略的请求 request 都属于跨域了。

2.通过jsonp跨域

index.html页面中

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>
  <body>
    <script>
        function jsonp({url, params, cb}){
            let script = document.createElement('script');
            window[cb] = function( data ){
                resolve(data);
                document.body.removeChild(script);
            }
            params = {...params, cb} //wd=b&cb=show
            let arrs = [];
            for(let key in params){
                arrs.push(`${key}=${params[key]}`);
            }
            script.src = `${url}?${arrs.join('&')}`;
            document.body.appendChild(script);
        }
        
    //只能发送get 请求，不支持 post put delete
    //不安全 xss攻击  不采用
    jsonp({
        url: 'http://localhost:3000/say',
        params: {wd: 'hello'},
        cb: 'show'  //回调函数
    }).then(data => {
        console.log(data);
    });
    </script>
</body>
复制代码

server.js

let express = require('express');
let app = express();
app.get('/say', function(req, res){
    let {wd, cb} = req.query;
    res.end(`${cb}('world')`);  //返回 'show('world')'
});
复制代码

3. 通过CORS跨域

cors.html

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>
  <body>
    hello cors.html
    <script>
        let xhr = new XMLHttpRequest;
        document.cookie = 'nam=zfpx';
        xhr.withCredentials = true;
        xhr.open('PUT', 'http://localhost:4000/getData', true);
        xhr.setRequestHeader('name','zfpx');
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4){
                if(xhr.status >= 200 && xhr.status < 300 || xhr.status === 304){
                    console.log(xhr.response);
                    console.log(xhr.getResponseHeader('name'));
                }
            }
        }
        xhr.send();
    </script>
  </body>    
复制代码
  • cors.html.server.js
let express = require('express');
let app = express();
app.use(express.static(__dirname));
app.listen(3000);
复制代码

  • cors.target.js
let express = require('express');
let app = express();
let whitList = ['http://localhost:3000'];  //用来访问 cors.html的页面
app.use(function(req, res, next){
    let origin = req.headers.origin;
    if(whitList.includes(origin)){
        //设置允许哪个源访问我
        res.setHeader('Access-Control-Allow-Origin', origin);
        //允许携带哪个请求头访问我
        res.setHeader('Access-Control-Allow-Headers', 'name');
        //允许哪个方法访问我
        res.setHeader('Access-Control-Allow-Methods', 'PUT');
        //允许携带cookie， 与前端 xhr.withCredentials = true; 相呼应
        res.setHeader('Access-Control-Allow-Credentials', true);
        //允许的有效期: 第二次发送options方法的时间间隔
        res.setHeader('Access-Control-Max-Age', 60); //60s
        //允许设置的返回头 与前端 console.log(xhr.getResponseHeader('name'));相呼应
        res.setHeader('Access-Control-Expose-Headers', 'name');
        if(req.method === 'OPTIONS'){
            res.end();  //浏览器在发起put请求前会发送一个options方法，来验证允许访问的各种参数
        }
    }
});

app.put('/getData', function(req, res){
    console.log(req.headers);
    res.setHeader('name','jw');
    res.end('hello');
});

app.use(express.static(__dirname));
app.listen(4000)
复制代码

从 http://localhost:3000 向 http://localhsot:4000 发送put 请求。

4. 通过postMessage跨域

通过 localhost:3000 访问 a.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <iframe src="http://localhost:4000/b.html" frameborder="0" id="frame" onload="load()"></iframe>
  <script>
    function load() {
        let iframe = document.getElementById('fram');
        frame.contentWindow.postMessage('hello', 'http://localhost:4000');  
        window.onmessage = function(e){
            console.log(e.data); //打印 world
        }
    }
    </script>
 </body>
复制代码

通过localhost:4000返回 b.html

....
<script>
    window.onmessage = function(e){
        console.log(e.data); // 打印 hello
        e.source.postMessage('world', e.origin);
    }
</script>
....
复制代码

5. 通过window.name 跨域

默认情况下 window.name 为 "" 有a.html, b.html, c.html. 其中a.html 和 b.html 通过http://localhost:3000访问，c.html通过 http://localhost:4000访问.

a.html

....
  a和b是同域的 http://localhost:3000
  c是独立的  http://localhost:4000
  a获取c的数据
  a先引用c c把值放到window.name, 把a引用的地址改到b
  <iframe src="http://localhost:4000/c.html" frameborder="0" onload="load()" id="iframe"></iframe>
  <script>
    let first = true
    function load() {
      if(first){
        let iframe = document.getElementById('iframe');
        iframe.src = 'http://localhost:3000/b.html';
        first = false;
      }else{
        console.log(iframe.contentWindow.name);
      }
    }
....

复制代码

c.html

...
  <script>
    window.name = 'hello a.html'  
  </script>
...
复制代码

b.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  
</body>
</html>
复制代码

a.html 中的控制台中会打印出 hello a.html

6.通过hash方式跨域

a.html

...
  <!-- 路径后面的hash值可以用来通信  -->
  <!-- 目的a想访问c -->
  <!-- a给c传一个hash值 c收到hash值后  c把hash值传递给b b将结果放到a的hash值中-->
  <iframe src="http://localhost:4000/c.html#from_a"></iframe>
  <script>
    window.onhashchange = function () {
      console.log(location.hash);  //打印from_c
    }
  </script>
...
复制代码

b.html

...
 <script>
    window.parent.parent.location.hash = location.hash  
  </script>
...
复制代码

c.html

...
<script>
  console.log(location.hash);  //打印from_a
  let iframe = document.createElement('iframe');
  iframe.src = 'http://localhost:3000/b.html#form_c';
  document.body.appendChild(iframe);
</script>
...

复制代码

7.通过domain方式跨域

a.html

...
 <!-- 域名 一级域名二级域名 -->
  <!-- www.baidu.com -->
  <!-- viode.baidu.com -->
  <!-- a是通过 http://a.zf1.cn:3000/a.html -->
  helloa
  <iframe src="http://b.zf.cn:3000/b.html" frameborder="0" onload="load()" id="frame"></iframe>
  <script>
    document.domain = 'zf.cn'
    function load() {
      console.log(frame.contentWindow.a);
    }
  </script>
...
复制代码

b.html

...
  hellob
   <script>
      document.domain = 'zf.cn'
     var a = 100;
   </script>
...
复制代码

8.通过websocket方式跨域

socket.html

...
let socket = new WebSocket('ws://localhost:3000');
socket.onopen = function(){
    socket.send('hello');
}
socket.onmessage = function(e){
    console.log(e.data); //打印world
}
...
复制代码

server.js

let express = require('express');
let app = express();
let WebSocket = require('ws');
let wss = new WebSocket.Server({port: 3000});
wss.on('connection', function(ws){
    console.log(data); // 打印 hello
    ws.send('world');
});
复制代码

9.通过nginx方式跨域

a.html

...
 <script>
    let xhr = new XMLHttpRequest;
    xhr.open('get','http://localhost/a.json',true);
    xhr.onreadystatechange = function () {
      if(xhr.readyState === 4){
        if(xhr.status>=200 && xhr.status < 300 || xhr.status ===304){
          console.log(xhr.response);
          console.log(xhr.getResponseHeader('name'));
        }
      }
    }
    xhr.send();
  </script>
...
复制代码

nginx.conf

location / {
    // 没有配置OPTIONS的话，浏览器如果是自动识别协议(http or https)，那么浏览器的自动OPTIONS请求会返回不能跨域
    if ($request_method = OPTIONS ) {
        add_header Access-Control-Allow-Origin "$http_origin";
        add_header Access-Control-Allow-Methods "POST, GET, PUT, OPTIONS, DELETE";
        add_header Access-Control-Max-Age "3600";
        add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept, Authorization";
        add_header Access-Control-Allow-Credentials "true";
        add_header Content-Length 0;
        add_header Content-Type text/plain;
        return 200;
    }
    add_header 'Access-Control-Allow-Origin' '$http_origin';
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Methods' 'GET, PUT, POST, DELETE, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'Content-Type,*';
    proxy_pass http://127.0.0.1:8080;
    }
}
复制代码

nginx的方式有些类似cors。

10.小结

平时工作中可能熟知cors 和 jsonp， 这里大概将其原理实现了。以后再遇到面试官问你。就可以淡定的告诉他。然后还可以介绍其他的几种方式。用跨域的方式震慑住他。哈哈哈~~

转载于:https://juejin.im/post/5b19da706fb9a01e4b0623eb

weixin_34088598
关注
AJAX跨域请求数据的四种方法(实例讲解)
10-19
以下将详细讲解四种常见的跨域请求方法。 第一种方法是使用script标签的src属性请求数据。这种做法不会被浏览器拦截，因为浏览器不会对script标签中的资源请求应用同源策略。但是，这种方法有几个缺点：首先，我们...
常见的javascript跨域通信方法
01-19
本文主要介绍几种常见的javascript跨域通信方法。首先讲解一下JSONP。 1、JSONP JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server...
JS中的八种常用的跨域方式及其具体示例的总结
渔潭的博客
06-05 303
JS中的八种常用的跨域方式及其具体示例的总结 这里说的js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。 跨域问题是由于javascript语言安全限制中的同源策略造成的。 简单来说,同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性,这里的同一来源指的是域名、协议...
解决js跨域问题
热门推荐
风之子的专栏
03-14 6万+
解决js跨域问题
js中几种实用的跨域方法原理详解
萌萌的It人 www.itmmd.com
07-15 2488
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同，都被当作是不同的域。 下表给出了相对http://store.company.com/dir/page.html同源检测的结果: 要解决跨域的问题，我们可以使用以下几种方法： 一、通过jsonp
JS中的跨域问题及解决办法汇总
lareinalove的博客
11-16 4万+
一、什么是跨域？ 在了解跨域之前，首先要知道什么是同源策略（same-origin policy）。简单来讲同源策略就是浏览器为了保证用户信息的安全，防止恶意的网站窃取数据，禁止不同域之间的JS进行交互。对于浏览器而言只要域名、协议、端口其中一个不同就会引发同源策略，从而限制他们之间如下的交互行为： 1.Cookie、LocalStorage和IndexDB无法读取； 2.DOM无法获得； ...
JS中的八种常用的跨域方式及其具体示例的总结（最新、最完整、最详细）
wangchengiii的博客
09-24 8043
JS中的八种常用的跨域方式及其具体示例的总结 　　这里说的js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。 　　跨域问题是由于javascript语言安全限制中的同源策略造成的。 　　简单来说,同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性,这里的同一来源指的是域
javascript使用链接跨域下载图片
10-16
在JavaScript中，跨域下载图片是一项常见的需求，特别是在前端开发中。本文主要讲解如何使用JavaScript通过链接实现跨域下载图片，以及涉及的相关技术点。 首先，我们要了解什么是跨域问题。跨域是指一个域下的文档...
Vue项目中跨域问题解决方案
08-27
跨域问题可以通过多种方式解决，本文主要讲解在使用vue-cli搭建的项目中，如何通过更改Header和使用http-proxy-middleware代理来解决这个问题。 ### 后台更改Header 在后端服务器上，我们可以修改响应头`Access-...
使用jsonp实现跨域获取数据实例讲解
11-27
JSONP（JSON with Padding）是一种常见的跨域数据交互协议，主要应用于JavaScript中，用来解决同源策略限制下浏览器无法直接发起跨域HTTP请求的问题。在本文中，我们将深入理解JSONP的工作原理，并通过实例来演示...
jsonp实现跨域问题
weixin_30307267的博客
06-18 57
　　以前对于跨域问题，仅仅是知道通过创建script解决，根本没有深入的了解。经过几次的面试，个人觉得有必要去弄清楚jsonp跨域的原理和使用。下面与大家分析我的学习所得。（参考http://www.nowamagic.net/librarys/veda/detail/224） 　　javascript作为web开发中的前端动态脚本语言，其存在着一个很重要的安全限制，被称为“Same-...
在vue-element-admin 中引用layui的layim即时通讯模块 打包之后放到测试服，会报这个错误，求大神
weixin_43355305的博客
09-03 752
JS 跨域问题常见的五种解决方式
weixin_34419321的博客
08-27 902
一、什么是跨域？ 要理解跨域问题，就先理解好概念。跨域问题是由于javascript语言安全限制中的同源策略造成的. 简单来说,同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性,这里的同一来源指的是主机名、协议和端口号的组合. URL 说明 是否允许通信 http://www.a.com/a.js h...
vue引进layim即时对话1
weixin_42772271的博客
06-06 3196
在vue项目的static文件下放相关的layim文件 在项目的index.html中引用layim 建立im.vue
前端常见跨域解决方案（全）
weixin_34281537的博客
09-13 2245
什么是跨域？ 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。 广义的跨域： 1.) 资源跳转： A链接、重定向、表单提交 2.) 资源嵌入： <link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@f...
MQTT--EMQX入门+MQTTX使用
CJPSR的博客
09-30 919
EMQ X基于 Erlang/OTP 平台开发的MQTT 消息服务器，是开源社区中最流行的 MQTT 消息服务器。EMQ X 是开源百万级分布式。
Linux下send函数和recv函数
最新发布
威桑的博客
10-01 296
Linux下send和recv
信息安全对抗演习：应对网络威胁的坚实防线
dexun123的博客
09-29 831
演习结束后，需要对整个演习过程进行总结和评估。分析演习中发现的问题和不足并提出改进措施；同时总结经验教训为未来的演习提供参考。
JavaScript跨域4种方法与原理详解
在JavaScript编程中，跨域是一个常见的问题，因为浏览器的安全策略限制了同源策略，即只有当请求的协议、域名和端口与当前页面完全一致时，才能在客户端和服务器之间进行数据交互。本文档详细讲解了四种处理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值