2024年最新前端程序员必须要知道的跨域问题以及解决方法_前端跨域400，2024年最新京东前端二面都问啥

2401_84437095

于 2024-05-15 12:15:44 发布

阅读量357

点赞数 3

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84437095/article/details/138903448

版权

程序员专栏收录该内容

164 篇文章 1 订阅

订阅专栏

最后：

总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

简介

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

Nginx配置文件

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

...              //全局块

events {         //events块
   ...
}

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

第一部分全局块

主要设置一些影响 Nginx 服务器整体运行的配置指令。比如：worker_processes 1; worker_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协议不受同源策略的影响，可以跨域。

一般工作流程

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


### 基础学习：

前端最基础的就是 HTML , CSS 和 JavaScript 。

##### 网页设计：HTML和CSS基础知识的学习

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![](https://img-blog.csdnimg.cn/img_convert/60bad7fb151e1802818ce08d42b6cfe3.webp?x-oss-process=image/format,png)


CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

![](https://img-blog.csdnimg.cn/img_convert/f62981d0eac55d5f4cd161f1a4ace516.webp?x-oss-process=image/format,png)


##### 动态交互：JavaScript基础的学习

JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

![](https://img-blog.csdnimg.cn/img_convert/f25bdc8c1bba9ef523106436b5afa77e.webp?x-oss-process=image/format,png)

为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

[外链图片转存中...(img-XLImDwlD-1715746521584)]


##### 动态交互：JavaScript基础的学习

JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

[外链图片转存中...(img-CJRQMkui-1715746521585)]

2401_84437095

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
2024年最新前端程序员必须要知道的跨域问题以及解决方法_前端跨域400，2024年最新京东前端二面都问啥

总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】Nginx是开源的轻量级Web服务器、反向代理服务器，以及负载均衡器和。
复制链接

扫一扫