彻底搞懂前端跨域解决方案

 

目录

1浏览器的同源策略

1.1同源策略概述

1.2什么是源（origin）？

2跨域会受到哪些限制

2.1限制DOM访问

2.2限制Cookie访问

2.3限制Ajax获取数据

3几个注意点 

4CORS 解决 Ajax 跨域问题

4.1CORS 概述

4.2CORS 解决简单请求跨域

4.3简单请求与复杂请求

4.4CORS 解决复杂请求跨域

4.5借助 cors 库快速完成配置

5JSONP 解决跨域问题

6配置代理解决跨域

6.1自己配置代理服务器

6.2使用 Nginx 搭建代理服务器

6.3借助脚手架搭建服务器 

代码地址 git clone https://gitee.com/childe-jia/cross-domain-test.git

1浏览器的同源策略

1.1同源策略概述


同源策略是浏览器为确保资源安全，而遵循的一种策略，该策略对访问资源进行了一些限制。
W3C 上对同源策略的说明：Same origin policy。

1.2什么是源（origin）？


1源的组成部分

image.png


2下面表格中，只有最后一行的两个源是同源。

源 1

源 2

是否同源

http://www.xyz.com/home

https://www.xyz.com/home

⛔非同源️

http://www.xyz.com/home

http://mail.xyz.com/home

⛔非同源

http://www.xyz.com:8080/home

http://www.xyz.com:8090/home

⛔非同源

http://www.xyz.com:8080/home

http://www.xyz.com:8080/search

✅同 源︎

 

3同源请求

image.png


4非同源请求

image.png


5总结:『所处源』与『目标源』不一致，就是『非同源』，又称『异源』或『跨域』

2跨域会受到哪些限制


例如有两个源：『源A』和『源B』，它们是『非同源』的，那么浏览器会有如下限制：

2.1限制DOM访问

『源A』的脚本不能访问『源B』的 DOM。

