이른바 크로스 오 버 (Cross - Origin) 는 도대체 무엇 입 니까?브 라 우 저의 크로스 오 버 지식 을 모 르 십 니까?

Ajax 의 크로스 도 메 인 요청 데이터 문 제 는 전단 개발 자 들 이 자주 토론 하 는 화제 입 니 다.많은 블 로그 글 을 뒤 져 보 니 많은 사람들 이 ajax 크로스 도 메 인 문 제 는 Ajax 자체 의 결함 으로 인 한 것 이 라 고 생각 하고 서버 가 Ajax 요청 에 대한 차단 이 라 고 생각 하지만 이런 인식 은 전면적 이지 않다.사실 크로스 도 메 인 요청 을 금지 하 는 것 은 브 라 우 저 자체 의 보안 정책 입 니 다. 다시 말 하면 크로스 도 메 인 을 금지 하 는 것 은 ajax 결함 이 아니 라 브 라 우 저가 자바 스 크 립 트 의 크로스 도 메 인 요청 에 제한 이 있 습 니 다.
1. 전역 과 관련 된 개념
1. 동원 정책 (same - origin policy)
동원 전략 에 대해 서 는 또 다른 개념 인 소스 (Origin) 를 언급 하지 않 을 수 없다.그럼 소스 가 뭐 죠?원본 은 도 메 인 이름 (domain) 입 니 다. 일반적으로 웹 페이지 를 요청 하 는 url 의 도 메 인 이름 은 원본 으로 제 정 됩 니 다. 예 를 들 어 이 블 로그 페이지 의 원본 은 'http://blog.csdn.net”。그 러 고 보 니 동원 정책 은 쉽게 이해 할 수 있 습 니 다. 바로 자바 script 을 제한 하 는 Ajax 요청 이 원본 과 다른 url 입 니 다.
2. 도 메 인 간 자원 공유 (Cross - Origin - Resource - Sharing)
크로스 도 메 인 자원 공유 (CORS) 체 제 는 브 라 우 저가 크로스 도 메 인 요청 을 더욱 안전하게 처리 하여 같은 소스 정책 의 제한 을 받 지 않도록 하기 위 한 것 입 니 다.간단하게 말 하면 크로스 필드 를 허용 해 야 하 는 원본 을 response 헤더 에 쓰 는 Access - Control - Allow - Origin 입 니 다.대응 하 는 소스 는 도 메 인 자원 공 유 를 실현 할 수 있 습 니 다.
2. 크로스 필드 허용 및 크로스 필드 금지 의 구체 적 인 메커니즘
우 리 는 간단 한 예 를 써 서 이 문 제 를 설명 할 수 있 습 니 다. servlet 로 간단 한 인 터 페 이 스 를 쓸 수 있 습 니 다.
4. 567913. 그 후에 서 비 스 를 127.0.0.1: 8080 에서 달 린 다음 에 브 라 우 저 로 인터넷 의 임의의 웹 페이지 를 열 어 콘 솔 에서 로 컬 서비스 에 대한 ajax 요청 을 합 니 다.이것 은 도 메 인 을 뛰 어 넘 는 요청 임 이 분명 합 니 다.

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		InputStream ipt = request.getInputStream();
		try (InputStreamReader isr = new InputStreamReader(ipt); BufferedReader br = new BufferedReader(isr)) {
			String line = null;
			StringBuilder sb = new StringBuilder();
			while ((line = br.readLine()) != null) {
				sb.append(line);
			}
			System.out.println(sb.toString());
		} catch (IOException e) {
			e.printStackTrace();
		}
		response.getWriter().write("{\"response\": \"response you\"}");
	}

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	doGet(request, response);
}

브 라 우 저 컨트롤 러 는 이 크로스 필드 에서 흔히 볼 수 있 는 오 류 를 빠르게 되 돌려 줍 니 다.

var xhr = new XMLHttpRequest();
	xhr.open('POST', 'http://127.0.0.1:8080/cors-demo/Cors');
	xhr.send('{"request": "hi"}');
	xhr.onload = function(e) {
		var xhr = e.target;
		console.log(xhr.responseText);
	}

XMLHttpRequest cannot load http://127.0.0.1:8080/cors-demo/Cors. 

No 'Access-Control-Allow-Origin' header is present on the requested resource. 

사실 이 ajax 요청 은 서버 에서 받 았 습 니 다. 백 스테이지 send 방법 에서 들 어 올 수 있 는 {"request": "hi"} 이지 만 자바 script 에 서 는 서버 의 response 를 가 져 올 수 없습니다.이거 어떻게 해 야 되 지?우 리 는 서버 에 이 말 을 더 할 수 있다.

