前端程序员必须要知道的跨域问题以及解决方法

news2024/10/7 10:21:46

大厂面试题分享 面试题库

前后端面试题库 (面试必备) 推荐:★★★★★

地址:前端面试题库  web前端面试题库 VS java后端面试题库大全

前言

前端程序员必须要知道的跨域问题以及解决方法

node 代理

原理

同源策略发生在浏览器不发生在服务端,通过一个可以跨域的node代码,帮前端请求其他后端的数据(即自己写一个后端向其他后端发请求)。图解如下图:

代码实现

两台机器连接在同一个局域网,自己的前端:

   var ajax = new XMLHttpRequest()
            ajax.open('get', 'http://localhost:3001')
            ajax.send()
            ajax.onreadystatechange = () => {
                if (ajax.readyState == 4 && ajax.status == 200) {
                    console.log(ajax.responseText);
                }
            }

自己的后端:

const http = require('http');
// const urllib = require('url');
http.createServer(function (req, res) {

    res.writeHead(200, {
        "Access-Control-Allow-Origin": 'http://127.0.0.1:5500',//只允许自己前端请求
    })
    http.request({
        host: '别人的ip地址',
        port: '别人后端运行的端口号',
        method: 'GET',
    }, result => {
        result.on('data', function (msg) {
            console.log(msg.toString());
            //拿到数据返回给自己的前端
            res.end(msg.toString())
        })
    }).end()

    // res.end(JSON.stringify({ msg: 'hello world' }))

}).listen(3001, () => {
    console.log('listening on port 3001');
});

Nginx

原理

它的实现原理和 node 代理是一样的,只不过 node 代理是通过自己写的后端向别人的后端发请求,而 Nginx 是一款软件,使用时只需要配置文件。

简介

Nginx 是开源的轻量级 Web 服务器、反向代理服务器,以及负载均衡器和 HTTP 缓存器。其特点是高并发,高性能和低内存。它专为性能优化而开发,性能是其最重要的考量,实现上非常注重效率。

Nginx配置文件

Nginx 配置文件由三部分组成:

...              //全局块

events {         //events块
   ...
}

http      //http块
{
    ...   //http全局块
    server        //server块
    { 
        ...       //server全局块
        location [PATTERN]   //location块
        {
            ...
        }
        location [PATTERN] 
        {
            ...
        }
    }
    server
    {
      ...
    }
    ...     //http全局块
}

第一部分 全局块

主要设置一些影响 Nginx 服务器整体运行的配置指令。 比如: worker_processes 1worker_processes 值越大,可以支持的并发处理量就越多。

第二部分 events

events 块涉及的指令主要影响 Nginx 服务器与用户的网络连接。 比如: worker_connections 1024; 支持的最大连接数。

第三部分 http

http 块又包括 http 全局块和 server 块,是服务器配置中最频繁的部分,包括配置代理、缓存、日志定义等绝大多数功能。

server块:配置虚拟主机的相关参数。

location块:配置请求路由,以及各种页面的处理情况。

使用 NGINX 作为 Node.js 代理

创建代理服务器块:在配置文件中,你需要创建一个新的服务器块来定义Node.js代理。 看下面代码:

