網上各種跨域教程，各種實踐，各種問答，除了簡單的jsonp 以外，很多說CORS 的都是行不通的，老是缺那麼一兩個關鍵的配置。本文只想解決問題，所有的代碼經過親自實踐。
本文解決跨域中的get、post、data、cookie 等這些問題。
本文只會說get 請求和post 請求，讀者請把post 請求理解成除get 請求外的所有其他請求方式。
JSONP
JSONP是利用瀏覽器對script的資源引用沒有同源限制，通過動態插入一個script標籤，當資源加載到頁面後會立即執行的原理實現跨域的。 JSONP是一種非正式傳輸協議，該協議的一個要點就是允許用戶傳遞一個callback或者開始就定義一個回調方法，參數給服務端，然後服務端返回數據時會將這個callback參數作為函數名來包裹住JSON數據，這樣客戶端就可以隨意定制自己的函數來自動處理返回數據了。
JSONP只支持GET請求而不支持POST等其它類型的HTTP請求,它只支持跨域HTTP請求這種情況，不能解決不同域的兩個頁面之間如何進行JavaScript調用的問題，JSONP的優勢在於支持老式瀏覽器，弊端也比較明顯：需要客戶端和服務端定制進行開發，服務端返回的數據不能是標準的Json數據，而是callback包裹的數據。
jsonp 的原理很簡單，利用了【前端請求靜態資源的時候不存在跨域問題】這個思路。
但是只支持get，只支持get，只支持get。
注意一點，既然這個方法叫jsonp，後端數據一定要使用json 數據，不能隨便的搞個字符串什麼的，不然你會覺得結果莫名其妙的。
前端jQuery 寫法
$.ajax({type: "get",url: baseUrl + "/jsonp/get",dataType: "jsonp",success: function(response) {$("#response").val(JSON.stringify(response));}});dataType: “jsonp”。除了這個，其他配置和普通的請求是一樣的。
後端SpringMVC 配置
如果你也使用SpringMVC，那麼配置一個jsonp 的Advice 就可以了，這樣我們寫的每一個Controller 方法就完全不需要考慮客戶端到底是不是jsonp 請求了，Spring 會自動做相應的處理。
@ControllerAdvicepublic class JsonpAdvice extends AbstractJsonpResponseBodyAdvice { public JsonpAdvice(){ // 這樣如果請求中帶callback 參數，Spring 就知道這個是jsonp 的請求了super("callback"); }}以上寫法要求SpringMVC 版本不低於3.2，低於3.2 的我只能說，你們該升級了。
後端非SpringMVC 配置
以前剛工作的時候，Struts2 還紅遍天，幾年的光景，SpringMVC 就基本統治下來了國內市場。
偷懶一下，這裡貼個偽代碼吧，在我們的方法返回前端之前調一下wrap 方法：
@ControllerAdvicepublic class JsonpAdvice extends AbstractJsonpResponseBodyAdvice { public JsonpAdvice(){ // 這樣如果請求中帶callback 參數，Spring 就知道這個是jsonp 的請求了super("callback"); }}CORS
Cross-Origin Resource Sharing
CORS是現代瀏覽器支持跨域資源請求的一種方式，全稱是"跨域資源共享"（Cross-originresourcesharing），當使用XMLHttpRequest發送請求時，瀏覽器發現該請求不符合同源策略，會給該請求加一個請求頭：Origin，後台進行一系列處理，如果確定接受請求則在返回結果中加入一個響應頭：Access-Control-Allow-Origin;瀏覽器判斷該相應頭中是否包含Origin的值，如果有則瀏覽器會處理響應，我們就可以拿到響應數據，如果不包含瀏覽器直接駁回，這時我們無法拿到響應數據。
CORS與JSONP的使用目的相同，但是比JSONP更強大，CORS支持所有的瀏覽器請求類型，承載的請求數據量更大，開放更簡潔，服務端只需要將處理後的數據直接返回，不需要再特殊處理。
畢竟jsonp 只支持get 請求，肯定不能滿足我們的所有的請求需要，所以才需要搬出CORS。
國內的web 開發者還是比較苦逼的，用戶死不升級瀏覽器，老闆還死要開發者做兼容。
CORS 支持以下瀏覽器，目前來看，瀏覽器的問題已經越來越不重要了，連淘寶都不支持IE7 了~~~
Chrome 3+
Firefox 3.5+
Opera 12+
Safari 4+
Internet Explorer 8+
前端jQuery 寫法
直接看代碼吧：
$.ajax({ type: "POST", url: baseUrl + "/jsonp/post", dataType: 'json', crossDomain: true, xhrFields: { withCredentials: true }, data: { name: "name_from_frontend" }, success: function (response) { console.log(response)// 返回的json 數據$("#response").val(JSON.stringify(response)); }});dataType: “json”，這裡是json，不是jsonp，不是jsonp，不是jsonp。
crossDomain: true，這裡代表使用跨域請求
xhrFields: {withCredentials: true}，這樣配置就可以把cookie 帶過去了，不然我們連session 都沒法維護，很多人都栽在這裡。當然，如果你沒有這個需求，也就不需要配置這個了。
後端SpringMVC 配置
對於大部分的web 項目，一般都會有mvc 相關的配置類，此類繼承自WebMvcConfigurerAdapter。如果你也使用SpringMVC 4.2 以上的版本的話，直接像下面這樣添加這個方法就可以了：
@Configurationpublic class WebConfig extends WebMvcConfigurerAdapter { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**/*").allowedOrigins("*"); }}如果很不幸你的項目中SpringMVC 版本低於4.2，那麼需要「曲線救國」一下：
public class CrossDomainFilter extends OncePerRequestFilter { @Override protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException { response.addHeader("Access-Control-Allow-Origin", "*");// 如果提示* 不行，請往下看response.addHeader("Access-Control-Allow-Credentials", "true"); response.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE"); response.addHeader("Access-Control-Allow-Headers", "Content-Type"); filterChain.doFilter(request, response); }}在web.xml 中配置下filter：
<filter> <filter-name>CrossDomainFilter</filter-name> <filter-class>com.javadoop.filters.CrossDomainFilter</filter-class></filter><filter-mapping> <filter-name>CrossDomainFilter</filter-name> <url-pattern>/*</url-pattern></filter-mapping>
有很多項目用shiro 的，也可以通過配置shiro 過濾器的方式，這裡就不介紹了。
注意了，我說的是很籠統的配置，對於大部分項目是可以這麼籠統地配置的。文中類似“*” 這種配置讀者應該都能知道怎麼配。
如果讀者發現瀏覽器提示不能用'*' 符號，那讀者可以在上面的filter 中根據request 對象拿到請求頭中的referer（request.getHeader(“referer”)），然後動態地設置“Access-Control-Allow-Origin”：
String referer = request.getHeader("referer");if (StringUtils.isNotBlank(referer)) { URL url = new URL(referer); String origin = url.getProtocol() + "://" + url.getHost(); response.addHeader("Access-Control-Allow-Origin", origin);} else { response.addHeader("Access-Control-Allow-Origin", "*");}前端非jQuery 寫法
jQuery 一招鮮吃遍天的日子是徹底不在了，這裡就說說如果不使用jQuery 的話，怎麼解決post 跨域的問題。
來一段原生js 介紹下：
function createCORSRequest(method, url) { var xhr = new XMLHttpRequest(); if ("withCredentials" in xhr) { // 如果有withCredentials 這個屬性，那麼可以肯定是XMLHTTPRequest2 對象。看第三個參數xhr.open(method, url, true); } else if (typeof XDomainRequest != "undefined") { // 此對像是IE 用來跨域請求的xhr = new XDomainRequest(); xhr.open(method, url); } else { // 如果是這樣，很不幸，瀏覽器不支持CORS xhr = null; } return xhr;} var xhr = createCORSRequest('GET', url);if (!xhr) { throw new Error('CORS not supported');}其中，Chrome，Firefox，Opera，Safari 這些「程序員友好」的瀏覽器使用的是XMLHTTPRequest2 對象。 IE 使用的是XDomainRequest。
總結
以上就是本文關於快速解決跨域請求問題:jsonp和CORS的全部內容，希望對大家有所幫助。感興趣的朋友可以繼續參閱本站其他相關專題，如有不足之處，歡迎留言指出！