2024年前端最新前端程序员必须要知道的跨域问题以及解决方法_前端跨域400(2)，2024web前端经典面试题及答案

最新推荐文章于 2025-04-24 17:34:08 发布

2401_84616977

最新推荐文章于 2025-04-24 17:34:08 发布

阅读量920

点赞数 18

CC 4.0 BY-SA版权

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

本文链接：https://blog.csdn.net/2401_84616977/article/details/138823182

程序员专栏收录该内容

103 篇文章

订阅专栏

框架相关

原生JS虽能实现绝大部分功能，但要么就是过于繁琐，要么就是存在缺陷，故绝大多数开发者都会首选框架开发方案。现阶段较热门是React、Vue两大框架，两者工作原理上存在共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。

在框架方面，生命周期、钩子函数、虚拟DOM这些基本知识是必须要掌握的，在学习的过程可以结合框架的官方文档

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

Vue框架

知识要点：
1. vue-cli工程
2. vue核心知识点
3. vue-router
4. vuex
5. http请求
6. UI样式
7. 常用功能
8. MVVM设计模式

React框架

知识要点：
1. 基本知识
2. React 组件
3. React Redux
4. React 路由

   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 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);//获取到子页面的数据
        }


##### 框架相关

原生JS虽能实现绝大部分功能，但要么就是过于繁琐，要么就是存在缺陷，故绝大多数开发者都会首选框架开发方案。现阶段较热门是React、Vue两大框架，两者工作原理上存在共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。

在框架方面，**生命周期、钩子函数、虚拟DOM这些基本知识是必须要掌握的**，在学习的过程可以结合框架的官方文档

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

**Vue框架**

>**知识要点：**
>**1. vue-cli工程**
>**2. vue核心知识点**
>**3. vue-router**
>**4. vuex**
>**5. http请求**
>**6. UI样式**
>**7. 常用功能**
>**8. MVVM设计模式**

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


**React框架**

>**知识要点：**
>**1. 基本知识**
>**2. React 组件**
>**3. React Redux**
>**4. React 路由**

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



ue核心知识点**
>**3. vue-router**
>**4. vuex**
>**5. http请求**
>**6. UI样式**
>**7. 常用功能**
>**8. MVVM设计模式**

[外链图片转存中...(img-f8GwF1LQ-1715611863827)]


**React框架**

>**知识要点：**
>**1. 基本知识**
>**2. React 组件**
>**3. React Redux**
>**4. React 路由**

[外链图片转存中...(img-36e1WpK3-1715611863828)]