各位老铁们，大家好，今天由我来为大家分享谷歌浏览器处理跨域，以及谷歌浏览器跨域cookie的相关问题知识，希望对大家有所帮助。如果可以帮助到大家，还望关注收藏下本站，您的支持是我们最大的动力，谢谢大家了哈，下面我们开始吧！

本文目录

1. 【http】什么是cors跨域
2. Ajax为什么能解决跨域
3. 浏览器跨域及其解决方案
4. chrome谷歌浏览器的跨域设置

一、【http】什么是cors跨域

1、前端开发中，常常需要进行跨域请求。既然提到跨域，首先我们的知道什么是“同源策略”。

2、同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。

3、如果协议，端口（如果指定了一个）和域名对于两个页面是相同的，则两个页面具有相同的源。

4、同一个源内，资源的访问是很自由的。就跟在自己家中，想开冰箱开冰箱，想干啥干啥。如果你想访问不同源的资源，可就没那么自由了，这就是跨域。

5、关于跨域，常用的JSONP应该都知道。JSONP的原理是什么呢？我们来看看大神贺师俊的解释：

6、很简单，就是利用<script>标签没有跨域限制的“漏洞”（历史遗迹啊）来达到与第三方通讯的目的。当需要通讯时，本站脚本创建一个<script>元素，地址指向第三方的API网址，并提供一个回调函数来接收数据（函数名可约定，或通过地址参数传递）。第三方产生的响应为json数据的包装（故称之为jsonp，即json padding），这样浏览器会调用callback函数，并传递解析后json对象作为参数。本站脚本可在callback函数里处理所传入的数据。

7、可以知道JSONP就是个bug般的存在啊，如果你是一个有洁癖的程序员回想说：这不合理，这部干净。因此我们引出cors。

8、 CORS（跨来源资源共享）是一份浏览器技术的规范，提供了Web服务从不同网域传来沙盒脚本的方法，以避开浏览器的同源策略，是JSONP模式的现代版。

9、 Cross-origin resource sharing(CORS) is a mechanism that allows restricted resources(e.g. fonts) on a web page to be requested from another domain outside the domain from which the first resource was served.

10、这样看来，其实嘛，cors就是一个规范，机制，基于这个规范，不同源之间才可以请求资源。相当于一个江湖规矩，大家都按规矩来嘛不是？不讲规矩？信不信小拳拳捶你。

11、所以呢，要想使用cors跨域访问，你就得讲规矩。下面我们来看看有哪些规矩。

12、跨域资源共享标准（ cross-origin sharing standard）允许在下列场景中使用跨域 HTTP请求：

13、 cors中有个术语叫“简单请求”，若请求满足所有下述条件，则该请求可视为“简单请求”：

14、之所以区分简单请求，是因为cors需要处理一些“非简单请求”，这种特殊处理叫做“预检请求”。大人物来了，总要提前准备准备吧，封路啥的blabla。

15、预检请求的作用是提前获知服务器是否允许该实际请求。“预检请求”的使用，可以避免跨域请求对服务器的用户数据产生未预期的影响。

16、一张图可以清晰看到提前发送预检请求的cors请求

二、Ajax为什么能解决跨域

不仅仅是ajax，ajax只是异步通信方式，你用同步的方式也可以实现跨域。

浏览器对于javascript的同源策略的限制,例如a.cn下面的js不能调用b.cn中的js,对象或数据(因为a.cn和b.cn是不同域),所以跨域就出现了.

上面提到的,同域的概念又是什么呢???简单的解释就是相同域名,端口相同,协议相同

jsonp全称是JSON with Padding,是为了解决跨域请求资源而产生的解决方案,是一种依靠开发人员创造出的一种非官方跨域数据交互协议。

一个是描述信息的格式，一个是信息传递双方约定的方法。

1.AJAX直接请求普通文件存在跨域无权限访问的问题,不管是静态页面也好.

2.不过我们在调用js文件的时候又不受跨域影响,比如引入jquery框架的,或者是调用相片的时候

3.凡是拥有src这个属性的标签都可以跨域例如<script><img><iframe>

4.如果想通过纯web端跨域访问数据只有一种可能,那就是把远程服务器上的数据装进js格式的文件里.

5.而json又是一个轻量级的数据格式,还被js原生支持

6.为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP，该协议的一个要点就是允许用户传递一个callback参数给服务端，

举个例子:我在下请求一个远程的js文件

这样就实现跨域成功了,因为服务端返回数据时会将这个callback参数(message)作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

让远程js知道它应该调用的本地函数叫什么名字,只要服务端提供的js脚本是动态生成的就好了,这样前台只需要传一个callback参数过去告诉服务端,我需要XXX代码,于是服务端就会得到相应了.

