springmvc--跨域的两种方式

一个跨域的报错

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.页面测试

springmvc--跨域的两种方式

一、允许所有端口通过(不安全)

二、jsonp解决跨域问题(相比安全)

猜你喜欢