跨域请求问题

前后端分离项目解决跨域请求问题需要在配置类中加入代码

    /**
     * 跨域请求
     * @param registry
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        //添加映射路径
        registry.addMapping("/**")
//                //放行哪些原始域
//                .allowedOriginPatterns("*")
                //是否发送Cookie信息
                .allowCredentials(true)
                //放行哪些原始域(请求方式)
                .allowedMethods("GET", "POST", "PUT", "DELETE","OPTIONS")
                //放行哪些原始域(头部信息)
                .allowedHeaders("*")
                //暴露哪些头部信息（因为跨域访问默认不能获取全部头部信息）
                .exposedHeaders("Header1", "Header2");
    }

解决跨域问题的详细步骤如下：

确认是否存在跨域问题：在浏览器控制台查看请求返回值，若报错提示跨域错误，就需要解决跨域问题。

对于不复杂的场景可以使用JSONP。JSONP的实现步骤如下：

（1）客户端定义一个回调函数(callback)，并把自己的名称传递到服务器
（2）服务端接收参数并生成特定的Json格式数据，并将函数名作为回调函数传递给前端。
（3）返回给客户端的结果是JSON对象不是JSON字符串，因为JSONP的原理是利用Js脚本跨域加载，所以只支持GET请求。

** 使用CORS（Cross-Origin Resource Sharing，跨源资源共享）**

CORS是当前比较常用的方案之一。其实现步骤主要分为两个方面：后端和前端

后端：

（1）在服务端添加Access-Control-Allow-Origin响应头，例如添加允许所有源的访问：

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

也可以指定某一个域名进行跨域访问：

response.setHeader("Access-Control-Allow-Origin", "http://www.baidu.com");

（2）在服务端处理OPTIONS请求， OPTIONS是预请求（Preflight
Request）,用于获取Web服务器允许跨源请求所需要的信息（例如响应头、Cookie等），服务端可以设置如下相关参数

：

response.setHeader("Access-Control-Allow-Origin", "*");  // 设置允许的跨域来源
response.setHeader("Access-Control-Allow-Methods", "POST,GET"); // 这里涉及到PUT、DELETE、OPTIONS等请求方式另行进行处理 
response.setHeader("Access-Control-Allow-Headers", "Content-Type,Authorization"); // 设置允许请求的头部字段
response.setHeader("Access-Control-Max-Age", "3600");//表示预检请求的结果有效期为3600秒，过期后需要重新发起预检请求。

前端：

（1）在ajax请求中加上请求头部分

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

（2）前端基于XMLHttpRequest对象，向服务端发起请求。

使用代理服务器

使用代理服务器是目前比较常见的局部解决方案。主要原理依然是由服务端来发送http请求，客户端只负责往自己的服务器发送数据。

使用WebSocket

WebSocket 是 HTML5 开始提供的一种在单个 TCP
连接上进行全双工通信的协议。浏览器与服务器之间就可以创建持久性连接，使得信息的实时交换成为可能。

注意：选择不同的解决方案会对代码结构有所要求，如果采用JSONP、CORS或者代理服务器处理跨域，需要把数据请求和处理分离开。如果采用WebSocket解决方案，则WebSocket服务统一处理所有的数据请求并返回数据，前端只负责定义对应的回调函数进行后续处理。