跨域以及解决方案_浏览器跨域问题怎么解决,怎么设置-CSDN博客

本文链接：https://blog.csdn.net/m0_61662775/article/details/140901734

禹神：一小时彻底搞懂跨域&解决方案_哔哩哔哩_bilibili该直播回放对跨域的多种解决方案进行了梳理，内容包括：分析同源策略、分析预检请求、跨域的多种解决方案（CORS、JSONP、代理）、同时也从后端人员角度梳理了各种必备的响应头，无论你是前端还是后端，都能让你彻底搞懂跨域。, 视频播放量 22132、弹幕量 73、点赞数 991、投硬币枚数 531、收藏人数 2399、转发人数 112, 视频作者尚硅谷, 作者简介就业规划、简历模板、毕业设计，加小谷姐姐Q：3276742687，相关视频：禹神：一小时快速上手Electron，前端Electron开发教程，一小时速通JavaScript模块化，涵盖CommonJS与ES6模块化，禹神：前端项目部署指南，前端项目打包上线，尤雨溪谈为什么要出国，你还在手写CSS效果？，天才乔布斯，一语道破计算机的本质，尚硅谷禹神分享CSS技术专题（直播回放），当我看到有人使用github桌面，尚硅谷《计算机组成原理》计算机408考研、考试不挂+考研拿下！计组，逃避可耻但有用！前端已退坑~https://www.bilibili.com/video/BV1pT421k7yz/?spm_id_from=333.1007.top_right_bar_window_history.content.click

同源策略概述

（1）浏览器的同源策略：

浏览器为确保资源安全，而遵循的一种策略。

1.1 什么是源？

（不看路径）

1.2 同源与非同源

1.3 同源请求与非同源请求

