뛰 어 넘 기: SpringBoot 프로젝트 의 크로스 필드 문제 에 대한 설명

23790 단어 필기 하 다.자바 기반ajax자바htmljsonp
크로스 필드 테스트
테스트 사례 1
1). 페이지 에 접근 하 는 주소http://manage.jt.com:80/test.html 2). ajax 접근 데이터 의 주소:http://manage.jt.com:80/test.json 분석: 프로 토 콜: / 도 메 인 이름: 포트 가 완전히 일치 합 니 다. 정상 여 부 를 테스트 합 니 다. 정상 적 인 결론: 프로 토 콜: / 도 메 인 이름: 포트 번호 가 같 을 때 정상적으로 요청 할 수 있 습 니 다. 피 방문 자의 페이지 정보: 跨越：SpringBoot项目中关于跨域问题的说明_第1张图片요청 단의 페이지 정보: 跨越：SpringBoot项目中关于跨域问题的说明_第2张图片
테스트 사례 2
1). 페이지 에 접근 하 는 주소http://www.jt.com:80/test.html 2). ajax 접근 데이터 의 주소:http://manage.jt.com:80/test.json 분석: 프로 토 콜: / 도 메 인 이름: 포트 도 메 인 이름 이 다 릅 니 다. 테스트 결과: ajax 호출 이 정상적으로 실 행 될 수 없습니다.
브 라 우 저 동원 정책 에 대한 설명
설명: 브 라 우 저 는 브 라 우 저 에서 페이지 를 분석 할 때 ajax 요청 을 받 았 을 때 현재 페이지 의 프로 토 콜: / 도 메 인 이름: 포트 번호 가 같 으 면 같은 소스 정책 을 같은 도 메 인 요청 이 라 고 합 니 다. 브 라 우 저 는 반환 값 요청 을 정확하게 해석 할 수 있 습 니 다. 세 가지 중 하나 가 다 르 면,요청 을 크로스 도 메 인 요청 이 라 고 합 니 다. 브 라 우 저 는 안전성 을 고려 하여 반환 값 을 분석 하지 않 습 니 다. 跨越：SpringBoot项目中关于跨域问题的说明_第3张图片 원 격 요청 절차: 설명: 사용자 가 서버 측 에 Ajax 요청 을 보 낼 때 어떠한 차단 도 없 이 서버 측 에 접근 하 는 것 이 정상 입 니 다.서버 에 접근 할 때 사용자 에 게 데 이 터 를 되 돌려 줄 때 '동원 정책' 에 부합 되 어야 합 니 다. 이 정책 에 부합 되 지 않 으 면 데 이 터 를 되 돌려 주지 않 습 니 다.跨越：SpringBoot项目中关于跨域问题的说明_第4张图片
JSONP
JSONP 에 대한 소개
JSONP (JSON with Padding) 는 JSON 의 '사용 모드' 로 주류 브 라 우 저의 크로스 도 메 인 데이터 접근 문 제 를 해결 할 수 있 습 니 다.같은 소스 정책 으로 인해 일반적으로 server 1. example. com 에 있 는 웹 페이지 는 server 1. example. com 이 아 닌 서버 와 소통 할 수 없 으 며 HTML 의 경우
JSONP 원리 설명
1). javaScript 태그 동적 으로 원 격 데 이 터 를 가 져 옵 니 다.
<script type="text/javascript" src="http://manage.jt.com/test.json"></script>

2). 사용자 정의 리 셋 함수
<script type="text/javascript">
		/*JS          */
		/*        */
		function hello(data){
     
			alert(data.name);
		}
</script>

3). 반환 값 결 과 를 특수 형식 으로 패키지 합 니 다.
hello({
     "id":"1","name":"tom"})

질문: JSONP POST 요청 가능 할 까요?불가 원인: javaScript 의 src 속성 은 get 요청 만 할 수 있 고 POST 를 사용 할 수 없습니다.
jQuery 의 JSONP
페이지 편집 JS

