七大跨域解决方法原理

编程语言 2022-03-15 22:34:15 阅读次数: 0

前言

咱们做前端的，平时跟后端对接接口那是必须的事情，但是可能很多同学忽略了一个对接过程中可能会发生的问题——跨域，那跨域到底是啥呢？为什么会跨域呢？又怎么才能解决呢？

image.png

为什么跨域？

为什么会出现跨域问题呢？那就不得不讲浏览器的同源策略了，它规定了协议号-域名-端口号这三者必须都相同才符合同源策略

image.png

如果有一个 不相同，就会出现跨域问题，不符合同源策略导致的后果有

  • 1、LocalStorge、SessionStorge、Cookie等浏览器内存无法跨域访问
  • 2、DOM节点无法跨域操作
  • 3、Ajax请求无法跨域请求

注意点：一个IP是可以注册多个不同域名的，也就是多个域名可能指向同一个IP，即使是这样，他们也不符合同源策略

image.png

跨域的时机？

跨域发生在什么时候呢？

  • 1、请求一发出就被浏览器的跨域报错拦了下来（大多数回答）
  • 2、请求发出去到后端，后端返回数据，在浏览器接收后端数据时被浏览器的跨域报错拦下来

那到底是那种呢？我们可以验证下，咱们先npm i nodemon -g,然后创建一个index.js,然后nodemon index起一个node服务

//index.js  http://127.0.0.1:8000

const http = require('http');

const port = 8000;

http.createServer(function (req, res) {
    const { query } = urllib.parse(req.url, true);
    console.log(query.name)
    console.log('到后端喽')
    res.end(JSON.stringify('林三心'));
}).listen(port, function () {
    console.log('server is listening on port ' + port);
})

复制代码

再创建一个index.html,用来写前端的请求代码，咱们就写一个简单的AJAX请求

// index.html http://127.0.0.1:5000/index.html
<script>
    // 步骤一：创建异步对象
    var ajax = new XMLHttpRequest();
    // 步骤二：设置请求的url参数，参数一是请求的类型，参数二是请求的url，可以带参数
    ajax.open('get','http://127.0.0.1:8000?name=前端过来的林三心');
    // 步骤三：发送请求
    ajax.send();
    // 步骤四：注册事件 onreadystatechange 状态改变就会调用
    ajax.onreadystatechange = function(){
        if(ajax.redayState == 4 && ajax.status == 200){
            // 步骤五：如果能够进入这个判断说明数据完美的回来了，并且请求的页面是存在的
                console.log(ajax.responseText);//输入相应的内容
        }
    }
</script>
复制代码

image.png

最终，前端确实是跨域报错了。但这不是结果，我们要想知道是哪一个答案，关键在于看后端的node服务哪里有没有输出，就一目了然了。所以，答案2才是对的

image.png

image.png

同域情况 && 跨域情况？

前面提到了同源策略,满足协议号-域名-端口号这三者都相同就是同域，反之就是跨域,会导致跨域报错，下面通过几个例子让大家巩固一下对同域和跨域的认识吧!

85f1f0c34cb846348a0e6be8c96efa6b_tplv-k3u1fbpfcp-zoom-in-crop-mark_1304_0_0_0.webp

解决跨域的方案

跨域其实是一个很久的问题了，对应的解决方案也有很多，一起接着往下读吧!!!

JSONP

前面咱们说了，因为浏览器同源策略的存在，导致存在跨域问题，那有没有不受跨域问题所束缚的东西呢？其实是有的，以下这三个标签加载资源路径是不受束缚的

  • 1、script标签：<script src="加载资源路径"></script>
  • 2、link标签：<link herf="加载资源路径"></link>
  • 3、img标签：<img src="加载资源路径"></img>

而JSONP就是利用了script的src加载不受束缚，从而可以拥有从不同的域拿到数据的能力，但是JSONP需要前端后端配合，才能实现最终的跨域获取数据。 JSONP通俗点说就是：利用script的src去发送请求，将一个方法名callback传给后端，后端拿到这个方法名，将所需数据，通过字符串拼接成新的字符串callback(所需数据),并发送到前端，前端接受到这个字符串之后，就会自动执行方法callback(所需数据)。老规矩，先上图，再上代码。

image.png

后端代码

// index.js http://127.0.0.1:8000
const http = require('http');
const urllib = require('url');

const port = 8000;

http.createServer(function(req,res){
    const { query } = urllib.parse(req.url,true);
    if(query && query.callback){
        const { name, age, callback } = query
        const person = `${name}今年${age}岁了!!!`
        const str = `${callback}(${JSON.stringify(person)})` //拼成callback(data)
        res.end(str)
    }else{
        res.end(JSON.stringify('没东西啊你'));
    }
}).listen(port,function(){
    console.log('server is listening on port ' + port);
})
复制代码

前端代码

