本文目录一览：1、如何用CORS来解决JS中跨域的问题2、使用CORS解决跨域问题3、SpringBoot进阶之处理跨域问题(CORS)4、【http】什么是cors跨
本文目录一览：
1、如何用CORS来解决JS中跨域的问题
2、使用CORS解决跨域问题
3、SpringBoot进阶之处理跨域问题(CORS)
4、【http】什么是cors跨域
如何用CORS来解决JS中跨域的问题
1、CORS的原理：CORS定义一种跨域访问的机制，可以让AJAX实现跨域访问。CORS 允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。实现此功能非常简单，只需由服务器发送一个响应标头即可。
2、tomcat如何配置cors的跨域请求：
在tomcat中，有一个和cors相关的拦截器：CORS Filter
该过滤器可以通过添加必需的访问控制请求头Access-Control-*对象来进行跨域。同时还可以对一些请求进行拦截。如果请求是无效的，或者是不被允许的，该请求被拒绝或者禁止。
其在web.xml文件中的基本配置如下：
filter
filter-nameCorsFilter/filter-name
filter-classorg.apache.catalina.filters.CorsFilter/filter-class
init-param
param-namecors.allowed.origins/param-name
param-value
,
/param-value
/init-param
init-param
param-namecors.allowed.methods/param-name
param-value
GET,POST,HEAD,OPTIONS,PUT
/param-value
/init-param
init-param
param-namecors.allowed.headers/param-name
param-value
Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,Access-Control-Allow-Origin
/param-value
/init-param
init-param
param-namecors.exposed.headers/param-name
param-value
Access-Control-Allow-Origin,Access-Control-Allow-Credentials
/param-value
/init-param
init-param
param-namecors.support.credentials/param-name
param-valuetrue/param-value
/init-param
init-param
param-namecors.preflight.maxage/param-name
param-value10/param-value
/init-param
/filter
filter-mapping
filter-nameCorsFilter/filter-name
url-pattern/wxrefund/*/url-pattern
/filter-mapping
3、cors.allowed.origins：允许访问资源的源列表。*表示任何来源都可以访问该资源。否则，只有配置的白名单的来源可以访问该资源，其中白名单用逗号隔开，如。
4、cors.allowed.methods：允许访问的http请求方法，如GET,POST,HEAD,OPTIONS,PUT等，方法名用逗号隔开。
5、cors.allowed.headers：在实际请求时可使用的请求头列表，用逗号隔开。如Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,Access-Control-Allow-Origin。这些头也将返回作为访问控制的一部分。
使用CORS解决跨域问题
跨域是指跨域名的访问，以下情况都属于跨域：
如果 域名和端口都相同，但是请求路径不同 ，不属于跨域，如：
跨域不一定会有跨域问题。
因为跨域问题是浏览器对于ajax请求的一种安全限制： 一个页面发起的ajax请求，只能是于当前页同域名的路径 ，这能有效的阻止跨站攻击。
因此： 跨域问题 是针对ajax的一种限制 。
但是这却给我们的开发带来了不变，而且在实际生成环境中，肯定会有很多台服务器之间交互，地址和端口都可能不同，怎么办？
目前比较常用的跨域解决方案有3种：
我们这里会采用cors的跨域方案。
CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。
它允许浏览器向跨源服务器，发出 XMLHttpRequest 请求，从而克服了AJAX只能 同源 使用的限制。
CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。
浏览器会将ajax请求分为两类，其处理方案略有差异：简单请求、特殊请求。
只要同时满足以下两大条件，就属于简单请求。：
（1) 请求方法是以下三种方法之一：
（2）HTTP的头信息不超出以下几种字段：
当浏览器发现发现的ajax请求是简单请求时，会在请求头中携带一个字段： Origin .
Origin中会指出当前请求属于哪个域（协议+域名+端口）。服务会根据这个值决定是否允许其跨域。
如果服务器允许跨域，需要在返回的响应头中携带下面信息：
注意：
如果跨域请求要想操作COOKIE，需要满足3个条件：
不符合简单请求的条件，会被浏览器判定为特殊请求,，例如请求方式为PUT。
特殊请求会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。
浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的 XMLHttpRequest 请求，否则就报错。
一个“预检”请求的样板：
与简单请求相比，除了Origin以外，多了两个头：
服务的收到预检请求，如果许可跨域，会发出响应：
除了 Access-Control-Allow-Origin 和 Access-Control-Allow-Credentials 以外，这里又额外多出3个头：
如果浏览器得到上述响应，则认定为可以跨域，后续就跟简单请求的处理是一样的了。
虽然原理比较复杂，但是前面说过：
事实上，SpringMVC已经帮我们写好了CORS的跨域过滤器：CorsFilter ,内部已经实现了刚才所讲的判定逻辑，我们直接用就好了。
在 Application 下编写一个配置类，并且注册CorsFilter：
结构：
放到Application下即可。
4.5.4.重启测试：
访问正常：
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中的使用：
相关链接：
京公网安备 11010802041100号