跨域问题是由于浏览器的一种安全策略而出现的，即同源策略（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以外，还有JSONP、iframe跨域、代理等办法。本文重点介绍CORS这种最为通用的解决办法，相比JSONP只能支持GET请求，CORS可以支持所有类型的HTTP请求。

CORS跨域请求原理

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

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

简单请求

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

GET /cors HTTP/1.1
Origin: http://api.weishuo.com
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

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

Access-Control-Allow-Origin: http://api.weishuo.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8

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

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

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

非简单请求

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

OPTIONS /cors HTTP/1.1
Origin: http://api.weishuo.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...

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

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

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: http://api.weishuo.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain

一旦服务器通过了"预检"请求，以后每次浏览器正常的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 getDeviceData() {
        return deviceDataManager. getDeviceData();
    }
}

（2）控制器上配置

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

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

总结

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

【参考资料】

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

李成笔记网

专注域名、站长SEO知识分享与实战技巧

如何解决前后端分离的跨域问题?_前后端分离ajax跨域

CORS跨域请求原理

SpringBoot设置CORS

总结