例如在页面请求

上面说明了只要有src属性的都可以实现跨域请求，这个你应该清楚，当你引用某种js框架的时候不就是跨域了嘛，比如你引用谷歌juqery.js。

那么如何用jquery来实现我们的跨域呢???jquery已经把跨域封装到ajax上了,而且封装得非常的好,使用起来也特别方便

jsonp形式的ajax请求:并且通过get请求的方式传入参数,注意:跨域请求是只能是get请求不能使用post请求

jsonp传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback)

jsonpCallback自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名

基本上就是这些了，还有iframe标签img标签，都可以，一个是描述信息的格式，一个是信息传递双方约定的方法。这个就算是跨域吧，跨域也就是只是一种格式。

三、浏览器跨域及其解决方案

1、什么是跨域跨域的表现解决跨域问题-浏览器设置(不推荐)-前端的非正统解决方式- CORS(跨域资源共享)-配置nginx反向代理

2、跨域出于浏览器的同源策略限制，同源是指协议、域名、端口都一样，同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。

3、调用页面时接口数据不返回，控制台中会有红色的报错信息中有类似于 CORS policy关键字。另外，在最新谷歌浏览器中，会有提出类似于loaded over HTTPS此种关键字，均可以考虑为跨域导致。

4、 [图片上传失败...(image-26deed-1651135597111)]

5、 tips:有的时候后台小伙伴使用postman测试好的接口，前端不可以使用，原因就是postman不是浏览器，不会有同源限制，同理移动设备app开发和小程序开发也不会有这个问题。这个不是前端bug，同源限制也不是一个不好的规则。

6、虽然跨域不是一个不好的事情，但是对于前后端分离的web开发来说确实需要解决的，大致的解决方案可分为：

7、直接从根源解决问题，让浏览器安全策略不起作用。这个方法虽然可以解决问题但是不现实。

8、官方正统解决方案， CORS规范允许服务器向浏览器返回一些HTTP Headers，浏览器可以基于这些HTTP Headers来决定是否突破SOP的限制。需要后端配合，浏览器需要什么，接口服务给什么。

9、 nginx是一个高性能的HTTP和反向代理web服务器，nginx用来解决跨域问题的原理与前端非正统解决方式的 proxy的思路是一致的。项目请求接口由nginx服务发出，获取到的数据再经由nginx传递给前端项目，这样前端的请求其实都是由nginx处理的，就没有跨域发生了。

四、chrome谷歌浏览器的跨域设置

做前后分离的webapp开发的时候，出于一些原因往往需要将浏览器设置成支持跨域的模式，好在chrome浏览器就是支持可跨域的设置，网上也有很多chrome跨域设置教程。但是新版本的chrome浏览器提高了跨域设置的门槛，原来的方法不再适用了。下面笔者简单介绍一下新版本chrome的跨域设置方法。

先介绍一下老方法，参考了一些网上的教程，其实直接在打开命令上加--disable-web-security就可以了。

1.下载并安装好chorme浏览器后在桌面找到浏览器快捷图标并点击鼠标右键的属性一栏。

2.在属性页面中的目标输入框里加上--disable-web-security如下图所示：

3.点击应用和确定后关闭属性页面，并打开chrome浏览器。如果浏览器出现提示你使用的是不受支持的命令标记--disable-web-security，那么说明配置成功。

chrome的版本升到49之后，跨域设置比以前严格了，在打开命令上加--disable-web-security之后还需要给出新的用户个人信息的目录。众所周知chrome是需要用gmail地址登录的浏览器，登录后就会生成一个存储个人信息的目录，保存用户的收藏、历史记录等个人信息。49版本之后，如果设置chrome浏览器为支持跨域模式，需要指定出一个个人信息目录，而不能使用默认的目录，估计是chrome浏览器怕用户勿使用跨域模式泄露自己的个人信息（主要是cookie，很多网站的登录token信息都是保存在cookie里）。

1.在电脑上新建一个目录，例如：C:\MyChromeDevUserData

2.在属性页面中的目标输入框里加上--disable-web-security--user-data-dir=C:\MyChromeDevUserData，--user-data-dir的值就是刚才新建的目录。

3.点击应用和确定后关闭属性页面，并打开chrome浏览器。

再次打开chrome，发现有--disable-web-security相关的提示，说明chrome又能正常跨域工作了。

跨域成功后，首页换成了google的welcome页面，同时原来收藏的链接和历史记录都不见了，而C:\MyChromeDevUserData目录下则生成了新的个人信息相关的文件。

OK，本文到此结束，希望对大家有所帮助。