server {
    listen 80;
    server_name your-domain.com;

    location / {
        proxy_pass http://localhost:3000;  //将代理请求转发至Node.js应用的地址和端口
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

在上述示例代码中,your-domain.com应替换为你的域名或服务器IP地址。proxy_pass指令用于将请求转发到Node.js应用的地址和端口。这里假设Node.js应用正在本地的 3000 端口上运行,你需要根据实际情况进行修改。

以上这两种还有上篇文章讲到的两种共四种才是我们最常见的也是应用范围最广的处理跨域的方法,那接下来我们要聊的是不常见的在某些情况下才用得到的方法。

postMessage

有一个比较老的标签<iframe></iframe>可以用于页面嵌套子页面,postMessage方法是window上的方法,可以用在此;当页面中使用了iframe嵌套了子页面,父子页面不同源时,postMessage可以实现通信。

直接看代码:

<!-- 父页面 -->

<body>
    <h1>这是首页</h1>

    <iframe id="another" src="http://127.0.0.1:63251" frameborder="4" width="500" height="400"></iframe>

    <script>
        document.getElementById('another').onload = function () {
            // console.log(this.contentWindow);

            this.contentWindow.postMessage({ name: 'song', age: 18 }, 'http://127.0.0.1:63251')
            window.onmessage = function (e) {
                console.log(e.data);
            }
        }
    </script>
</body>
<!-- 子页面 -->

<body>
    <h3>another page</h3>

    <script>
        window.onmessage = function (e) {
            console.log(e.data, '-----');
            e.source.postMessage(`${e.data.name}今年${e.data.age}`, e.origin)
        }
    </script>
</body>

domain

这个方法和postMessage方法一样,也是用在<iframe></iframe>标签上解决跨域的;只需要声明父子页面的document.domain='xxx',来告诉浏览器无需跨域。

代码如下:

<!-- 父页面 -->

<body>
    <h1>这是home 页面</h1>
    <iframe id="about" src="http://127.0.0.1:50250/" frameborder="1"></iframe>

    <script>
        document.domain = '127.0.0.1'//告诉浏览器域名一样,只要域名一样就能通信
        document.getElementById('about').onload = function () {
            console.log(this.contentWindow.data);//获取到子页面的数据
        }
    </script>
</body>
<!-- 子页面 -->

<body>
    <h3>about page</h3>
    <script>
        document.domain = '127.0.0.1'
        var data = '这是about页面的数据'
    </script>
</body>

WebSocket

是什么?

WebSocket是一种在Web应用程序中实现全双工通信的协议。它允许服务器和客户端之间建立持久的连接,实现实时数据传输和即时通信。Socket协议不受同源策略的影响,可以跨域。

一般工作流程

  1. 握手(Handshaking):在建立WebSocket连接之前,客户端和服务器之间进行一次初始的HTTP握手。客户端发送一个包含特定头部信息的HTTP请求给服务器,服务器验证这个请求,并在响应中返回特定的头部信息,表示握手成功。
  2. 连接建立:一旦握手成功,WebSocket连接就建立起来了,服务器和客户端之间可以进行实时的双向通信。
  3. 数据传输:在WebSocket连接建立后,服务器和客户端可以通过发送消息进行实时的双向通信。服务器和客户端可以随时发送消息给对方,而不需要通过传统的HTTP请求-响应模式。
  4. 连接关闭:当通信结束或需要关闭连接时,服务器或客户端可以发送一个特定的关闭帧,表示关闭WebSocket连接。

代码演示

前端:

<body>
    <script>
        function myWebScoket(url, params) {
            return new Promise(function (resolve, reject) {
                const scoket = new WebSocket(url) // 对这个url建立scoket连接
                scoket.onopen = () => { // 向后端发送数据
                    scoket.send(JSON.stringify(params))
                }
                // 接受响应
                scoket.onmessage = (res) => {
                    resolve(res.data)
                }
            })
        }

        myWebScoket('ws://localhost:3000', { name: 'song', age: 20 })
            .then(data => {
                console.log(data);
            })
    </script>
</body>

后端:

const WebSocket = require('ws');

const ws = new WebSocket.Server({ port: 3000 })

ws.on('connection', (obj) => { // 前端跟我建立了连接
    obj.on('message', (msg) => { // 前端给我传递了数据
        console.log(msg.toString());
        const data = JSON.parse(msg.toString());
        let age = data.age
        setInterval(() => {
            console.log(age);
            obj.send(`${data.name} 今年 ${age++} 岁了`);
        }, 2000)//每隔两秒打印一次

    })
})

小结

对于跨域问题以及解决办法,这两篇文章我们详细地描述了一番,大概就是这7种解决跨域的手段。文章可能有遗漏或错误,欢迎各位大佬指出。

 

大厂面试题分享 面试题库

前后端面试题库 (面试必备) 推荐:★★★★★

地址:前端面试题库  web前端面试题库 VS java后端面试题库大全

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/669489.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于Java+socket实现多线程聊天室-控制台版

基于Javasocket实现多线程聊天室-控制台版 一、系统介绍二、功能展示1.运行效果 三、代码展示四、其它1.其他系统实现2.获取源码 一、系统介绍 首先启动server端&#xff0c;然后启动client端。任意一个client发送给server的消息都将会被转发给所有在线的client&#xff0c;实…

C++基础(16)——STL常用算法(排序、拷贝和集合)

前言 本文介绍了C中STL常用排序、拷贝和集合算法 9.3&#xff1a;常见的排序算法&#xff08;sort、random_shuffle、merge、reverse&#xff09; 9.3.1&#xff1a;sort 9.3.2&#xff1a;random_shuffle 将容器中的数据位置重新打乱&#xff0c;可以配合随机数种子使用 9…

【Java】Java核心要点总结 69

文章目录 1. BIO NIO AIO2. 多线程3. 线程的生命周期和状态4. sleep() ⽅法和 wait() ⽅法对比5. 为什么 wait() ⽅法不定义在 Thread 中&#xff1f; 1. BIO NIO AIO 在Java中&#xff0c;BIO、NIO和AIO是针对网络编程的不同I/O模型&#xff1a; BIO&#xff08;Blocking I/O…

【kotlin】使用MPAndroidChart实现PieChart(饼图)并设置每个数据的颜色、标签等属性

概述 MPAndroidChart 是 Android 上一个非常流行的开源图表库&#xff0c;它提供了多种类型的图表&#xff0c;包括折线图、柱状图、饼图等。 MPAndroidChart 实现饼图 下面是一个使用 MPAndroidChart 实现饼图的示例代码&#xff1a; 首先&#xff0c;需要在项目的 build.…

Makerbase CANable V2.0 产品简介

一、产品介绍 MKS CANable V2.0模块为MKS CANable V1.0升级版本。CANable 2.0是一款小型低成本开源 USB转CAN分析仪。CANable枚举为您计算机上的虚拟串行端口&#xff0c;并充当 CAN总线接口的串行线路。使用candleLight固件时&#xff0c;CANable在Linux上枚举为本地CAN接口。…

MySQL中float、double以及decimal的用法

1、浮点型和定点型 1.1 浮点型&#xff1a; 浮点型能够表示更大的数据范围&#xff0c;但是容易发生精度的问题 float和double属于浮点型&#xff0c;其取值范围与java中的浮点类型的取值范围相同&#xff0c;float占用4字节&#xff0c;double占用8字节 1.2 定点型&#xf…

springboot校园疫情防控管理与数据可视化系统-计算机毕设 附源码84534

springboot校园疫情防控管理与数据可视化系统 摘 要 信息化社会内需要与之针对性的信息获取途径&#xff0c;但是途径的扩展基本上为人们所努力的方向&#xff0c;由于站在的角度存在偏差&#xff0c;人们经常能够获得不同类型信息&#xff0c;这也是技术最为难以攻克的课题。针…

实战之如何在VUE中播放RTSP实时推流播放解决方案

一、知识点 常见的直播协议有以下几种 RTMP&#xff08;Real-Time Messaging Protocol&#xff09;实时消息传输协议&#xff1a;是一种用于互联网应用中的协议&#xff0c;最初由 Adobe 公司设计&#xff0c;用于 Flash Player 向 Flash Media Server 或其他支持 RTMP 的服务…

三、Docker命令及基本使用

学习参考&#xff1a;尚硅谷Docker实战教程、Docker官网、其他优秀博客(参考过的在文章最后列出) 目录 前言一、帮助启动类命令1.1 启动docker1.2 停止docker1.3 重启docker1.4 查看docker状态1.5 开机启动1.6 查看docker概要信息1.7 查看docker总体帮助文档1.8 查看docker命令…

模板文件导出Excel【EasyPoi实战系列】- 第478篇

​历史文章&#xff08;文章累计470&#xff09; 《国内最全的Spring Boot系列之一》 《国内最全的Spring Boot系列之二》 《国内最全的Spring Boot系列之三》 《国内最全的Spring Boot系列之四》 《国内最全的Spring Boot系列之五》 《国内最全的Spring Boot系列之六》 …

慎投!6月有3本SCIE期刊被剔除!(附SCI/SSCI目录下载)

期刊动态&#xff1a;2023年6月SCI、SSCI期刊目录更新 2023年6月20日&#xff0c;科睿唯安更新了WOS期刊目录&#xff0c;继上次5月WOS期刊目录剔除4本SCIE&SSCI期刊之后&#xff0c;此次6月更新又有3本SCIE期刊发生变动&#xff0c;其中有1本期刊被踢出SCIE数据库&#x…

Python基础(18)——Python推导式

Python基础&#xff08;18&#xff09;——Python推导式 文章目录 Python基础&#xff08;18&#xff09;——Python推导式目标一. 列表推导式1.1 快速体验1.2 带if的列表推导式1.3 多个for循环实现列表推导式 二. 字典推导式1 快速体验 三. 集合推导式四. 总结 目标 列表推导…

PowerShell系列(七)PowerShell当中的Provider介绍

往期回顾PowerShell系列&#xff08;一&#xff09;&#xff1a;PowerShell介绍和cmd命令行的区别 PowerShell系列&#xff08;二&#xff09;&#xff1a;PowerShell和Python之间的差异介绍 PowerShell系列&#xff08;三&#xff09;&#xff1a;PowerShell发展历程梳理 P…

管理类联考——写作——素材篇——论说文——写作素材05——志篇:奉献·公益06——制篇:原则·准则

管理类专业学位联考 (写作能力) 论说文素材 05——志篇&#xff1a;奉献公益 论文说材料: 自己活着&#xff0c;就是为了使别人过得更美好。 ——雷锋 一&#xff1a;道理论据 成人善事&#xff0c;其功更倍&#xff1b;动人善愿&#xff0c;其量无涯。——陈龙正 凡人为善…

谷歌tryOnDiffusion实现了高度逼真的虚拟试穿;ChatGPT 或将推出 AI 应用商店

&#x1f989; AI新闻 &#x1f680; ChatGPT Plus 用户已支持联网和插件功能&#xff0c;OpenAI 或将推出 AI 应用商店 摘要&#xff1a;OpenAI 宣布 ChatGPT Plus 用户已支持联网和插件功能。据外媒 The Information 报道&#xff0c;OpenAI 正考虑为 AI 软件创建一个应用商…

postgresql snapshot快照源码解析, 快照内容生成规则, 可见性是这样判断的

postgresql snapshot快照源码解读 ​专栏内容&#xff1a;postgresql内核源码分析 个人主页&#xff1a;我的主页 座右铭&#xff1a;天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物. 概述 本文主要介绍数据库事务快照&#xff0c;分别从源码实…

VisualSVN Server 5.1.5 Crack

特征 VisualSVN Server 提供以下主要功能。 Active Directory 单点登录 允许用户使用他们当前的 Active Directory 域凭据访问 VisualSVN Server。使用安全 Kerberos V5 或 NTLM 身份验证协议。支持双因素身份验证和智能卡。 多站点存储库复制 使用 VisualSVN 分布式文件系统…

【FPGA入门】第七篇、FPGA实现VGA接口驱动

目录 第一部分、实验结果 1、横的三色彩条效果 2、竖的三色彩条效果 第二部分、VGA驱动基本知识 1、VGA分辨率问题 2、VGA驱动波形 2.1、工业标准的时序波形图 2.2、比上面那张图更容易理解的图 2.3、每个区域对应的时间 2.4、不同分辨率的表格 3、VGA扫描范…

【NeRF大总结】基于NeRF的三维视觉年度进展报告

基于NeRF的三维视觉年度进展报告 清华大学&#xff1a;刘烨斌 原文链接&#xff1a;【NeRF大总结】基于NeRF的三维视觉年度进展报告–清华大学刘烨斌 (by 小样本视觉与智能) 目录 文章目录 基于NeRF的三维视觉年度进展报告01 背景介绍NeRFNeRF与三维视觉三维表征与可微渲染…

信号与系统与MATLAB应用(一)

文章目录 前言一、基本信号表示1、周期方波信号2、周期锯齿波信号3、指数函数信号4、抽样函数信号5、单位阶跃信号 二、信号的基本运算1、信号的相加和相乘2、信号的平移3、信号的反折4、信号的尺度变换&#xff08;缩展&#xff09;5、信号的微分和积分未完待续... 前言 说起…