跨域问题是由于浏览器的一种安全策略而出现的，即同源策略（Same origin policy）。同源策略由 Netscape 提出，是浏览器最核心也是最基本的安全功能。所谓“同源”指的是：

协议、域名、端口号都相同，只要有一个不相同，那么都是非同源。

同源：协议、域名、端口号一致

出于安全的考虑，默认禁止跨域访问。如果跨域访问，这时候通常就会报错：

has been blocked by CORS policy: No 'Access-Control-Allow-Origin'

CORS全称是"跨域资源共享"（Cross-origin resource sharing），这是一个W3C标准。利用CORS可以允许浏览器向跨源服务器发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

什么是CORS

解决跨域问题除了上述CORS以外，还有JSONP、iframe跨域、代理等办法。本文重点介绍CORS这种最为通用的解决办法，相比JSONP只能支持GET请求，CORS可以支持所有类型的HTTP请求。

CORS跨域请求原理

CORS通信需要浏览器和服务器同时支持。整个CORS通信过程，都是浏览器自动完成，对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息。实现CORS通信的关键是服务器，需要服务器实现CORS接口，方可跨源通信。

浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。

简单请求

对于简单请求，浏览器发出CORS请求，在头信息中增加一个Origin字段。

Origin字段用来说明，本次请求来自哪个源（协议 域名 端口）。服务器根据这个值，决定是否同意这次请求。如果Origin指定的域名在许可范围内，服务器返回的响应，会多出几个头信息字段。

其中 Access-Control-Allow-Origin 是必须的。如果我们要放行所有跨域请求，那么可以在 Servlet 返回响应时，添加如下代码：

resp.setHeader("Access-Control-Allow-Origin", "*");

其中*表示支持所有网站访问，也可以为 Access-Control-Allow-Origin 配置专门域名。

非简单请求

CORS非简单请求过程

非简单请求的CORS请求过程如上图所示，在正式通信之前，会增加一次HTTP查询请求，称为预检请求。

预检请求用的请求方法是 OPTIONS，表示这个请求是用来询问的。头信息里面，关键字段是 Origin，表示请求来自哪个源。

服务器收到"预检"请求以后，检查了Origin、Access-Control-Request-Method 和 Access-Control-Request-Headers 字段以后，确认允许跨源请求，就可以做出预检响应。

一旦服务器通过了"预检"请求，以后每次浏览器正常的CORS请求，就都跟简单请求一样，会有一个 Origin 头信息字段。服务器的回应，也都会有一个 Access-Control-Allow-Origin 头信息字段。

SpringBoot设置CORS

目前前后端开发项目，后端主要是使用SpringBoot框架，因此最后再说下SpringBoot如何设置CORS支持跨域。

SpringBoot 支持通过设置 CORS（跨源资源共享）来解决跨域请求问题，核心是使用 @CrossOrigin 注解，有两个地方可以配置该注解，我们选择一种方式即可。

（1）在请求方法上配置

我们可以直接在相应的请求方法上添加 @CrossOrigin 注解，那么该方法则支持跨域。

@RestController public class WebAPIController { @Autowired DeviceDataManager deviceDataManager; @GetMapping("/getDeviceData") @CrossOrigin public List<DeviceData> getDeviceData() { return deviceDataManager. getDeviceData(); } }

（2）控制器上配置

我们也可以在控制器上添加 @CrossOrigin 注解，那么该控制器下的所有方法都支持跨域。

@RestController @CrossOrigin public class WebAPIController { @Autowired DeviceDataManager deviceDataManager; @GetMapping("/getDeviceData") public List<DeviceData> getDeviceData() { return deviceDataManager. getDeviceData(); } }

总结

本文主要介绍了使用CORS来实现跨域。在实际开发过程中，我也经常利用nginx反向代理来解决前后端请求的跨域问题，nginx代理将请求分发到相应项目部署的tomcat服务器上，让前后端项目处于同一个域上，这样也就避免了跨域问题。关于nginx的配置，在后面的文章再做介绍。

【参考资料】

跨域资源共享 CORS 详解。阮一峰。

今天的内容先分享到这里了，读完本文《关于headercontenttype的一些信息》之后，是否是您想找的答案呢？想要了解更多，敬请关注www.qixingcap.cn,您的关注是给小编最大的鼓励。

推荐文章：