一个跨域的报错
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({
url:"http://localhost:8080/springmvc/product/detail.do",
type:"get",
data:{"productId":1},
**datatype:'jsonp',**
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>
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.页面测试