スプリングmvc--クロスドメインの2つの方法

14486 ワード

クロスドメインのエラー

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>
    <head>
        <meta charset="UTF-8">
        <title>Insert title heretitle>
    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 getProductInfo(
            @RequestParam(value = "productId", required = false) int productId
            ) {
        Map map = new HashMap();
        //      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.ページでデータを返すタイプを「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 map = new HashMap();
        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ポートからページにアクセスするときは、ボタンを押すと、コンソールでクロスドメイン出力情報

を確認できます.

springmvcのModelAndViewの簡単な使用

MongoDB Replica Set配置