更新時間:2021-08-31 09:43:30 來源:動力節點 瀏覽2488次
場景:目前有項目A(基于servlet的WEB項目),和項目B(基于spring boot的WEB項目),使用同一CAS提供單點登錄,現在需要兩個項目互相調用接口數據,所以涉及到ajax的跨域請求
調研:經過調研發現目前的ajax跨域解決方案有兩種,jsonp和cors,其中jsonp需要在返回值中攜帶回調函數,cors則需要在響應頭中附加指定參數。比對實現方式和優劣點,決定使用cors來實現
CORS原理:服務器在收到請求之后,在響應參數中加入,Access-Control-Allow-Origin,Access-Control-Allow-Methods,Access-Control-Max-Age,Access-Control-Allow-Headers,Access-Control-Allow-Credentials等參數,瀏覽器在接收到返回值后會通過這些參數的設置來判斷服務器是否支持跨域請求。所以,使用cors的方法就是通過設置過濾器,在指定請求的響應頭中添加參數即可,傳統的WEB項目,需要在web.xml中設置,而spring boot項目可以通過注解來設置
服務器端新建過濾器類
package com.tas.util;
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;
/**
* 跨域支持
*/
public class SimpleCORSFilter implements Filter {
@Override
public void destroy() {
// TODO Auto-generated method stub
}
@Override
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
throws IOException, ServletException {
HttpServletResponse httpServletResponse = (HttpServletResponse) response;
httpServletResponse.setHeader("Access-Control-Allow-Origin", "http://localhost");
httpServletResponse.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
httpServletResponse.setHeader("Access-Control-Max-Age", "3600");
httpServletResponse.setHeader("Access-Control-Allow-Headers", "x-requested-with");
// 是否支持cookie跨域
httpServletResponse.addHeader("Access-Control-Allow-Credentials", "true");
chain.doFilter(request, response);
}
@Override
public void init(FilterConfig arg0) throws ServletException {
// TODO Auto-generated method stub
}
}
在web.xml中配置過濾器,注意過濾器要配置在sevrlet和cas的過濾器之前
<filter>
<filter-name>Simple CORSFilter</filter-name>
<filter-class>com.tas.util.SimpleCORSFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>Simple CORSFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
這樣的配置就完成了,需要注意的是,在需要跨域訪問該項目的網頁中,如果需要傳遞cookie,則要在ajax中打開withCredentials,如下
$.ajax({
url:"http://localhost:8080/tasociety/IndexController.crossdomainTest.do",
type: "get",
dataType:"json",
xhrFields: {
withCredentials: true
},
crossDomain: true,
success:function (data) {
alert("12345");
console.log(data);
}
})
因為有默認的注解@CrossOrigin,所以直接配置在controller上就好了
package com.castmember.Controller;
@CrossOrigin(origins = "http://localhost:8080",allowCredentials = "true")
@Controller
public class IndexController {
@Autowired
SysUserDao sysuserdao;
@RequestMapping("/")
public String index(Model model) {
Optional<SysUser> useropt= sysuserdao.findById((long)1);
model.addAttribute("user", useropt.orElse(null));
return "index";
}
}
在需要跨域訪問該項目的網頁中,如果需要傳遞cookie,則要在ajax中打開withCredentials,如下
$.ajax({
url:"http://localhost/castmember/crossdomaindata",
type: "get",
dataType:"json",
xhrFields: {
withCredentials: true
},
crossDomain: true,
success:function (data) {
alert("12345");
console.log(data);
}
})
以上就是動力節點小編介紹的"AJAX跨域請求(CORS實現)",希望對大家有幫助,想了解更多可查看AJAX教程。動力節點在線學習教程,針對沒有任何Java基礎的讀者學習,讓你從入門到精通,主要介紹了一些Java基礎的核心知識,讓同學們更好更方便的學習和了解Java編程,感興趣的同學可以關注一下。
0基礎 0學費 15天面授
有基礎 直達就業
業余時間 高薪轉行
工作1~3年,加薪神器
工作3~5年,晉升架構
提交申請后,顧問老師會電話與您溝通安排學習