<html>
<head>
<meta charset="UTF-8">
<title>JSONP  title>
<script type="text/javascript" src="http://manage.jt.com/js/jquery-easyui-1.4.1/jquery.min.js">script>
<script type="text/javascript">
	$(function(){
      
		alert("      !!!!!")
		$.ajax({
      
			url:"http://manage.jt.com/web/testJSONP",
			type:"get",				//jsonp    get  
			dataType:"jsonp",       //dataType             
			jsonp: "callback",      //              !!!
			jsonpCallback: "hello",  //        
			success:function (data){
         //data  jQuery      json 
				alert(data.id);
				alert(data.name);
			}	
		});	
	})
script>
head>
<body>
	<h1>JSON      h1>
body>
html>

백그라운드 업무 실현
import com.fasterxml.jackson.databind.util.JSONPObject;
import com.jt.pojo.ItemDesc;
import com.jt.util.ObjectMapperUtil;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class JSONPController {
     

    @RequestMapping("/web/testJSONP")
    public JSONPObject testJSONP(String callback){
     
        ItemDesc itemDesc = new ItemDesc();
        itemDesc.setItemId(100L).setItemDesc("    2222");

        return new JSONPObject(callback, itemDesc);
    }


    /**
     * JSONP        :  callback(JSON)
     * 1.    :  http://manage.jt.com/web/testJSONP?callback=xxxx
     * 2.       itemDesc  
     */
   /* @RequestMapping("/web/testJSONP")
    public String testJSONP(String callback){
        ItemDesc itemDesc = new ItemDesc();
        itemDesc.setItemId(100L).setItemDesc("    ");
        String json = ObjectMapperUtil.toJSON(itemDesc);
        //jsonp  3        
        return callback + "(" + json + ")";
    }*/
}

CORS
CORS 소개
크로스 소스 자원 공유 (CORS) (또는 크로스 도 메 인 자원 공유) 는 HTTP 헤드 를 기반 으로 하 는 메커니즘 입 니 다. 이 메커니즘 은 서버 가 자신 을 제외 한 다른 origin (도 메 인, 프로 토 콜, 포트) 을 표시 하도록 허용 합 니 다. 그러면 브 라 우 저 는 이 자원 을 불 러 올 수 있 습 니 다.크로스 소스 자원 공 유 는 서버 가 보 낼 실제 요청 을 허용 하 는 지 확인 하 는 메커니즘 을 통 해 서버 가 관리 하 는 크로스 소스 자원 의 * * "예비 검사" * 요청 을 브 라 우 저 를 통 해 시작 합 니 다.사전 검사 에서 브 라 우 저가 보 낸 머리 에는 HTTP 방법 과 실제 요청 에 사용 할 머리 가 표시 되 어 있 습 니 다.추가: 현 단계 의 거의 모든 브 라 우 저 는 기본적으로 CORS (IE 제외) 를 지원 합 니 다.
CORS 크로스 필드 테스트
1). ajax 요청 경로 수정

<html>
<head>
<meta charset="UTF-8">
<title>  JSON    title>
<script type="text/javascript" src="http://manage.jt.com/js/jquery-easyui-1.4.1/jquery.min.js">script>
<script type="text/javascript">
	$(function(){
      
		$.get("http://manage.jt.com/testCors",function(data){
      
			alert(data.itemDesc);
		})
	})
script>
head>
<body>
	<h1>JSON      h1>
body>
html>

2). 전단 크로스 오 버 在这里插入图片描述
CORS 크로스 필드 원리
설명: CORS 는 응답 헤드 에 서버 에 접근 할 수 있 는 사이트 주 소 를 표시 합 니 다. CORS 의 설정 은 서버 측의 설정 이 고 브 라 우 저 와 관계 가 없습니다. 跨越：SpringBoot项目中关于跨域问题的说明_第5张图片
배경 컨트롤 러 편집
import com.jt.pojo.ItemDesc;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;

@RestController
@CrossOrigin(value = "http://www.jt.com")   //    Controller               
                                         //  :                      
public class CorsController {
     

    /**
     * http://manage.jt.com/testCors
     * @return
     */
    @RequestMapping("testCors")
    public ItemDesc cors(){
     

        return new ItemDesc().setItemDesc("CORS  ");
    }
}

응답 헤드 정보 跨越：SpringBoot项目中关于跨域问题的说明_第6张图片 이상, 학습 참고 만 제공
golang 생성 유일한 표식 id
Oracle 은 사용자 의 모든 표, 필드 등 정 보 를 조회 합 니 다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage