前后端分离项目跨域请求解决方案

产生跨域异常的原因

跨域问题一般出现在前后端分离的项目，原因是浏览器有一个叫同源策略的机制，当浏览器检测到我们试图访问不同域的地址时（域名、端口号、协议中有一个不同就算是跨域），会抛出异常。所以跨域问题一般是前端造成的，而后端是不会有跨域问题的。

解决方案

方案一：jsonp

该方案需要前后端都进行编码支持

前端ajax请求

设置dataType为jsonp，默认会生成一个名为callback的属性，其值是随机字符串，也可通过jsonp和jsonpCallback指定。

后端处理

后端处理其实就是作为一个认证，认证这个跨域请求是安全的，允许去访问。

优缺点

优点

能兼容各种浏览器，无兼容问题。

缺点

只支持Get请求，且存在安全问题，不推荐使用

方案二：@CrosOrign

该方案只需要后端处理。需要浏览器支持，且主流的浏览器大都支持。

后端处理

在后端接口添加@CrosOrign(“跨域地址”)注解，支持当前请求的跨域访问。

方案三：addCorsMappings

该方案可以批量处理跨域请求。需要浏览器支持，且主流的浏览器大都支持。

后端配置

在后端实现WebMvcConfigurer接口，重写相应方法，以实现批量处理跨域请求

方案四：配置跨域过滤器

该方案可以对所有请求进行跨域配置。需要浏览器支持，且主流的浏览器大都支持。

后端配置

在后端配置CrosFilter组件，对跨域的来源、请求方式等进行设置。

方案五：Nginx

该方案在前后端都不需要进行处理，只需要在Nginx上进行配置。

Nginx配置

在浏览器上发送本域请求，在nginx上进行监听，可以根据请求的路径进行路由。例：将http://localhost:8081/cros/的请求路由到http://localhost:8080/user/。