方案一 jsonp
服務端
/*
比如這是要跨越請求的接口
那麼接口要返回text/javascript格式的數據
並且用回調函數的名字封裝一個返回值，通過send方式返回，拼接的字符串類似於：callback(a,b,c,...)
*/
app.get('/cors', function(req, res, next) {
// 獲取回調函數的名稱，等會封裝返回值要用到
var _callback = req.query.jsoncallback;
//
var param1 = [['aa','bb'],['cc','dd'],['ee']]
var param2 = {'name':'juck', 'password':'admin'}
// 返回值類型爲javascript，否則會出現警告
res.type('text/javascript');
// 封裝返回值
res.send(_callback + '(' + JSON.stringify(param1) + ',' + JSON.stringify(param2) + ')');
});
1. javascript使用jsonp：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSONP 實例</title>
</head>
<body>
<div id="divCustomers"></div>
<script type="text/javascript">
function callbackFunction(result, methodName)
{
var html = '<ul>';
for(var i = 0; i < result.length; i++)
{
html += '<li>' + result[i] + '</li>';
}
html += '</ul>';
console.log(result)
console.log(methodName)
document.getElementById('divCustomers').innerHTML = html;
}
</script>
<script type="text/javascript" src="http://localhost/cors?jsoncallback=callbackFunction"></script>
</body>
</html>
2. jQuery使用jsonp
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSONP 實例</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>
</head>
<body>
<div id="divCustomers"></div>
<script>
$.getJSON("http://localhost/cors?jsoncallback=?", function(data) {
var html = '<ul>';
for(var i = 0; i < data.length; i++){
html += '<li>' + data[i] + '</li>';
}
html += '</ul>';
$('#divCustomers').html(html);
});
</script>
</body>
</html>
3. ajax的jsonp
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSONP 實例</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>
</head>
<body>
<div id="divCustomers"></div>
<script>
$.ajax({
url:"http://localhost/cors",
type:'get',
dataType:'jsonp',
jsonp:'jsoncallback',
jsonpCallback: 'callback_success',
success: function(data){
var html = '<ul>';
for(var i = 0; i < data.length; i++){
html += '<li>' + data[i] + '</li>';
}
html += '</ul>';
$('#divCustomers').html(html);
}
})
</script>
</body>
</html>
使用該方式的缺點：請求方式只能是get請求
方案二 jQuery的jsonp插件訪問（服務端同上）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSONP 實例</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>
<!-- 引入jQuery的jsonp插件 -->
<script src="https://github.s3.amazonaws.com/downloads/jaubourg/jquery-jsonp/jquery.jsonp-2.4.0.min.js?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAISTNZFOVBIJMK3TQ%2F20190417%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20190417T072705Z&X-Amz-Expires=300&X-Amz-SignedHeaders=host&X-Amz-Signature=a05ddb572f346629bfb9f67fcd6d9d7c7a32d661954552fa980ce20d08833501"></script>
</head>
<body>
<div id="divCustomers"></div>
<script>
$.jsonp({
url:"http://localhost/cors",
callbackParameter: 'jsoncallback',//名字可以自定義，但是要跟後端獲取時一致
callback: 'callback_success',
success: function(data){
var html = '<ul>';
for(var i = 0; i < data.length; i++){
html += '<li>' + data[i] + '</li>';
}
html += '</ul>';
$('#divCustomers').html(html);
},
error: function(xOptions, textStatus){
alert("服務器異常")
window.console.log(xOptions);
window.console.log(textStatus);
}
})
</script>
</body>
</html>
使用該方式的特點：與方式一相比，請求方式不只侷限於get請求，還可以是post請求，但從服務器從獲取的數據依然是jsonp格式
方案三 使用CORS
在Node(Express框架)服務器的返回（響應）中設置信息：
app.use("*", function (req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
if (req.method === 'OPTIONS') {
res.send(200)
} else {
next()
}
});
// 不使用上面的代碼而是使用cors插件也可以（用npm下載cors包，設置爲express的中間件）
若後端使用的java，則添加如下代碼（也可以在springmvc中配置攔截器）：
// 設置：
Access-Control-Allow-Origin頭，處理Session問題
response.setHeader("Access-Control-Allow-Origin",request.getHeader("Origin"));
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("P3P", "CP=CAO PSA OUR");
if (request.getHeader("Access-Control-Request-Method") != null && "OPTIONS".equals(request.getMethod())) {
response.addHeader("Access-Control-Allow-Methods", "POST,GET,TRACE,OPTIONS");
response.addHeader("Access-Control-Allow-Headers", "Content-Type,Origin,Accept");
response.addHeader("Access-Control-Max-Age", "120");
}
使用該方式的特點：與前兩種方式相比，前端代碼和未處理跨域前一樣，即普通的ajax請求，但服務器代碼添加了一段解決跨域的代碼
方案四 使用瀏覽器插件
火狐拓展商店下搜索：CROS anywhere
谷歌拓展商店下搜索：CORS
方案五 使用代理服務器
如nginx配置代理, vue-cli配置proxy, 等等
教程請看對應的官方資源或百度。