[所处源』与『目标源』不一致，就是『非同源」又称「异源』或『跨域』

（2）浏览器会对跨域做出哪些限制?

例如: [源A] 和 [源B] ，它们是 [非同源] 的，则浏览器会有如下限制：

①DOM 访问限制:

[源A] 的脚本不能读取和操作 [源B] 的DOM

这么写就触发跨越了，拿不到iframe的document

② Cookie 访问限制:

[源A] 不能访问 [源B] 的cookie。

③Ajax 响应数据限制:

[源A] 可以给 [源B] 发请求，但是无法获取 [源B] 响应的数据。

浏览器对 Ajax 获取数据的限制是影响最大的一个，且实际开发中经常遇到。

注意：

1.跨域限制仅存在浏览器端，服务端不存在跨域限制。

2.即使跨域了，Ajax 请求也可以正常发出，但响应数据不会交给开发者

3.<link>、<script>、<img>…… 这些标签发出的请求也可能跨域，只不过浏览器对标签跨域不做严格限制（CSP），对开发几乎无影响。

CORS 解决 Ajax 跨域问题

（1）CORS 概述

CORS 全称:Cross-Origin Resource Sharing(跨城资源共享)，是用于控制 浏览器校验 跨域请求的一套规范，服务器依照 CORS 规范，添加特定 响应头 来控制浏览器校验，大致规则如下:

服务器明确表示 拒绝跨域 请求，或没有表示，则浏览器校验不通过。
服务器明确表示 允许跨域 请求，则浏览器校验通过。

使用 CORS 解决跨域是最正统的方式，且要求服务器是“自己人“

（2）CORS 解决跨域

① 简单请求与复杂请求：

CORS 会把请求分为两类，分别是: ① 简单请求、②复杂请求

关于预检请求 perflight:

发送时机：预检请求在实际跨域请求之前发出，是由浏览器自动发起的。
主要作用：用于向服务器确认是否允许接下来的跨域请求。
基本流程：先发起 OPTIONS 请求，如果通过预检，继续发起实际的跨域请求。
请求头内容：一个OPTIONS 预检请求，通常会包含如下请求头：

② 简单请求解决方法：

整体思路: 服务器在给出响应时，通过添加 Access-Control-Allow-Origin 响应头，来明确表达允许某个源发起跨域请求，随后浏览器在校验时，直接通过。

因此需要 express 配置 Access-Control-Allow-Origin ：

③ 复杂请求解决方法：

①服务器先通过浏览器的预检请求，服务器需要返回如下响应头：

②处理实际的跨域请求(与处理简单请求跨域的方式相同)

④ 借助 cors 库快速完成配置：

上述的配置中需要自己配置响应头，或者需要自己手动封装中间件，借助cors 库，可以更方便完成配置

JSONP 解决跨域问题

（1）概述

1.1 JSONP 概述:

JSONP 是利用了<script>标签可以跨域加载脚本，且不受严格限制的特性，可以说是程序员智慧的结晶，早期一些浏览器不支持 CORS 时，可以靠 JSONP 解决跨域（但是只能解决get请求）。

1.2 基本流程:

客户端创建一个<script>标签，并将其 src 属性设置为包含跨域请求的 URL，同时准备一个回调函数，这个回调函数用于处理返回的数据。
服务端接收到请求后，将数据封装在回调函数中并返回。
客户端的回调函数被调用，数据以参数的形势传入回调函数

（2）配置代理解决跨域：

（3）jQuery封装的JSONP：

配置代理解决跨域

（1）自己配置代理服务区

借助 http-proxy-middleware 配置代理

允许跨域并去掉api（通过代理服务器发送，因为服务器与服务器之间没有跨域限制）

⭕项目打包

禹神：前端项目部署指南，前端项目打包上线_哔哩哔哩_bilibili教程中主要给大家讲解前端项目的打包部署，讲解到了：本地Node.js部署、本地nginx部署、云服务器nginx部署、常见nginx配置、及打包相关概念，旨在让前端程序员迅速掌握前端项目部署。, 视频播放量 37086、弹幕量 149、点赞数 1154、投硬币枚数 629、收藏人数 3269、转发人数 199, 视频作者尚硅谷, 作者简介就业规划、简历模板、毕业设计，加小谷姐姐Q：3276742687，相关视频：尚硅谷Vue项目实战硅谷甄选，vue3项目+TypeScript前端项目一套通关，尚硅谷2024新版本Spark教程，一套搞定大数据Spark3.x！，尚硅谷大数据技术之Flink实时数仓4.0教程，数据仓库项目实战，尚硅谷微信小程序开发教程，2024最新版微信小程序项目实战！，web项目部署教程天花板，绝对是B站讲的最好的，这一套学会搞定全部核心知识都在这里，【尚硅谷】Jenkins教程（从配置到实战），尚硅谷嵌入式STM32单片机教程，最新STM32入门&进阶实战，尚硅谷Vue项目(vue实战谷粒外卖)，【尚硅谷】前端项目-尚优选（HTML/CSS/JS技术综合实战），【尚硅谷】7天搞定Java基础，Java零基础极速入门https://www.bilibili.com/video/BV19n4y1d7Gr/?spm_id_from=333.1007.top_right_bar_window_history.content.click

我们开发用的脚手架其实就是一个微型服务器，用于:支撑开发环境、运行代理服务器等
打包完的文件中不存在:(.vue、.jsx、 .less 等文件，而是: HMTL、CSS、JS 等；
打包后的文件，不再借助脚手架运行，而是需要部署到服务器上运行
打包前，请务必梳理好前端项目的 Ajax 封装(请求前缀、代理规则等)

控制台输入：npm run build

生成的文件夹如下：

需要搞清楚项目的请求是怎么发出去的（联系哪台服务器，代理是怎么配置的），因此需要去组件中分析请求是如何送出去的。

dispatch 集中式状态管理
并且进行命名空间的划分以及模块化的拆分

只看到一部分路径，因此需要 Ctrl + 继续点击 request 进去查看

协议还不是完整的（即协议名+主机名+端口号+路由）

localhost 即可能是脚手架配置了代理，由游览器发出去了请求到脚手架的代理，代理转发请求到有数据的服务器

即发给8080的请求转发给target，并且去掉了dev

因此真正的数据服务器请求如下：

http://sph-h5-api.atguigu.cn/api/product/getBaseCategoryList

本地服务器部署步骤

通过express：

npm i

nodemon server.js

会遇到如下问题：

①刷新页面404问题（前端重定向加入了 '/home' 游览器误以为后端路由）

1.哈希路由

Hash 模式 (mode: 'hash'——URL 的 hash 部分（即 # 之后的部分）来管理路由): 优点：与服务器无关，页面刷新不会导致服务器错误，适用于没有服务器配置的应用。
History 模式 (mode: 'history'——使用 HTML5 的 History API 来管理路由。它能提供更干净的 URL，不带 #): 需要服务器配置支持，确保所有的 URL 都能返回你的应用的入口 HTML 文件

2.无法匹配后端路由时返回index.html

（游览器地址栏发出的请求都是 get 请求。当匹配不上时就跳转index.html。当引入的JS能正常工作，前端路由就可以奏效了，就可以跳转login）