本文目录一览：

• 1、CORS原理及实现
• 2、SpringBoot进阶之处理跨域问题(CORS)
• 3、如何解决前端跨域问题？
• 4、【http】什么是cors跨域
• 5、前端解决跨域都有哪些方法？
• 6、怎么解决跨域的.以及后续jsonp的原理和实现以及cors怎么设置

CORS原理及实现

跨域资源共享( CORS )是一种机制，是W3C标准。它允许浏览器向跨源服务器，发出 XMLHttpRequest 或 Fetch 请求。并且整个 CORS 通信过程都是浏览器自动完成的，不需要用户参与。

而使用这种 跨域资源共享 的前提是，浏览器必须支持这个功能，并且服务器端也必须同意这种 "跨域" 请求。因此实现 CORS 的关键是服务器需要服务器。通常是有以下几个配置：

具体可看：

过程分析：

另外在 CORS 中有 简单请求 和 非简单请求 ，简单请求是不会触发 CORS 的预检请求的，而非简单请求会。

“需预检的请求” 要求必须首先使用 OPTIONS 方法发起一个预检请求到服务器，以获知服务器是否允许该实际请求。"预检请求“的使用，可以避免跨域请求对服务器的用户数据产生未预期的影响。

简单请求不会触发 CORS 的预检请求，若请求满足所有下述条件，则该请求可视为“简单请求”：

简单回答 ：

详细回答 ：

除了上面这些请求外，都是非简单请求。

若是跨域的非简单请求的话，浏览器会首先向服务器发送一个预检请求，以获知服务器是否允许该实际请求。

整个过程大概是：

这里有两点要注意：

一：

Access-Control-Request-Method 没有 s

Access-Control-Allow-Methods 有 s

二：

关于 Access-Control-Max-Age ，浏览器自身也有维护一个最大有效时间，如果该首部字段的值超过了最大有效时间，将不会生效，而是以最大有效时间为主。

还是在原本 JSONP 的那个案例上。

我在根目录下新建了一个文件夹 cors ，并往里面添加了一个 index.html 文件：

/cors/index.html

为了后面也方便调试，用 node 简单写了一个前端的本地服务和后端的本地服务。

在根目录下新建 client.js 文件，并写入：

./client.js :

在根目录下新建 index.html 文件，并写入：

./index.html :

(以上：实现了一个简单的前端路由效果)

在根目录下新建 server.js 文件，并写入：

./server.js :

并给 package.json 中配置两个启动指令：

package.json :

OK?，来分别启动一下 npm run client 和 npm run server

并打开页面的 127.0.0.1:8000/cors （或者打开 127.0.0.1:8000 然后点击 CORS 这个 a 标签）

点击 获取name 按钮，可以看到能够正常获取到本地服务器的数据了。

接着让我们来改造一下 ./cors/index.html 中的按钮点击请求，让它变成一个非简单请求：

./cors/index.html :

此时，打开页面点击按钮会发现发送了两次 corsname 的请求：

（一）预检请求：

（二）实际请求：

对于跨域 XMLHttpRequest 或 Fetch 请求，浏览器 不会 发送身份凭证信息。如果要发送凭证信息，需要设置 XMLHttpRequest 的某个特殊标志位。

例如我们想要在跨域请求中带上 cookie ，需要满足3个条件：

所以为了模拟这个效果，让我们来写一个小小的登录+获取数据的功能吧。

首先对于web端，我新增了一个登录按钮，并且配置了一下 axios ：

./cors/index.html :

接着为了更方便的模拟后台请求，我需要在项目中安装两个中间件：

接着修改一下 server.js 的后台配置：

./server.js :

现在让我们重启一下服务，然后打开页面看看效果：

（一）点击登录：

（二）点击获取name：

（三）查看cookie：

方案一：发出简单请求(这不是废话吗...)

方案二：服务端设置 Access-Control-Max-Age 字段，在有效时间内浏览器无需再为同一个请求发送预检请求。但是它有局限性：只能为同一个请求缓存，无法针对整个域或者模糊匹配 URL 做缓存。

SpringBoot进阶之处理跨域问题(CORS)

大家好，一直以来我都本着 用最通俗的话理解核心的知识点， 我认为所有的难点都离不开 「基础知识」 的铺垫

「大佬可以绕过 ~」

如果你是一路看过来的，很高兴你能够耐心看完。之前带大家学了 Springboot 基础部分，对基本的使用有了初步的认识, 接下来的几期内容将会带大家进阶使用，会先讲解基础 中间件 的使用和一些场景的应用，或许这些技术你听说过，没看过也没关系，我会带大家一步一步的入门，耐心看完你一定会有 收获 ~

上期带大家学习了 Springboot 中如何集成 MyBatis分页插件PageHelper 以及它的一个基本使用, 本期将带大家学习 SpringBoot 中如何处理跨域问题的，同样的，我们集成到 Springboot 中。最近github可能会被墙，所以我把源码放到了国内gitee上,本节我们依然使用上期的代码

