跨域解决 | 面试常问问题

跨域解决 | 面试常问问题

跨域问题一直是前端开发中不可避免的一部分，它涉及到浏览器的同源策略和安全机制。本文将深入解析跨域问题的本质，并探讨前端和后端的多种解决方案，同时分享一些扩展与高级技巧。最后，我们还将总结跨域解决方案的优缺点，并列出一些面试中常见的问题。

在这里插入图片描述

目录

  • 跨域解决 | 面试常问问题
    • 一、为什么会出现跨域问题
    • 二、前端解决方案
      • 1. JSONP
      • 2. CORS
      • 3. 代理服务器
      • 4. PostMessage
      • 5. WebSocket
    • 三、后端解决方案
      • 1. 设置CORS响应头
      • 2. 使用代理服务器
      • 3. WebSocket
      • 4. JSONP
      • 5. 其他HTTP头部设置
    • 四、扩展与高级技巧
      • 1. 跨域资源共享（CORS）的深入理解
      • 2. 使用Nginx作为反向代理服务器
      • 3. WebSocket的高级应用
      • 4. 安全性考虑
      • 5. 跨域问题的调试技巧
    • 五、前端与后端解决对应优点和缺点
      • 1. 前端解决方案
      • 2. 后端解决方案
    • 六、面试常问问题
      • 1. 什么是跨域问题？为什么会出现跨域问题？
      • 2. 你如何解决跨域问题？请列举几种方法。
      • 3. 请简要介绍一下CORS机制。
      • 4. 你在实际项目中如何解决跨域问题？请举例说明。
    • 七、总结与展望

一、为什么会出现跨域问题

跨域问题主要源于浏览器的同源策略。所谓“同源”，指的是协议、域名、端口三者完全相同。当浏览器执行一个脚本时，它会检查这个脚本是否属于同源。如果不是，浏览器就会限制这个脚本的某些行为，如发送AJAX请求。

跨域问题主要出现在以下几种情况：

  1. 前后端分离的开发模式，前端和后端部署在不同的域名下。
  2. 使用了CDN等第三方服务，这些服务的域名与主站域名不同。
  3. 本地开发时，前端通常使用localhost或127.0.0.1作为域名，与后端服务的域名不同。

二、前端解决方案

1. JSONP

JSONP是一种古老但有效的跨域解决方案。它利用<script>标签的src属性不受同源策略限制的特点，通过动态创建<script>标签来发送请求。

