java前後端分離後臺解決跨域問題
阿新 • • 發佈：2019-02-14
一般解決跨域問題的方案有兩種，jsonp以及cors。因為jsonp需要前後臺做配合統一標示個人感覺比較麻煩，所以本人選擇使用cors方案來解決此問題。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="Access-Control-Allow-Origin" content="*" /> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="jquery-2.1.1.min.js"></script> </head> <body> <div id="app"> {{ message }} </div> <div id="ajax1"> {{ data.code }} </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }); new Vue({ el:'#ajax1', data:{data:""}, beforeCreate:function(){ var url="http://192.168.0.190:8089/test/testJson"; var _self=this; $.get(url,function(data){ _self.data=eval("(" + data +")"); console.log(_self.data.code); }) } }); </script> </body> </html>
後臺用的springmvc,方法是在controller之前設定一下
一, 使用filter
/** * filter解決跨域問題 */ @Component public class CrossFilter implements Filter{ @Override public void init(FilterConfig filterConfig) throws ServletException { } @Override public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException { System.out.println("this is cross filter"); HttpServletResponse response = (HttpServletResponse) res; //如果要做細的限制，僅限某域名下的可以進行跨域訪問到此，可以將*改為對應的域名。 response.setHeader("Access-Control-Allow-Origin", "*"); response.setHeader("Access-Control-Allow-Methods", "*"); response.setHeader("Access-Control-Max-Age", "1728000"); response.setHeader("Access-Control-Allow-Credentials", "true"); response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); // response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); chain.doFilter(req, res); } @Override public void destroy() { } }
<filter> <filter-name>crossFilter</filter-name> <filter-class>com.hxl.site.modules.test.filter.CrossFilter</filter-class> </filter> <filter-mapping> <filter-name>crossFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>
二 使用切面
程式碼裡的註釋開啟
/**
* 後臺解決跨域問題
*/
//@Configuration
//@Aspect
public class ControllerAOP {
// @Around("execution (* com.hxl.site.modules..*.controller..*.*(..))")
public Object testAop(ProceedingJoinPoint pro) throws Throwable {
System.out.println("=====================");
//獲取response
HttpServletResponse response = ((ServletRequestAttributes) RequestContextHolder.getRequestAttributes()).getResponse();
//核心設定
response.setHeader("Access-Control-Allow-Origin", "*");
//執行呼叫的方法
Object proceed = pro.proceed();
return proceed;
}
}