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

 

目录

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，一经查实，立即删除！

相关文章

Android系统实现多网共存且能独立上外网

Android系统实现多网共存且能独立上外网

有些场景下需要多网共存，使用网络聚合进行提升网速。而在Android系统源码上默认是不支持多网同时共存且能独立上外网的。所以需要进行定制修改 修改如下： 1.修改main 表优先级到9999， 作用：eth1 wlan0 访问内网 2.不去teardown 低分数网线 3.修改wifi为70分，以太网为6…
阅读更多...
探索淘宝详情数据获取的 API 新路径：突破与变革

探索淘宝详情数据获取的 API 新路径：突破与变革

在当今数字化商业的浪潮中&#xff0c;淘宝作为全球知名的电子商务平台&#xff0c;其蕴含的海量数据对于企业和开发者来说具有极高的价值。而获取淘宝详情数据的 API 则成为了开启这一宝藏的关键钥匙。 淘宝详情数据获取的 API 之旅&#xff0c;是一段充满挑战与机遇的征程。过…
阅读更多...
Java架构师2024高频面试问题

Java架构师2024高频面试问题

文章目录 基础篇高可用指标4个9Arrays.asList()数组转集合Bug1. 返回的列表是固定大小的2. 共享底层数组3. 列表转换为数组时的类型问题解决方案遍历集合时remove操作Bug使用增强for循环（foreach）时的限制使用迭代器正确地删除元素对于LinkedList的特殊情形HashCode冲突为什么…
阅读更多...
生成式人工智能（AIGC）：开发者的得力助手还是职业威胁？

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

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

谈一谈Flinksql的Join和Lookupjoin的区别

JOIN JOIN 是最常见的 SQL 连接操作&#xff0c;用于将两张表根据指定的条件进行连接。它有以下几种类型&#xff1a; INNER JOIN: 仅返回两个表中满足连接条件的记录。LEFT JOIN (LEFT OUTER JOIN): 返回左表中的所有记录以及右表中满足连接条件的记录&#xff0c;如果右表中…
阅读更多...
【python】IPython的使用技巧

【python】IPython的使用技巧

IPython使用技巧 一、魔法命令 %timeit 用途&#xff1a;用于测量一段代码的执行时间&#xff0c;这对于评估代码的性能非常有帮助&#xff0c;尤其适用于需要进行性能优化和比较不同实现方式效率的场景。示例&#xff1a;%timeit [x**2 for x in range(1000)]扩展&#xf…
阅读更多...
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…
阅读更多...
Python面试题：如何在 Python 中避免循环依赖？

Python面试题：如何在 Python 中避免循环依赖？

循环依赖&#xff08;circular dependency&#xff09;是指两个或多个模块相互依赖&#xff0c;导致无法正确加载模块&#xff0c;从而引发错误。为了避免循环依赖&#xff0c;通常可以采取以下几种方法&#xff1a; 1. 使用延迟导入&#xff08;Lazy Import&#xff09; 将导…
阅读更多...
SpringCloud从配置中心读取git配置成功却没有效果

SpringCloud从配置中心读取git配置成功却没有效果

SpringCloud从配置中心读取git配置成功却没有效果 客户端bootstrap.yml&#xff1a; spring:cloud:config:name: user-providerprofile: devlabel: masteruri: http://localhost:8000application:name: user-providerprofiles:active: devmanagement:endpoints:web:exposure:…
阅读更多...
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;我们就需要了解如何获取以及区…
阅读更多...
Windows系统上使用npm来安装和配置Yarn，在VSCode中使用

Windows系统上使用npm来安装和配置Yarn，在VSCode中使用

一、安装Yarn 1. 安装Node.js和npm 如果还没有安装Node.js和npm&#xff0c;可以从Node.js官方网站下载并安装最新版本的Node.js&#xff0c;npm会随Node.js一起安装。 2. 使用npm安装Yarn 打开命令提示符或PowerShell&#xff0c;运行以下命令来全局安装Yarn&#xff1a; …
阅读更多...
JANDEL探针四探头RM3-AR英国健德尔四探针手测

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

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

LabVIEW远程实验数据采集系统

随着科学研究的不断发展&#xff0c;实验室对远程数据采集和监控的需求越来越高。传统的数据采集方式往往需要实验人员亲临现场&#xff0c;费时费力&#xff0c;且数据实时性较差。为了解决这些问题&#xff0c;基于LabVIEW开发了一套远程实验数据采集系统&#xff0c;实现对实…
阅读更多...
汽车电子助力转向系统研究

汽车电子助力转向系统研究

汽车电子助力转向系统研究 摘要 电子助力转向系统&#xff08;Electric Power Steering&#xff0c;EPS&#xff09;是一种利用电动机辅助驾驶员进行车辆转向的系统。相比于传统的液压助力转向系统&#xff0c;EPS具有更高的效率、精确性和可控性。本文将详细探讨EPS的工作原理…
阅读更多...
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的…
阅读更多...
最新文章

Copyright @ 2022~2023