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

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

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

 

跨域指的是浏览器不能执行其他网站的脚本。他是由于浏览器的同源策略造成的。是浏览器对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(标注来意)

相关文章
|
6月前
“跨域”问题理解
“跨域”问题理解
54 0
|
应用服务中间件 Nacos nginx
跨域配置
跨域配置
480 0
跨域配置
|
15天前
|
Web App开发 JavaScript 开发者
跨域处理
跨域处理
13 0
|
1月前
|
安全 前端开发 JavaScript
什么是跨域?为什么会产生跨域?怎么解决跨域?
什么是跨域?为什么会产生跨域?怎么解决跨域?
240 0
|
6月前
|
运维 前端开发 JavaScript
关于跨域,和跨域问题的完整解决方案
关于跨域,和跨域问题的完整解决方案
56 0
|
6月前
|
安全
什么是跨域,为什么会跨域?
什么是跨域,为什么会跨域?
426 1
|
6月前
|
Web App开发 前端开发 JavaScript
你能讲一下跨域吗
你能讲一下跨域吗
|
6月前
|
JSON 前端开发 安全
你了解跨域吗
你了解跨域吗
60 0
|
移动开发 JSON 数据格式
解决跨域的方法
解决跨域的方法
64 0
|
JavaScript 前端开发 中间件
解决跨域的九种方法
跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实施的安全限制。
553 0
解决跨域的九种方法