同样的，为了照顾小白同学，依然先说一下啥是跨域。说到跨域问题，如果你是 前端 同学，肯定不会陌生, 你有可能调接口调着调着，发现请求发布出去，控制台会报 CORS 错误, 这时候你会找后台老大哥给你处理一下。然而现在前端工程中，一般都会有 proxy代理 ，这样也能解决问题，这只是本地调试，但上线还会有问题, 除非你发布的时候你们是同一个 域 下。

好，说了这么多，大概明白跨域是如何产生了，就是说前端调用的后端接口不属于同一个 域（域名或端口不同） ，就会产生跨域问题，也就是说你的应用访问了该应用域名或端口之外的域名或端口,这里给大家总结一下，产生跨域的三个条件:

解决思路大致可以分为以下几方面:

从源头浏览器解决,解除跨域机制，用户自己设置浏览器，这不大现实，好, pass

发送 JSONP 请求替代XHR请求，并不能适用所有的请求方式， 不推荐

之前我们提到前端本地工程开启 Proxy ,那么服务端可不可进行代理呢？答案是可以的，怎么做？可以通过 nginx 进行代理,给大家简单演示一下:

nginx 是当今比较火的 web 服务器，常用于服务代理, 等教大家部署的时候会讲一下

这也是本节要讲的内容，我们先不直接的给大家展示代码，先说一下它的原理。

一般我们下载的浏览器比如 Chrome ，它都是自行默认开启 跨域限制 的，那我们如何判断我们发出去的请求是一个 跨域请求 呢，打开浏览器开发者工具，在请求的请求头中就可以发现，如果不是一个跨域请求，它只有 Host ,如果是一个 跨域请求 它会多一个 Origin ，告诉浏览器我俩请求的地方不一样

跨源资源共享(CORS) 是一种基于 HTTP头 的机制，该机制通过允许服务器标示除了它自己以外的其它 origin（域，协议和端口 ），这样浏览器就可以访问加载这些资源。跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求，该机制通过浏览器发起一个到服务器托管的跨源资源的 预检(OPTION) 请求。在预检中，浏览器发送的头中标示有HTTP方法和真实请求中会用到的头，那么具体是怎么设置 头 的呢?

服务端通过设置如上，就可以进行跨域访问了。好，有了基本的理论之后，我们一起看一下在 Springboot 中如何解决的：

是不是很简单~ 它的实现机制主要是通过请求 拦截器 实现的,你慢慢会发现，随着学习的深入，你会遇到各种 拦截器 技术

本期到这里就结束了，总结一下，本节主要带大家认识了什么是 跨域 ，以及解决思路，最后教大家 Sprinboot 中是如何配置跨域访问的，源码已更新，大家可以自行试一下

如何解决前端跨域问题？

可以使用服务器代理或者在后端设置允许跨域。

现在的项目一般是在后端设置允许跨域，前端在带有允许跨域的情况下，可以像没有跨域一样正常访问。

如果前端单独发布到服务器，也可以在服务器是设置代理，使用代理转发请求。

【http】什么是cors跨域

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

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

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

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

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

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

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

那么，什么是cors呢？

我们来看看互动百科的解释：

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

维基百科的解释(手动谷歌)：

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.

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

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

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

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

使用下列方法之一：

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

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

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

Request Headers:

Response Header:

cors在koa中的使用：

相关链接：

前端解决跨域都有哪些方法？

什么是跨域？

浏览器发送的请求地址（URL）与所在页面的地址 不同（端口/协议/域名 其一不同）。简言之，浏览器发出的请求url，与其所在页面的url不一样。此时，同源策略会让浏览器拒收 服务器响应回来的数据，报错信息如下：

最常用的四种跨域解决方案

1.cors

cors跨域资源共享允许是在服务端"Access-Control-Allow-Origin"字段设置的，当将cors设置为允许某个地址访问时，该地址就可以跨域访问这个服务器地址。当cors设置为"*"时即允许所有地址访问时，则表示所有地址都可以跨域访问这个服务器地址的资源。

2、 通过jsonp跨域

Jsonp是Json的一种“使用模式”，他就可以解决浏览器遇到的跨域问题，我们可以动态创建script，再请求一个带参网址实现跨域通信。用Jsonp请求得到的是JavaScript，相当于直接用JavaScript解析。

3、postMessage跨域

在h5中新增了postMessage方法，postMessage可以实现跨文档消息传输，我们可以通过Windows的message事件来监听发送跨文档消息传输内容。

4、proxy（代理）

原理：因为同源策略只是针对浏览器的安全策略，但是服务端并不受同源策略的限制，也就不存在跨域的问题。

怎么解决跨域的.以及后续jsonp的原理和实现以及cors怎么设置

XMLHttpRequest跨域对于IE而言可以直接完成，但是对于其他浏览器而言报错，无法跨域，有人说要设置浏览器；

因此，需要服务器给出回调函数callback，用于客户端调用；

这就是所谓的jsonp调用；

如果是自己的服务器和客户端，但是用协议访问，也是跨域，当然可以设置自己的服务器代码，添加cros等设置即可，网页搜索一大把。

如果是其他的服务器，那就要他们给出回调函数，如果没有，就不能完美的调用，除非用后台代码。