前后端分离之跨域问题

Posted 2021-02-13 friendlysong

最近在做的一个项目，原本是通过SpringMVC结合freemarker模板引擎和JSP实现html页面和后端的数据交互，现在为了业务需要，要将前后端拆分出来。使用Restful API的形式进行交互。然后刚上路就遇到坑了，在这里记录一下如何填坑，以防不时之需。这里介绍的方法是SpringMVC架构通过CROS协议解决跨域问题。

错误信息

Response to preflight request doesn‘t pass access control check: No ‘Access-Control-Allow-Origin‘ header is present on the requested resource. Origin ‘null‘ is therefore not allowed access. The response had HTTP status code 403.

跨域

Web应用中前端javascript访问后端的REST服务默认是不能跨域的，这里的域英文中叫Origin，有时也叫Domain，包含了协议(HTTP/HTTPS)，域名和端口号。不能跨域指的是，如果来自http://abc.com:80的JavaScript代码只能访问http://abc.com:80中的资源(HTTP默认端口号为80，注意端口号不同也是不同的域)。现代浏览器默认都会基于安全原因而阻止跨域的ajax请求，这是现代浏览器中必备的功能，但是往往给开发带来不便。

Same Origin Policy（SOP）是浏览器默认的安全模型，为什么需要SOP呢？ 因为如果允许JavaScript代码访问非相同域资源的话，那么安全性将变得完全不可控。举个例子，如果另外一个网址中包含的恶意脚本就可以没有任何防备的加载进来，那就就能随意获取或者恶意修改页面元素Cookie信息等。SOP则保证了所有你访问的资源和服务是来自于你自己的服务器，外部的脚本就不能没有任何障碍得攻击你了。当然这只是基本的安全模型，通过XSS等技术，如果你的代码有漏洞的话，还是可能受到来自不同域的恶意代码的攻击。

但跨域的需求却一直都在，为了跨域，勤劳勇敢的程序猿们想出了许许多多的方法，例如，jsonP、代理文件等等。但这些做法增加了许多不必要的维护成本，而且应用场景也有许多限制，例如jsonP并非XHR，所以jsonP只能使用GET传递参数。

Web应用跨域访问解决方案汇总

CORS协议

如今的JS大有一统天下的趋势，浏览器已经成了大多应用最好的安身之所。哪怕在移动端也有各种Hybird方案，在本地文件系统的Web页面，也有需要获取外部数据的需求，而这些需求也必然是跨域的。在寻找跨域解决方案时，发现了最优雅解决方案就是HTML5带来了的“Cross-Origin Resource Sharing”的新特性，来赋予开发者权力决定资源是否允许被跨域访问。

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

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

跨域资源共享CORS详解

CROS常见header

CORS具有以下常见的header

Access-Control-Allow-Origin: http://abc.com Access-Control-Max-Age: 3600 Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE, PUT Access-Control-Allow-Headers: x-requested-with

"Access-Control-Allow-Origin"表明它允许 "http://abc.com" 发起跨域请求,如果允许所有域名则填写“*” "Access-Control-Max-Age"表明在3600秒内，不需要再发送预检验请求，可以缓存该结果（上面的资料上我们知道CROS协议中，`一个AJAX请求被分成了第一步的OPTION预检测请求和正式请求`） "Access-Control-Allow-Methods"表明它允许POST, GET, OPTIONS, DELETE, PUT的外域请求 "Access-Control-Allow-Headers"表明它允许跨域请求包含x-requested-with头

解决方案

在项目中新建一个类，代码如下：

package com.test.crossorigin; import java.io.IOException; import javax.servlet.Filter; import javax.servlet.FilterChain; import javax.servlet.FilterConfig; import javax.servlet.ServletException; import javax.servlet.ServletRequest; import javax.servlet.ServletResponse; import javax.servlet.http.HttpServletResponse; import org.springframework.stereotype.Component; @Component public class SimpleCORSFilter implements Filter { public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException { HttpServletResponse response = (HttpServletResponse) res; response.setHeader("Access-Control-Allow-Origin", "*"); response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT"); response.setHeader("Access-Control-Max-Age", "3600"); response.setHeader("Access-Control-Allow-Headers", "x-requested-with,Authorization"); chain.doFilter(req, res); } public void init(FilterConfig filterConfig) {} public void destroy() {} }

再配置web.xml,使得过滤器生效

<filter> <filter-name>cors</filter-name> <filter-class>"CLASS_PATH".SimpleCORSFilter</filter-class> </filter> <filter-mapping> <filter-name>cors</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>

 

接下来前端就可以像往常一样使用AJAX请求获得资源了，完全不需要做出什么改变。

 

• 本文链接： http://lion1ou.win/2017/01/17/