<!-- <iframe id="framePage" src="./demo.html"></iframe> -->
<iframe id="framePage" src="https://www.baidu.com"></iframe><script type="text/javascript" >function showDOM(){const framePage = document.getElementById('framePage')console.log(framePage.contentWindow.document) //同源的可以获取，非同源的无法获取}
</script>

2.2限制Cookie访问

『源A』不能访问『源B』的 cookie

<iframe id="baidu" src="http://www.baidu.com" width="500" height="300"></iframe><script type="text/javascript" >// 访问的是当前源的cookie，并不是baidu的cookieconsole.log(document.cookie)
</script>

2.3限制Ajax获取数据

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

const url = 'https://www.toutiao.com/hot-event/hot-board/?origin=toutiao_pc'
let result = await fetch(url)
let data = await result.json();
console.log(data)

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

3几个注意点 

  • 1跨域限制仅存在浏览器端，服务端不存在跨域限制。
  • 2即使跨域了，Ajax 请求也可以正常发出，但响应数据不会交给开发者。
  • 3<link>、<script>、<img>...... 这些标签发出的请求也可能跨域，只不过浏览器对标签跨域不做严格限制，对开发几乎无影响

image.png

4CORS 解决 Ajax 跨域问题

4.1CORS 概述

CORS 全称：Cross-Origin Resource Sharing（跨域资源共享），是用于控制浏览器校验跨域请求的一套规范，服务器依照 CORS 规范，添加特定响应头来控制浏览器校验，大致规则如下：
●服务器明确表示拒绝跨域请求，或没有表示，则浏览器校验不通过。
●服务器明确表示允许跨域请求，则浏览器校验通过。
备注说明：使用 CORS 解决跨域是最正统的方式，且要求服务器是“自己人”。


4.2CORS 解决简单请求跨域

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

image.png

服务端核心代码（以express框架为例）：

// 处理跨域中间件
function corsMiddleWare(req,res,next){// 允许 http://127.0.0.1:5500 这个源发起跨域请求// res.setHeader('Access-Control-Allow-Origin','http://127.0.0.1:5500')// 允许所有源发起跨域请求res.setHeader('Access-Control-Allow-Origin','*')next()
}// 配置路由并使用中间件
app.get('/',corsMiddleWare,(req,res)=>{res.send('hello!')
})

4.3简单请求与复杂请求

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

简单请求

复杂请求

✅请求方法（method）为：GET、HEAD、POST

1不是简单请求，就是复杂请求。
2复杂请求会自动发送预检请求。

✅请求头字段要符合《CORS 安全规范》
简记：只要不手动修改请求头，一般都能符合该规范。

✅请求头的Content-Type的值只能是以下三种：
●text/plain
●multipart/form-data
●application/x-www-form-urlencoded

关于预检请求：

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

请求头

含义

Origin

发起请求的源

Access-Control-Request-Method

实际请求的 HTTP 方法

Access-Control-Request-Headers

实际请求中使用的自定义头（如果有的话）

4.4CORS 解决复杂请求跨域

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

响应头

含义

Access-Control-Allow-Origin

允许的源

Access-Control-Allow-Methods

允许的方法

Access-Control-Allow-Headers

允许的自定义头

Access-Control-Max-Age

预检请求的结果缓存时间（可选）

image.png

2第二步：处理实际的跨域请求（与处理简单请求跨域的方式相同）

image.png

服务端核心代码：

// 处理预检请求
app.options('/students', (req, res) => {// 设置允许的跨域请求源res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:5500')// 设置允许的请求方法res.setHeader('Access-Control-Allow-Methods', 'GET')// 设置允许的请求头res.setHeader('Access-Control-Allow-Headers', 'school')// 设置预检请求的缓存时间（可选）res.setHeader('Access-Control-Max-Age', 7200)// 发送响应res.send()
})// 处理实际请求
app.get('/students', (req, res) => {// 设置允许的跨域请求源res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:5500')// 随便设置一个自定义响应头res.setHeader('abc',123)// 设置允许暴露给客户端的响应头res.setHeader('Access-Control-Expose-Headers', 'abc')// 打印请求日志console.log('有人请求/students了')// 发送响应数据res.send(students)
})

4.5借助 cors 库快速完成配置

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

●安装cors

npm i cors

●简单配置cors

app.use(cors())

●完整配置cors

// cors中间件配置
const corsOptions = {origin: 'http://127.0.0.1:5500', // 允许的源methods: ['GET', 'POST', 'PUT', 'DELETE', 'HEAD', 'OPTIONS'], // 允许的方法allowedHeaders: ['school'], // 允许的自定义头exposedHeaders: ['abc'], // 要暴露的响应头optionsSuccessStatus: 200 // 预检请求成功的状态码
};app.use(cors(corsOptions)); // 使用cors中间件

默认js是不能访问后端设置的响应头的，需要后端暴露

5JSONP 解决跨域问题

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


2基本流程：

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

3图示：

image.png

4代码示例：

<button onclick="getTeachers()">获取数据</button><script type="text/javascript" >function callback(data){console.log(data)}function getTeachers(url){// 创建script元素const script = document.createElement('script')// 指定script的src属性script.src= 'http://127.0.0.1:8081/teachers'// 将script元素添加到body中触发脚本加载document.body.appendChild(script)// script标签加载完毕后移除该标签script.onload = ()=>{script.remove()}}
</script>

5jQuery 封装的 jsonp

?callback=?' 为固定格式 会自动解析

$.getJSON('http://127.0.0.1:8081/teachers?callback=?',(data)=>{console.log(data)
})

6配置代理解决跨域

6.1自己配置代理服务器

服务器之间是没有跨域问题的，要使用express 启动静态资源保证自己的服务器跟页面在同源下

// 启动静态资源 让服务器跟页面同一个源
app.use(express.static("./public"));

借助http-proxy-middleware配置代理

const { createProxyMiddleware } = require('http-proxy-middleware');app.use('/api',createProxyMiddleware({target:'https://www.toutiao.com',changeOrigin:true,pathRewrite:{'^/api':''}

 

优点：

  • 功能丰富：http-proxy-middleware提供了丰富的配置选项，可以满足各种代理需求。
  • 可以灵活配置多个代理：可以配置多个代理服务器，分别对应不同的接口路径。
  • 可以拦截请求：可以通过自定义的处理函数对请求进行拦截和修改。

缺点：

  • 配置相对复杂：需要了解http-proxy-middleware库的配置规则和参数。
  • 不适用于生产环境：http-proxy-middleware主要用于开发环境，不适用于生产环境。

使用场景：

  • 适用于使用任何构建工具的前端项目，可以与任何开发服务器配合使用。
  • 适用于需要灵活配置多个代理服务器的场景。
  • 适用于需要对请求进行拦截和修改的场景。

6.2使用 Nginx 搭建代理服务器

整体思路：让nginx充当两个角色，既是 静态内容服务器，又是代理服务器。

修改nginx配置如下，注意nginx的根目录最好不是 C 盘

# 配置nginx根目录
location / {root   D:\dist;index  index.html index.htm;
}# 配置代理
location /dev/ {# 设置代理目标proxy_pass http://sph-h5-api.atguigu.cn/;
}

2修改前端项目，让所有请求都转发给 /dev，随后重新打包

const request = axios.create({baseURL:'/dev',timeout:10000
})

随后直接访问nginx服务器即可，例如 nginx如果运行在8099端口，则访问

http://localhost:8099

随后会遇到刷新404问题，追加nginx配置来解决

 
# 配置nginx根目录
location / {root   D:\dist;index  index.html index.htm;try_files $uri $uri/ /index.html; # 解决刷新404
}
# 配置代理
location /dev/ {# 设置代理目标proxy_pass http://sph-h5-api.atguigu.cn/;
}

加上这两个“/”就剔除掉了dev

6.3借助脚手架搭建服务器 

1. 使用vue.config.js文件配置代理：

在Vue项目的根目录下创建一个vue.config.js文件，并添加以下代码：

module.exports = {devServer: {proxy: {'/api': {target: 'http://api.example.com',changeOrigin: true,pathRewrite: {'^/api': ''}}}}
}

上述代码中，我们使用devServer配置项来配置代理服务器。其中proxy属性用于配置代理的规则，/api表示需要代理的接口路径。target属性表示代理的目标服务器地址，changeOrigin属性表示是否改变请求的源地址，pathRewrite属性用于重写请求的路径。

优点：

  • 配置简单：使用webpack-dev-server的代理配置，只需要在webpack配置文件中进行简单的配置即可。
  • 功能全面：webpack-dev-server提供了丰富的配置选项，可以满足大部分代理需求。
  • 可以拦截请求：可以通过自定义的处理函数对请求进行拦截和修改。

缺点：

  • 需要重启服务器：配置修改后需要重新启动webpack-dev-server才能生效。
  • 不适用于生产环境：webpack-dev-server主要用于开发环境，不适用于生产环境。

使用场景：

  • 适用于使用webpack构建的前端项目，通过webpack-dev-server来启动开发服务器的场景。
  • 适用于需要简单的代理配置，并且不需要频繁修改代理配置的场景。

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

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

相关文章

生成式人工智能（AIGC）：开发者的得力助手还是职业威胁？

生成式人工智能（AIGC）：开发者的得力助手还是职业威胁？

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 引言 在当今软件开发领域&#xff0c;生成式人工智能&#xff08;AIGC&#xff09;技术正在以前所未有的方式改变着开发者的工作…
阅读更多...
Comparable 和 Comparator 接口的区别

Comparable 和 Comparator 接口的区别

Comparable 和 Comparator 接口的区别 1、Comparable 接口1.1 compareTo() 方法 2、Comparator 接口2.1 compare() 方法 3、 Comparable 和 Comparator 的区别总结 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 在Java中&#xff0c;Compa…
阅读更多...
keepalived安装使用

keepalived安装使用

keeepalived介绍 Keepalived的作用是检测服务器的状态&#xff0c; 如果有一台web服务器宕机&#xff0c;或工作出现故障&#xff0c;Keepalived将检测到&#xff0c;并将有故障的服务器从系统中剔除&#xff0c;同时使用其他服务器代替该服务器的工作&#xff0c;当服务器工作…
阅读更多...
pico+unity3d搭建环境

pico+unity3d搭建环境

分别注册pico开发者平台和unity的账号密码 下载pico的sdk和unity开发软件 创建unity3d核心项目 在项目中找到窗口&#xff0c;包管理器&#xff0c;添加磁盘的包&#xff0c;选中sdk 安装后就可以使用pico的操作和演示&#xff1b; 剩下的看文档
阅读更多...
C语言——基础框架、变量、运算符

C语言——基础框架、变量、运算符

基础框架&#xff1a; #include<stdio.h> //编译预处理指令int main() //程序的入口主函数main { //程序&#xff08;函数、功能&#xff09;结束标志return 0; //程序退出前返回给调用者&#xff08;操作系统&#xff09;的值…
阅读更多...
不同型号的GD32 MCU如何区分？

不同型号的GD32 MCU如何区分？

大家是否碰到过以下应用场景&#xff1a;同一套软件代码希望跑在不同型号的GD32 MCU中&#xff0c;但有些地方需要根据MCU型号进行调整&#xff1f;或者上位机或其他MCU与GD32 MCU通信时需要知道对应的MCU型号是哪个&#xff1f; 此时&#xff0c;我们就需要了解如何获取以及区…
阅读更多...
JANDEL探针四探头RM3-AR英国健德尔四探针手测

JANDEL探针四探头RM3-AR英国健德尔四探针手测

JANDEL探针四探头RM3-AR英国健德尔四探针手测
阅读更多...
LabVIEW远程实验数据采集系统

LabVIEW远程实验数据采集系统

随着科学研究的不断发展&#xff0c;实验室对远程数据采集和监控的需求越来越高。传统的数据采集方式往往需要实验人员亲临现场&#xff0c;费时费力&#xff0c;且数据实时性较差。为了解决这些问题&#xff0c;基于LabVIEW开发了一套远程实验数据采集系统&#xff0c;实现对实…
阅读更多...
ArcGIS识别不GDB文件地理数据库显示为空？

ArcGIS识别不GDB文件地理数据库显示为空？

​ 点击下方全系列课程学习 点击学习—>ArcGIS全系列实战视频教程——9个单一课程组合系列直播回放 点击学习——>遥感影像综合处理4大遥感软件ArcGISENVIErdaseCognition 我们经常会碰到拷贝的GDB文件ArcGIS无法识别&#xff0c;软件只是把他当做普通的文件夹去看待&am…
阅读更多...
【目录】全博文、专栏大纲

【目录】全博文、专栏大纲

首先要和大家说一下&#xff0c;博主的文章并不是想到哪里写到哪里&#xff0c;而是以整个大后端为主题&#xff0c;成体系的在写专栏&#xff0c;从和后端紧相关的计算机核心课程开始、到JAVA SE、JAVA EE、到数据库、MQ等各类中间件、再到业务场景、性能优化。当然也会涉及一…
阅读更多...
Java小白入门到实战应用教程-开发环境搭建-JDK安装详细教程

Java小白入门到实战应用教程-开发环境搭建-JDK安装详细教程

Java小白入门到实战应用教程-JDK安装详细教程 writer:eleven 开发环境搭建 上节内容补充 在带领大家搭建开发环境前&#xff0c;先来了解一些java领域的名词。 Java根据应用领域区别可分为三个版本&#xff1a; JavaSE&#xff1a;是Java的标准版&#xff0c;提供了Java的…
阅读更多...
【Windows】XMedia Recode（免费的专业视频格式转换软件）及同类型软件介绍

【Windows】XMedia Recode（免费的专业视频格式转换软件）及同类型软件介绍

今天给大家介绍的这款软件叫XMedia Recode&#xff0c;这是一款免费的专业视频格式转换软件。有需要的朋友可以了解一下哦。 软件介绍 XMedia Recode 是一款功能强大的免费视频转换和音频转换软件&#xff0c;它支持多种格式的视频和音频文件转换&#xff0c;以及简单的编辑…
阅读更多...
GlobalSign证书介绍以及申请流程

GlobalSign证书介绍以及申请流程

在当今高度互联的世界中&#xff0c;网络安全与数据保护的重要性日益凸显&#xff0c;而数字证书作为保障网络通信安全的关键技术&#xff0c;已成为构建数字信任的基石。GlobalSign&#xff0c;作为全球数字证书行业的先驱和领导者&#xff0c;自成立以来便致力于为全球企业和…
阅读更多...
【卡尔曼滤波器】DR_CAN ：1_递归算法_做估计 学习笔记

【卡尔曼滤波器】DR_CAN ：1_递归算法_做估计 学习笔记

DR_CAN ： 1_递归算法_Recursive Processing 学习笔记 DR_CAN 大神卡尔曼滤波算法（转自BiliBili DR_CAN 全网最好的卡尔曼滤波器视频教程，笔记截图）B站视频地址卡尔曼滤波原理1_递归算法_Recursive Processing 取平均 做估计 前k-1次的平均值
阅读更多...
无线速度传感器

无线速度传感器

对高中物理实验中的速度测量方法进行改进&#xff0c;利用安装在小车上的无线光电门来测量小车运动过程中的速度&#xff0c;即满足了精度的要求&#xff0c;又可以研究物体的运动过程。无线光电门和数据接收器间采用蓝牙无线传输的方式&#xff0c;电脑端的软件使用Flash来制作…
阅读更多...
LT8644EX 国产芯片 低功耗 数字交叉点开关 用于光纤网络交换 数字视频 数据存储网络

LT8644EX 国产芯片 低功耗 数字交叉点开关 用于光纤网络交换 数字视频 数据存储网络

2.一般说明 LT8644EX是一个16x16数字交叉点交换机:具有16个差分CML兼容输入端和16个差动CML输出端。该LT8644EX是优化非归零(NRZ)与高达每端口6 Gbps的数据速率信令。每个端口提供可编程水平的输入均衡和可编程输出摆幅。tell 18171547226,该LT8644EX支持通过串行控制接口的独立…
阅读更多...
信息安全等级保护测评

信息安全等级保护测评

等保测评&#xff0c;即信息安全等级保护测评&#xff0c;是指对信息系统按照国家标准要求进行安全评估和等级划分的过程。以下是关于等保测评的详细解析&#xff1a; 一、等保测评的定义与目的 等保测评旨在评估信息系统的安全性&#xff0c;并根据评估结果给予相应的安全等级…
阅读更多...
前端返回pdf时不显示内容，如何解决？

前端返回pdf时不显示内容，如何解决？

&#x1f3c6;本文收录于《CSDN问答解答》专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收藏&…
阅读更多...
Idea合并Git分支信息

Idea合并Git分支信息

#git 的笔记 ##本篇文章是通过Idea 实现git 命令操作的代码的上传与合并。 1.合并分支 点击 Git 选择Merge 这里选择合并远程的分支
阅读更多...
简介Docker以及K8s

简介Docker以及K8s

什么是Docker Docker 属于 Linux 容器的一种封装&#xff0c;提供简单易用的容器使用接口以及操作系统级别的虚拟化。 更为直白的叙述就是&#xff0c;Docker可以将程序和环境&#xff08;依赖库配置操作系统&#xff09;打包并运行的工具软件。 基础镜像 总所周知&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023