什么是跨域,如何解决跨域?

简介: 还在等什么,快来一起讨论关注吧,公众号【八点半技术站】,欢迎加入社群

 什么是跨域,如何解决跨域?

 

跨域指的是浏览器不能执行其他网站的脚本。他是由于浏览器的同源策略造成的。是浏览器对javascript施加的安全机制。

一句话就明白  是不是好舒服~~~~~~

但是跨域中有也有一些常见的几个问题,接下来给大家简单讲解说说~~~

首先讲之前 我在补充一点知识,有利用理解。

如下:header相关的几个概念

CORS: 跨域资源共享(CORS) 是一种机制,它使用额外的 HTTP头来告诉浏览器  让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时,资源会发起一个跨域 HTTP 请求。

出于安全原因,浏览器限制从脚本内发起的跨源HTTP请求。 例如,XMLHttpRequest和Fetch API遵循同源策略。 这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源,除非响应报文包含了正确CORS响应头。

origin: web的origin 被定义为由协议,域和端口组成的 URL访问。仅当协议,域和端口全部匹配,两对象才具有相同的origin。

一般我们会排查cors场景:

第一种:未配置 Access-Control-Allow-Origin

image.gif编辑

解决方法: 在域为foo1.example.com 的虚拟主机添加 Access-Control-Allow-Origin 值为http://foo2.example.com

image.gif编辑

第二种:跨域访问

image.gif编辑

解决方法:请注意观察上述报错, Access-Control-Allow-Origin 已经至少有一个值为http://foo2.example.com 的设定。所以现在配置一个允许多源访问的配置。

image.gif编辑

第三种:Access-Control-Allow-Headers 中首部缺失

image.gif编辑

解决方法: 遇到这一类的问题时,需要仔细阅读报错,在报错里面基本已经写明了答案。例如上面的这个报错信息。域foo2.example.com 请求域foo1.example.com 时,因首部cookies 未包含在 Access-Control-Allow-Headers 中,所以foo1无法响应客户端请求。并且这一类问题可能同时会出现几个首部缺失的请求,但是报错是单个出现,所以呢,要仔细阅读错误。下面也是其中一个报错

image.gif编辑

image.gif编辑

欢迎各位交流

群主每日会精选一至二篇技术文章发布在微信群,提供给各位交流探讨与学习。考虑到群内讨论内容会导致消息被顶,因此我每天会将分享的内容放在GitHub, 方便后进来的成员以及在线成员查找历史记录,而不需要翻聊天记录。

链接:微信技术分享记录

https://github.com/gtcarry888/WeChat-Sharing-record

image.gif

原则:群内禁止鄙视、讽刺等任何初学者,否则直接踢群,禁止任何业余广告推广。

群主的Wechat:xzzs730(标注来意)

相关文章
|
NoSQL 安全 MongoDB
Mongo DB之用户与权限管理、备份与恢复管理以及客户端工具的使用
MongoDB是一款灵活且高性能的文档型数据库,具有可扩展性和强大的查询功能,适用于各种应用场景。
1063 1
|
Web App开发 JSON 前端开发
前端跨域解决方案-汇总
前端跨域解决方案-汇总
213 0
|
12月前
|
人工智能 自然语言处理 开发者
LLM最全怪癖首曝光!马里兰OpenAI等30+学者祭出75页提示报告
【6月更文挑战第28天】《The Prompt Report》——马里兰大学等机构的学者发布了一份75页的系统综述,详尽探讨了GenAI的提示技术。报告建立了33个术语的词汇表,分类了58种文本和40种其他模态的提示技术,为AI交互提供了清晰框架。尽管受到赞誉,但也面临技术性及关键问题解决不足的批评。报告提醒,需关注提示可能带来的不准确性和偏见问题。[[1](https://arxiv.org/abs/2406.06608)]**
141 5
|
存储 SQL 关系型数据库
MySQL中的当前读和快照读及其区别
MySQL中的当前读和快照读及其区别
829 0
|
自然语言处理 Java 开发工具
实战:ELK环境部署并采集springboot项目日志
实战:ELK环境部署并采集springboot项目日志
|
芯片
STM32速成笔记(五)—串口通信
本文介绍了串口通信的概念,用途以及一些相关概念。介绍了如何进行printf重定向,如何根据接收到的特定信息,执行特定操作。此外,本文以通过上位机发送特殊指令控制LED亮灭的小项目,给出了详细的配置方法和程序设计。
323 0
STM32速成笔记(五)—串口通信
|
移动开发 JavaScript 前端开发
前端常见跨域解决方案(全)
前端常见跨域解决方案(全)
930 0
|
JavaScript
thymeleaf页面取值与js取值
thymeleaf页面取值与js取值
230 0
|
机器学习/深度学习 分布式计算 自然语言处理
「技术选型」Keras、TensorFlow和PyTorch的区别
「技术选型」Keras、TensorFlow和PyTorch的区别
|
JavaScript 前端开发
rollup 实战第三节 打包生产
前面讲过了,rollup如何打包开发环境。现在肯定是打包成生产环境了。本次需要实现的功能是把库打包成生产环境。由于本次代码是基于前两次的基础上的,如果有问题的还请移步前两节。 (实战 rollup 第一节入门) (rollup 实战第二节 搭建开发环境)
rollup 实战第三节 打包生产