springmvc--跨域的两种方式

最新推荐文章于 2024-05-30 10:38:22 发布

小白毛

最新推荐文章于 2024-05-30 10:38:22 发布

阅读量2.8k

点赞数

分类专栏： java-springmvc

本文链接：https://blog.csdn.net/qq_41876436/article/details/80976025

版权

java-springmvc 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一个跨域的报错

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端口访问页面时，点击按钮就可以在控制台查看跨域输出信息
这里写图片描述

小白毛

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
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 resou...
复制链接

扫一扫