Origin 'http://write.blog.csdn.net' is therefore not allowed access

이 말 은 response 머리 에 상기 정 보 를 쓰 고 소스 를 허용 한 다 는 뜻 이다.http://write.blog.csdn.net"라 는 웹 페이지 에서 Ajax 요청 을 합 니 다.그 후에 도 메 인 을 뛰 어 넘 는 ajax 요청 을 하고 데 이 터 를 정상적으로 받 아들 일 수 있 습 니 다.
전후 단 코드 를 종합해 보면 이 request 는 서버 에 보 내 졌 고 response 도 클 라 이언 트 에 되 돌 아 왔 습 니 다. 그러나 브 라 우 저 는 현재 웹 페이지 의 원본 과 Access - Control - Allow - Origin 의 url 을 비교 합 니 다. 같은 url 이 있 는 것 을 발견 하면 크로스 도 메 인 접근 을 허용 한다 고 판정 합 니 다. 그렇지 않 으 면 자바 script 에서 response 정 보 를 얻 을 수 없습니다.이른바 '도 메 인 접근 금지' 현상 을 초래 할 수 있다.웹 인터페이스 에 어떤 소스 의 크로스 도 메 인 접근 을 허용 하려 면 머리 정 보 를 access - control - Allow - Origin: * 라 고 쓸 수 있 습 니 다.    —— "*" 는 임의의 소스 를 나타 낸다.사실 도 메 인 을 뛰 어 넘 지 못 하 는 방문 에서 보 고 된 이상 을 조회 하 는 것 도 우리 가 이 문 제 를 이해 하 는 데 도움 을 줄 수 있 습 니 다. 위의 잘못된 정 보 는 response 의 헤더 정보 에서 Access - Control - Allow - Origin 이라는 속성 을 찾 지 못 했 기 때문에 소스 '* * *' 는 접근 할 수 있 는 권한 이 없습니다. * * * 'url.
3. 왜 jsonp 는 도 메 인 문 제 를 해결 할 수 있 습 니까?
그러나 대부분의 전단 개발 자 들 이 도 메 인 문 제 를 만 나 자마자 가장 먼저 생각 하 는 해결 방안 은 jsonp 입 니 다. jsonp 는 비공 식 전송 프로 토 콜 입 니 다. jsonp 가 브 라 우 저의 동원 정책 을 돌아 갈 수 있 는 이 유 는 JavaScript 의 Ajax 와 Fetch 요청 을 제외 하고 다른 요청 은 동원 정책 의 제한 을 받 지 않 기 때 문 입 니 다. 다시 말 하면 ajax 요청 을 제외 하고 웹 페이지 의 css 와 같은 다른 것 입 니 다., js 스 크 립 트 등 자원 파일 의 요청 은 크로스 필드 로 인해 접근 이 제한 되 지 않 습 니 다. jsonp 는 바로 이 점 을 이용 하여 크로스 필드 데이터 요청 을 완 료 했 습 니 다.
그럼 어떻게 jsonp 의 요청 을 만 듭 니까? 다음은 예 입 니 다.
전단 코드:

response.addHeader("Access-Control-Allow-Origin", "http://write.blog.csdn.net");

대체로 스 크 립 트 탭 을 설명 하고 자원 경 로 를 도 메 인 을 넘 어 접근 하고 싶 은 url 로 설정 합 니 다. "callBkFunc" 라 는 방법 명 을 설명 하고 배경 에 매개 변수 로 전달 합 니 다.
서버 코드:

var callback = 'callBkFunc';
	
this[callback] = function(result) {
    console.log(result);
}
	
var JSONP = document.createElement('script');
JSONP.type = 'text/javascript';
JSONP.src = "http://127.0.0.1:8080/cors-demo/Cors?callback=" + callback;
document.getElementsByTagName("head")[0].appendChild(JSONP);

프론트 엔 드 에서 script 탭 을 통 해 백 엔 드 에 방법 명 을 전달 한 후, 서버 코드 는 이 방법 명 으로 동적 js 스 크 립 트, 즉 "callBkFunc (args)" 를 만 들 었 습 니 다. args 에 서 는 프론트 엔 드 에 전송 하고 싶 은 데 이 터 를 썼 습 니 다. 그 다음 프론트 엔 드 는 callBkFunc 가 정의 하 는 형 삼 result 에서 백 엔 드 로 전송 되 는 데 이 터 를 받 을 수 있 습 니 다.