現在越來多的地方用到CORS來處理跨域問題，主要還是在於JSONP有一定的條件約束，先看一下對比，本文會介紹包括JSONP和CORS在內的幾種解決跨域問題的方式
一、JSONP和CORS 區別
JSONP的原理是動態創建script標籤
1.JSONP發送的不是真正的ajax請求
2.JSONP不支持post請求
3.JSONP沒有兼容問題
CORS中文意思是跨域資源共享，需要在服務器端設置
cops配置
1.CORS發送的是真正的ajax請求，它允許瀏覽器向跨源服務器，發出XMLHttpRequest請求，從而克服了AJAX只能同源使用 的限制。
2.CORS既支持get 又支持post
3. CORS需要瀏覽器和服務器同時支持。目前，所有瀏覽器都支持該功能，IE瀏覽器不能低於IE10。
二、JSONP實現跨域原理
JSONP能實現跨域源於其使用了回調函數，整個過程就是前端聲明好一個函數，後端返回執行函數。執行函數參數中攜帶所需的數據，所以要求前後端定義一個回調函數，
1.通過添加一個<script src=""> 來完成一個跨域請求，用於發起跨域請求，後臺則把此回調函數返回
前端代碼：
//回調函數
function showData (result) {
var data = JSON.stringify(result); //json對象轉成字符串
$("#text").val(data);
}
$(document).ready(function () {
$("#btn").click(function () {
//向頭部輸入一個腳本，該腳本發起一個跨域請求
$("head").append("<script src='http://localhost:8080/test?callback=showData'><\/script>");
});
});
後臺代碼：
//前端傳過來的回調函數名稱
String callback = request.getParameter("callback");//前端定義的名稱
//用回調函數名稱包裹返回數據，這樣，返回數據就作爲回調函數的參數傳回去了
result = callback + "(" + result + ")";
response.getWriter().write(result);
2.通過jquery來實現jsonp跨域請求：
服務端代碼不變，js代碼如下：
最簡單的方式，只需配置一個dataType:'jsonp'，就可以發起一個跨域請求。jsonp指定服務器返回的數據類型爲jsonp格式，可以看發起的請求路徑，自動帶了一個callback=xxx，xxx是jquery隨機生成的一個回調函數名稱。
這裏的success就跟上面的showData一樣，如果有success函數則默認success()作爲回調函數。
<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>跨域測試</title>
<script src="js/jquery-1.7.2.js"></script>
<script>
$(document).ready(function () {
$("#btn").click(function () {
$.ajax({
url: "http://localhost:8080/test",
type: "GET",
dataType: "jsonp", //指定服務器返回的數據類型
success: function (data) {
var result = JSON.stringify(data); //json對象轉成字符串
$("#text").val(result);
}
});
});
});
</script>
</head>
<body>
<input id="btn" type="button" value="跨域獲取數據" />
<textarea id="text" style="width: 400px; height: 100px;"></textarea>
</body>
</html>
三、使用CORS解決跨域問題
在HTML5中有“Cross-Origin Resource Sharing”的新特性，來賦予開發者權力決定資源是否允許被跨域訪問。CORS是一個W3C標準，全稱是"跨域資源共享"（Cross-origin resource sharing）。它允許瀏覽器向跨源服務器，發出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。整個CORS通信過程，都是瀏覽器自動完成，不需要用戶參與。對於開發者來說，CORS通信與同源的AJAX通信沒有差別，代碼完全一樣。瀏覽器一旦發現AJAX請求跨源，就會自動添加一些附加的頭信息，有時還會多出一次附加的請求，但用戶不會有感覺。
因此，實現CORS通信的關鍵是服務器。只要服務器實現了CORS接口，就可以跨源通信
1.註解方式解決跨域
使用springMVC的註解必須是spring 4.2及以上的版本才支持
@CrossOrigin(origins = "*", maxAge = 3600)
@RestController
@RequestMapping("/test")
public class TestController{
@RequestMapping("/{id}")
public Account retrieve(@PathVariable Long id) {
// DO
}
@RequestMapping(method = RequestMethod.DELETE, path = "/{id}")
public void remove(@PathVariable Long id) {
// DO
}
}
這裏指定當前的TestController中所有的方法可以處理所有域上的請求，當然能加在每一個單獨的請求接口之上