// index.html http://127.0.0.1:5500/index.html

    const jsonp = (url, params, cbName) => {
        return new Promise((resolve,reject) => {
           const script = document.createElement('script')
           window[cbName] = (data) => {
               resolve(data)
               document.body.removeChild(script)
           }
           params = { ...params, callback：cbName }
           const str = Object.key(params).map(key => `${key}=${params[key]}`)
           script.src = `${url}?${arr.join('&')}`
           document.body.appendChild(script)
        })
    }
    
    jsonp.('http://127.0.0.1:8000',{ name:'林三心', age: 23),'callback',).then(data => {
        console.log(data) // 林三心今年23岁了!!!
    }
复制代码

image.png

JSONP的缺点就是，需要前后端配合，并且只支持get请求方法

WebSocket

WebSocket是什么东西？其实我也不怎么懂，但是我也不会像别人一样把MDN的资料直接复制过来，因为复制过来相信大家也是看不懂的。

我理解的WebSocket是一种协议(跟http同级，都是协议)，并且她可以进行跨域通信，为什么她支持跨域通信呢？

我这里找到一篇文章WebSocket凭啥可以跨域？，讲的挺好

image.png

后端代码

先安装 npm i ws 

// index.js http://127.0.0.1:8000
const Websocket = require('ws');

const port = 8000;
const ws = new Websocket.Server({ port })
ws.on('connection',(obj) =>{
    obj.on('message',(data) =>{
        data = JSON.parse(data.toString())
        const { name, age } = data
        obj.send(`${name}今年${age}岁了!!!`)
    })
})
复制代码

前端代码

// index.html http://127.0.0.1:5500/index.html


    function myWebsocket(url,params){
        return new Promise((resolve,reject)=>{
            const socket = new WebSocket(url)
            socket.onopen = () => {
                socket.send(JSON.stringify(params))
            }
            socket.onmessage = (e) => {
                resolve(e.data)
            }
        })
    }
    myWebsocket('ws://127.0.0.1:8000',{ name:'林三心', age:23 }).then(data=>){
        console.log(data) // 林三心今年23岁了!!!
    }
复制代码

结果如下

image.png

Cors

Cors，全称Cross-Origin Resource Sharing,意思是跨域资源共享，Cors一般是由后端来开启的，一旦开启，前端就可以跨域访问后端。 为什么后端开启Cors，前端就能跨域请求后端呢？我的理解是：前端跨域访问到后端，后端开启Cors，发送Access-Control-Allow-Origin:域名字段到前端(其实不止一个)，前端浏览器判断Access-Control-Allow-Origin的域名如果跟前端域名一样，浏览器就不会实行跨域拦截，从而解决跨域问题。

image.png

后端代码

// index.js http://127.0.0.1:8000

const http = require('http');
const urllib = require('url');

const port = 8000;

http.createServer(function(req,res){
    // 开启Cors
    res.writeHead(200,{
        // 设置允许跨域的域名，也可设置*允许所有域名
        'Access-Control-Allow-Origin': 'http://127.0.0.1.5500',
        // 跨域允许的请求方法，也可以设置*允许所有方法
        "Access-Control-Allow-Methods": 'DELETE,PUT,POST,GET,OPIIONS',
        // 允许的header类型
        'Access-Contorl-Allow-Headers': 'Content-Type'
    })
    const { query : { name, age } } = urllib.parse(req.url, true);
    res.end(`${name}今年${age}岁啦！！！`);
}).listen(port,function(){
    console.log('server is listening on port ' + port);
})
复制代码

前端代码

// index.html http://127.0.0.1:5500/index.html
    // 步骤一：创建异步对象
    var ajax = new XMLHttpRequest();
    // 步骤二：设置请求的url参数，参数一是请求的类型，参数二是请求的url，可以带参数
    ajax.open('get','http://127.0.0.1:8000?name=林三心&age=23');
    // 步骤三：发送请求
    ajax.send();
    // 步骤四：注册事件 onreadystatechange 状态改变就会调用
    ajax.onreadystatechang = function(){
        if(ajax.readyState == 4 && ajax.status == 200){
            // 步骤五 如果能够进到这个判断 说明数据完美的回来了，并且请求的页面是存在的
            console.log(ajax.responseText);
        }
    }
复制代码

image.png

image.png

Node接口代理

还是回到同源策略，同源策略它只是浏览器的一个策略而已，它是不限制后端的，也就是前端-后端会被同源策略限制，但是后端-后端则不会被限制，所以可以通过Node接口代理，先访问已设置Cors的后端1，再让后端1去访问后端2获取数据到后端1，后端1再把数据传到前端

image.png

后端2代码

// index.js  http://127.0.0.1:8000

const http = require('http');
const urllib = require('url');

const port = 8000;

http.createServer(function (req, res) {
    console.log(888)
    const { query: { name, age } } = urllib.parse(req.url, true);
    res.end(`${name}今年${age}岁啦！！！`)
}).listen(port, function () {
    console.log('server is listening on port ' + port);
})
复制代码

创建一个index2.js，并nodmeon index2.js

后端1代码

// index2.js  http://127.0.0.1:8888

const http = require('http');
const urllib = require('url');
const querystring = require('querystring');
const port = 8888;

http.createServer(function (req, res) {
    // 开启Cors
    res.writeHead(200, {
        //设置允许跨域的域名，也可设置*允许所有域名
        'Access-Control-Allow-Origin': 'http://127.0.0.1:5500',
        //跨域允许的请求方法，也可设置*允许所有方法
        "Access-Control-Allow-Methods": "DELETE,PUT,POST,GET,OPTIONS",
        //允许的header类型
        'Access-Control-Allow-Headers': 'Content-Type'
    })
    const { query } = urllib.parse(req.url, true);
    const { methods = 'GET', headers } = req
    const proxyReq = http.request({
        host: '127.0.0.1',
        port: '8000',
        path: `/?${querystring.stringify(query)}`,
        methods,
        headers
    }, proxyRes => {
        proxyRes.on('data', chunk => {
            console.log(chunk.toString())
            res.end(chunk.toString())
        })
    }).end()
}).listen(port, function () {
    console.log('server is listening on port ' + port);
})
复制代码

前端代码

// index.html  http://127.0.0.1:5500

//步骤一:创建异步对象
    var ajax = new XMLHttpRequest();
    //步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
    ajax.open('get', 'http://127.0.0.1:8888?name=林三心&age=23');
    //步骤三:发送请求
    ajax.send();
    //步骤四:注册事件 onreadystatechange 状态改变就会调用
    ajax.onreadystatechange = function () {
        if (ajax.readyState == 4 && ajax.status == 200) {
            //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
            console.log(ajax.responseText);//输入相应的内容
        }
    }
复制代码

结果如下

image.png

Nginx

其实Nginx跟Node接口代理是一个道理，只不过Nginx就不需要我们自己去搭建一个中间服务

image.png 先下载nginx,然后将nginx目录下的nginx.conf修改如下：

server{ 
    listen 8888; 
    server_name 127.0.0.1;
    
    location /{
        proxy_pass 127.0.0.1:8000; 
    } 
  }
复制代码

最后通过命令行nginx -s reload启动nginx

后端代码

// index.js http://127.0.0.1:8000

const http = require('http');
const urllib = require('url');

const port = 8000;

http.createState(function(req,res){
    const { query:{ name, age } } = urllib.parse(req.url,true);
    res.end(`${name}今年${age}岁啦！！！`);
})
复制代码

前端代码

// index.html http://127.0.0.1:5500

//步骤一：创建异步对象
    var ajax = XMLHttpRequest();
    //步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端 
    ajax.open('get', 'http://127.0.0.1:8888?name=林三心&age=23'); 
    //步骤三:发送请求 
    ajax.send(); 
    //步骤四:注册事件 onreadystatechange 状态改变就会调用 
    ajax.onreadystatechange = function () { 
        if (ajax.readyState == 4 && ajax.status == 200) { 
            //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的  
            console.log(ajax.responseText);//输入相应的内容 
        } 
      }
复制代码

结果如下

image.png

postMessage

场景：http://127.0.0.1:5500/index.html页面中使用了iframe标签内嵌了http://127.0.0.1:5555/index.html的页面 虽然这两个页面存在于一个页面中，但是需要iframe标签来嵌套才行，这两个页面之间是无法进行通信的，因为他们端口号不同，根据同源策略，他们之间存在跨域问题 那应该怎么办呢？使用postMessage可以使这两个页面进行通信

image.png

// http:127.0.0.1:5500/index.html

<body>
    <iframe src="http://127.0.0.1:5555/index.html" id="frame"></iframe>
</body>
<script>
    document.getElementById('frame').onload = function () {
        this.contentWindow.postMessage({ name: '林三心', age: 23 }, 'http://127.0.0.1:5555')
        window.onmessage = function (e) {
            console.log(e.data) // 林三心今年23岁啦！！！
        }
    }
</script>
复制代码
// http://127.0.0.1:5555/index.html

<script>
        window.onmessage = function (e) {
            const { data: { name, age }, origin } = e
            e.source.postMessage(`${name}今年${age}岁啦！！！`, origin)
        }
</script>
复制代码

document.domain && iframe

场景：a.sanxin.com/index.html与b.sanxin.com/index.html之间的通信 其实上面这两个正常情况下是无法通信的，因为他们的域名不相同，属于跨域通信 那怎么办呢？其实他们有一个共同点，那就是他们的二级域名都是sanxin.com，这使得他们可以通过document.domain && iframe的方式来通信

image.png

由于本菜鸟暂时没有服务器，所以暂时使用本地来模拟

// http://127.0.0.1:5500/index.html

<body>
    <iframe src="http://127.0.0.1:5555/index.html" id="frame"></iframe>
</body>
<script>
    document.domain = '127.0.0.1'
    document.getElementById('frame').onload = function () {
        console.log(this.contentWindow.data) // 林三心今年23岁啦！！！
    }
</script>
复制代码
// http://127.0.0.1:5555/index.html

 <script>
        // window.name="林三心今年23岁啦！！！"
        document.domain = '127.0.0.1'
        var data = '林三心今年23岁啦！！！';
</script>
复制代码

结果如下

image.png

完结

转自 掘金作者 Sunshine_Lin

原链接:juejin.cn/post/701761…

猜你喜欢

转载自juejin.im/post/7075261878997352462
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022