一個跨域的報錯
ProductInfo.html?__hbt=1531134067526:
1 Failed to load http://localhost:8080/springmvc/product/detail.do?productId=1:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://127.0.0.1:8020' is therefore not allowed access.
一、允許所有端口通過(不安全)
1.html頁面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$.ajax({
url:"http://localhost:8080/springmvc/product/detail.do",
type:"get",
data:{"productId":1},
datatype:'json',
success:function(d){
if(d.ret==0){
var str="";
str+=d.data.productId+":";
str+=d.data.price+":";
str+=d.data.count+":";
str+=d.data.address;
alert(str);
}else{
alert("無商品信息");
}
}
});
});
});
</script>
<body>
<button id="info">點擊</button>
</body>
</html>2.ProductController.java文件的編寫
package com.yc.controller;
import java.util.HashMap;
import java.util.Map;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import com.yc.model.Product;
@Controller
@RequestMapping(value = "/product")
***//設置允許跨域--所有端口***
*@CrossOrigin(origins = "*", allowedHeaders="*")*
public class ProductController {
@RequestMapping(value = "/detail")
@ResponseBody
public Map<String,Object> getProductInfo(
@RequestParam(value = "productId", required = false) int productId
) {
Map<String,Object> map = new HashMap<String,Object>();
//自行創建一個model類，這裏用於測試返回數據
Product p = new Product();
p.setProductId(1);
p.setPrice(100);
p.setCount(10);
p.setAddress("長沙");
map.put("ret", 0);
map.put("data", p);
return map;
}
}3.結果測試
eclipse中啓動服務跑該項目，在瀏覽器地址中輸入對應頁面地址
如圖所示，點擊按鈕彈出相應後臺數據。跨域成功
二、jsonp解決跨域問題(相比安全)
1.html頁面把數據返回類型修改成”jsonp”
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$.ajax({
type: "get",
url: "http://localhost:8080/springmvcdemo/product/detail.do",
data: {
productId: 100
},
dataType:"jsonp",
success: function(data) {
console.log(data);
}
});
});
});
</script>2.ProductController.java文件的修改
package com.yc.controller;
import java.util.HashMap;
import java.util.Map;
import org.springframework.http.converter.json.MappingJacksonValue;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import com.yc.model.Product;
@Controller
@RequestMapping(value = "/product")
public class ProductController {
@RequestMapping(value = "/detail")
@ResponseBody
public Object getProductInfo(@RequestParam(value = "productId", required = false) int productId,
// 獲取前端的回調函數並修改它的值
**@RequestParam(value = "callback", required = false) String callback**) {
Map<String, Object> map = new HashMap<String, Object>();
Product p = new Product();
p.setProductId(1);
p.setPrice(100);
p.setCount(10);
p.setAddress("長沙");
map.put("ret", 0);
map.put("data", p);
**// 轉換爲jsonp請求的數據
MappingJacksonValue mapping = new MappingJacksonValue(map);
// 設置前端的回調函數
mapping.setJsonpFunction(callback);
return mapping;
}
}3.頁面測試
當我們從8020端口訪問頁面時，點擊按鈕就可以在控制檯查看跨域輸出信息