function jsonp({url, params, callback}) {return new Promise((resolve, reject) => {let script = document.createElement('script');window[callback] = function(data) {resolve(data);document.body.removeChild(script);};params = {...params, callback}; // wd=b&callback=showlet arrs = [];for(let key in params) {arrs.push(`${key}=${params[key]}`);}script.src = `${url}?${arrs.join('&')}`;document.body.appendChild(script);});
}jsonp({url: 'http://localhost:3000/say',params: {wd: 'Iloveu'},callback: 'show'
}).then(data => {console.log(data);
});

2. CORS

CORS（跨源资源共享）是一种更现代的跨域解决方案。它通过在服务器端设置响应头来告诉浏览器：“这个资源是可以跨域访问的”。

前端代码不需要做任何改变，只需要后端在响应头中添加如下内容：

Access-Control-Allow-Origin: *

或者指定具体的域名：

Access-Control-Allow-Origin: http://example.com

3. 代理服务器

在开发环境中，我们可以使用代理服务器来转发请求，从而避免跨域问题。例如，使用webpack的devServer配置：

// webpack.config.js
module.exports = {//...devServer: {proxy: {'/api': {target: 'http://localhost:3000',changeOrigin: true,pathRewrite: {'^/api' : ''}}}}
};

这样，所有以/api开头的请求都会被转发到http://localhost:3000。

4. PostMessage

PostMessage是一种跨窗口通信的方式，也可以用来解决跨域问题。它允许来自不同源的脚本采用异步方式进行有限的通信。

// 主页面 http://example.com
window.addEventListener('message', function(e) {if (e.origin !== "http://other.com") {return;}console.log(e.data);
}, false);// iframe页面 http://other.com
window.parent.postMessage('Hello World!', 'http://example.com');

5. WebSocket

WebSocket是一种在单个连接上进行全双工通讯的协议。它不受同源策略的限制，因此可以用来解决跨域问题。

let socket = new WebSocket('ws://localhost:3000');
socket.onopen = function () {socket.send('Hello Server!');
};socket.onmessage = function (e) {console.log('Server: ' + e.data);
};

三、后端解决方案

1. 设置CORS响应头

前面已经提到过，后端可以通过设置CORS响应头来解决跨域问题。这是最常用的后端解决方案。

2. 使用代理服务器

后端也可以设置代理服务器来转发请求，从而避免跨域问题。例如，使用Nginx作为反向代理服务器。

3. WebSocket

后端同样可以使用WebSocket来解决跨域问题。WebSocket协议本身不受同源策略的限制。

4. JSONP

虽然JSONP主要是前端解决方案，但后端也需要提供相应的支持。后端需要接收callback参数，并将数据作为参数传递给这个callback函数。

5. 其他HTTP头部设置

除了CORS响应头之外，后端还可以设置其他一些HTTP头部来解决跨域问题，如Access-Control-Allow-Methods、Access-Control-Allow-Headers等。

四、扩展与高级技巧

1. 跨域资源共享（CORS）的深入理解

CORS是一个复杂的机制，它涉及到预检请求、简单请求、凭证请求等多个概念。深入理解CORS机制有助于我们更好地解决跨域问题。

2. 使用Nginx作为反向代理服务器

Nginx是一个强大的反向代理服务器，它可以用来转发请求、缓存响应、负载均衡等。使用Nginx作为反向代理服务器可以有效地解决跨域问题。

3. WebSocket的高级应用

WebSocket不仅可以用来解决跨域问题，还可以实现实时通信、在线游戏、协同编辑等高级应用。

4. 安全性考虑

在解决跨域问题时，我们也需要考虑安全性。例如，使用CORS时应该尽量避免使用Access-Control-Allow-Origin: *，而是指定具体的域名。同时，我们也需要注意防止CSRF攻击等安全问题。

5. 跨域问题的调试技巧

跨域问题往往比较复杂，难以调试。我们可以使用浏览器的开发者工具来查看请求和响应的详细信息，也可以使用一些在线工具来测试跨域请求。

五、前端与后端解决对应优点和缺点

1. 前端解决方案

优点：

  • 不需要后端支持，前端可以独立解决跨域问题。
  • 适用于开发环境和简单的生产环境。

缺点：

  • 安全性较低，容易受到CSRF攻击。
  • 依赖于浏览器和第三方服务，可能存在兼容性问题。

2. 后端解决方案

优点：

  • 安全性较高，可以有效地防止CSRF攻击。
  • 适用于复杂的生产环境。

缺点：

  • 需要后端支持，前端无法独立解决跨域问题。
  • 配置可能比较复杂，需要一定的技术储备。

六、面试常问问题

1. 什么是跨域问题？为什么会出现跨域问题？

跨域问题是指浏览器在执行脚本时，由于同源策略的限制，导致某些行为（如发送AJAX请求）无法完成。跨域问题主要出现在前后端分离的开发模式、使用了CDN等第三方服务、本地开发时等情况下。

2. 你如何解决跨域问题？请列举几种方法。

我通常使用以下几种方法来解决跨域问题：

  • JSONP：利用<script>标签的src属性不受同源策略限制的特点来发送请求。
  • CORS：在服务器端设置响应头来告诉浏览器这个资源是可以跨域访问的。
  • 代理服务器：使用代理服务器来转发请求，从而避免跨域问题。
  • PostMessage：使用跨窗口通信的方式来解决跨域问题。
  • WebSocket：使用WebSocket协议来解决跨域问题。

3. 请简要介绍一下CORS机制。

CORS是一个复杂的机制，它涉及到预检请求、简单请求、凭证请求等多个概念。当浏览器执行一个跨域请求时，它会先发送一个预检请求给服务器，询问服务器是否允许这个跨域请求。如果服务器允许，那么浏览器就会继续发送实际的请求。CORS机制可以有效地防止CSRF攻击等安全问题。

4. 你在实际项目中如何解决跨域问题？请举例说明。

在实际项目中，我通常会根据项目的具体需求和开发环境来选择合适的跨域解决方案。例如，在开发环境中，我会使用webpack的devServer配置来设置代理服务器；在生产环境中，我会使用CORS机制来解决跨域问题。同时，我也会注意安全性考虑，尽量避免使用Access-Control-Allow-Origin: *等不安全的设置。

七、总结与展望

跨域问题是前端开发中不可避免的一部分，但也是我们可以通过多种方法来解决的问题。本文深入解析了跨域问题的本质和多种解决方案，并分享了一些扩展与高级技巧。希望本文能够帮助你更好地理解和解决跨域问题。在未来的开发中，我们也可以期待更多的新技术和方法来解决跨域问题，让前端开发更加便捷和高效。

看到这里的小伙伴，欢迎点赞、评论，收藏！

如有前端相关疑问，博主会在第一时间解答，也同样欢迎添加博主好友，共同进步！！！

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

UE基础 —— Components

UE基础 —— Components

目录 Component Instancing Instanced Static Mesh Component Instanced Static Mesh Differences of an ISM and a Static Mesh Component Hierarchical Instanced Static Mesh Instancing Systems Working with ISMs Prefabrication Custom Data Creating and Edit…
阅读更多...
ElasticSearch 8.15.0 与 Kibana 8.15.0 尝鲜体验

ElasticSearch 8.15.0 与 Kibana 8.15.0 尝鲜体验

还不算晚&#xff0c;虽然已经距离发布过去了快半个月~ 跟着下面的步骤进行一步一步操作(CV)&#xff0c;只需要改动一下用户名、密码这些数据即可从零开始用 Docker安装 ES 与 Kibana 最新版&#xff0c;据说 Kibana 还有 AI 助手嘞(虽然是 8.12 推出的)~ 最后强调一点&#…
阅读更多...
自动化开发流程：使用 GitHub Actions 进行 CI/CD

自动化开发流程：使用 GitHub Actions 进行 CI/CD

在现代软件开发过程中&#xff0c;持续集成&#xff08;Continuous Integration, CI&#xff09;和持续部署&#xff08;Continuous Deployment, CD&#xff09;是确保高质量软件交付的关键组成部分。GitHub Actions 提供了一种简便的方式来实现 CI/CD 流程的自动化。本文将介绍…
阅读更多...
Unity XR Interaction Toolkit 通过两个手柄控制物体放大缩小

Unity XR Interaction Toolkit 通过两个手柄控制物体放大缩小

1&#xff1a;给物体添加 XR General Grab Transformer 脚本 2&#xff1a;XR Grab Interactable 的 select mode 选择 Multiple
阅读更多...
java-队列--黑马

java-队列--黑马

队列 别看这个&#xff0c;没用&#xff0c;还是多刷力扣队列题 定义 队列是以顺序的方式维护一组数据的集合&#xff0c;在一端添加数据&#xff0c;从另一端移除数据。一般来讲&#xff0c;添加的一端称之尾&#xff0c;而移除一端称为头 。 队列接口定义 // 队列的接口定…
阅读更多...
Linux——驱动——杂项设备

Linux——驱动——杂项设备

一、杂项设备驱动 1、概念 杂项设备&#xff08;Miscellaneous Devices&#xff09;在Linux内核中是一种特殊的设备类型&#xff0c;用于表示那些不适合被归类为其他标准设备类型的设备。这些设备通常具有不规则的特性和非标准的通信协议或接口。 2、操作流程 杂项设备注册过…
阅读更多...
中国数据库的崛起：从本土化挑战到全球化机遇

中国数据库的崛起：从本土化挑战到全球化机遇

引言 谈起中国的崛起&#xff0c;大家第一反应可能是“中国制造”“高铁奇迹”“电商帝国”&#xff0c;但今天我们要聊的&#xff0c;是一个比这些还要神秘的存在——中国的数据库技术。或许你平时并不会经常关注它&#xff0c;但这个隐身在你手机、电脑、服务器背后的无形力…
阅读更多...
002、架构_概览

002、架构_概览

GoldenDB 主要由管理节点、计算节点、数据节点、全局事务节点等模块组成&#xff0c;各个节点无需共享任何资源&#xff0c;均为独立自治的通用计算机节点&#xff0c;之间通过高速互联的 网络通讯&#xff0c;从而完成对应用数据请求的快速处理和响应。 管理节点在数据库中主要…
阅读更多...
如何在寂静中用电脑找回失踪的手机？远程控制了解一下

如何在寂静中用电脑找回失踪的手机？远程控制了解一下

经过一番努力&#xff0c;我终于成功地将孩子哄睡了。夜深人静&#xff0c;好不容易有了一点自己的时间&#xff0c;就想刷手机放松放松&#xff0c;顺便看看有没有重要信息。但刚才专心哄孩子去了&#xff0c;一时就忘记哄孩子之前&#xff0c;顺手把手机放哪里去了。 但找过手…
阅读更多...
种树问题——CSP-J1真题讲解

种树问题——CSP-J1真题讲解

【题目】 小明在某一天中依次有七个空闲时间段&#xff0c;他想要选出至少一个空闲时间段来练习唱歌&#xff0c;但他希望任意两个练习的时间段之间都有至少两个空闲的时间段让他休息。则小明一共有( ) 种选择时间段的方案 A. 31 B. 18 C. 21 D. 33 【答案】 B 【解析…
阅读更多...
Vue.js学习笔记（七）使用sortablejs或el-table-draggable拖拽ElementUI的el-table表格组件

Vue.js学习笔记（七）使用sortablejs或el-table-draggable拖拽ElementUI的el-table表格组件

文章目录 前言一、el-table-draggable是什么&#xff1f;二、使用步骤1.安装使用2.sortablejs 总结 前言 记录 el-table-draggable 插件使用方法。 一、el-table-draggable是什么&#xff1f; el-table-draggable的存在就是为了让vue-draggable支持element-ui中的el-table组件…
阅读更多...
卸载nomachine

卸载nomachine

网上的方法：提示找不到命令 我的方法： step1. 终端输入 sudo find / -name nxserver 2>/dev/null确认 NoMachine 的实际安装路径。你可以使用 find 命令在系统中查找 nxserver 脚本的位置。 找到路径后，你可以使用该路径来卸载 NoMachine。 如下图，紫色框中是我的路径…
阅读更多...
Android - lock/unlock bootloader

Android - lock/unlock bootloader

在执行 adb remount 时高版本经常会提示失败 此时就需要对设备的进行解锁操作。记录两个部分&#xff0c;Google解锁和展锐解锁。 目录 一、Google解锁 二、展锐解锁 三、补充跳过按键检测的方案 一、Google解锁 官网介绍的unlock方法如下&#xff1a;锁定/解锁引导加载程序…
阅读更多...
RK3588 技术分享 | 在Android系统中使用NPU实现Yolov5分类检测-迅为电子

RK3588 技术分享 | 在Android系统中使用NPU实现Yolov5分类检测-迅为电子

随着人工智能和大数据时代的到来&#xff0c;传统嵌入式处理器中的CPU和GPU逐渐无法满足日益增长的深度学习需求。为了应对这一挑战&#xff0c;在一些高端处理器中&#xff0c;NPU&#xff08;神经网络处理单元&#xff09;也被集成到了处理器里。NPU的出现不仅减轻了CPU和GPU…
阅读更多...
Linux基础环境开发工具gcc/g++ make/Makefile git

Linux基础环境开发工具gcc/g++ make/Makefile git

1.Linux编译器-gcc/g使用 1. 预处理&#xff08;进行宏替换) 预处理功能主要包括宏定义,文件包含,条件编译,去注释等。 预处理指令是以#号开头的代码行。 实例: gcc –E hello.c –o hello.i 选项“-E”,该选项的作用是让 gcc 在预处理结束后停止编译过程。 选项“-o”是指目标…
阅读更多...
【Java数据结构】---二叉树OJ

【Java数据结构】---二叉树OJ

乐观学习&#xff0c;乐观生活&#xff0c;才能不断前进啊&#xff01;&#xff01;&#xff01; 我的主页&#xff1a;optimistic_chen 我的专栏&#xff1a;c语言 &#xff0c;Java 欢迎大家访问~ 创作不易&#xff0c;大佬们点赞鼓励下吧~ 文章目录 相同的树另一颗树的子树翻…
阅读更多...
linux死锁问题和cpu使用率过高问题排查

linux死锁问题和cpu使用率过高问题排查

1、问题共同点 死锁问题和cpu使用率过高都是需要我们找出对应的问题线程。 死锁问题需要我们找出哪两个线程出现了死锁情况。 cpu使用率过高需要我们找出哪个或哪些线程占用了大量的cpu。 2、命令排查 2.1、查看机器上的Java进程 jcmd或 jps2.2、查看对应Java进程的线程级别…
阅读更多...
五子棋理解C++思想

五子棋理解C++思想

双人五子棋项目目录&#xff1a; class Game { public:Game();void init();bool waitPlayerPutChess(Player* player, int& oldi, int& oldj);void draw();void play();bool isOver(int playerId);public:int whoWin -1; // 谁赢了&#xff08;0&#xff1a;白棋&a…
阅读更多...
科创中心“核”动力｜趋动科技：AI算力界的领跑者

科创中心“核”动力｜趋动科技：AI算力界的领跑者

近日&#xff0c;趋动科技与深信服正式推出联合解决方案。联合解决方案将深信服EDS的高性能存储与趋动科技OrionX AI算力资源池化软件、以及GeminiAI训练平台有机结合&#xff0c;整合存力与算力资源的同时&#xff0c;帮助用户建好AI平台、管好AI资源、用好AI服务。 双方已完成…
阅读更多...
Web3链上聚合器声呐已全球上线，开启区块链数据洞察新时代

Web3链上聚合器声呐已全球上线，开启区块链数据洞察新时代

在全球区块链技术高速发展的浪潮中&#xff0c;在创新发展理念的驱动下&#xff0c;区块链领域的工具类应用备受资本青睐。 2024年8月20日&#xff0c;由生纳&#xff08;香港&#xff09;国际集团倾力打造的一款链上应用工具——“声呐链上聚合器”&#xff0c;即“声呐链上数…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023