.NET Core API CORS 의 실현

최근 에 앞 뒤 가 분 리 된 프로젝트 에 참 여 했 습 니 다.백 엔 드 는.NET Core 2.1 개발 을 바탕 으로 앞 뒤 가 도 킹 되 는 과정 에서 크로스 도 메 인 문제 에 시 달 려 조금 성질 이 났 습 니 다.여기 서 경험 을 공유 하 겠 습 니 다.
GET/POST 요청
서버 에서 어떠한 조정 도 하지 않 은 상태 에서 전단 에서 AJAX 요청 을 합 니 다.예 를 들 어:

$.ajax({
	type: 'get',
	url: 'http://localhost:5000',
	success: function (result) {
		$('#result').html(result);
	}
});

200 ！！！멀쩡 한 것 같 아 요.괜 찮 은 것 같 아 요.그러나 Response 에 아무것도 없 는 것 을 발견 하고 브 라 우 저 Console 로 돌아 가 보면 잘못된 정보 가 있 습 니 다.크로스 도 메 인 접근 이 지원 되 지 않 고 시원 하 다 는 것 을 알려 줍 니 다.

JSONP
크로스 도 메 인 문 제 를 만 났 을 때 JSONP 의 해결 방식 을 쉽게 생각 할 수 있 지만 GET 요청 에 국한 되 고 POST 가 어렵다 고 해서 저도 사용 하지 않 았 습 니 다.여 기 는 테스트 하지 않 겠 습 니 다.

$.ajax({
	type: 'get',
	url: 'http://localhost:5000/home/jsonpTest',
	data: {
		name: 'beck'
	},
	dataType: "jsonp",
	jsonpCallback: "jsonpCallback",
	success: function (result) {
		$('#result').html(result.Data);
	}
});

그럼 이제 문제 가 생 겼 습 니 다.JSONP 와 GET 의 요청 은 자신의 제한 이 있 기 때문에 POST 를 굳이 필요 로 한다 면 어떻게 합 니까?그럼 CORS 를 선택 하 세 요!
CORS
CORS(Cross-Origin Resource Sharing,크로스 소스 자원 공유)는 W3C 에서 나 온 표준 으로 사용자 정의 HTTP 헤드 를 사용 하여 브 라 우 저 를 서버 와 소통 시 켜 요청 이나 응답 이 성공 해 야 하 는 지,실패 해 야 하 는 지 를 결정 하 는 것 이 사상 이다.CORS 와 JSONP 는 크로스 소스 자원 공 유 를 할 수 있 지만 JSONP 와 달리 CORS 는 GET 방식 을 제외 한 모든 유형의 HTTP 요청 을 지원 할 수 있다.
실현 방식 을 소개 하기 전에 먼저 일부 CORS 와 관련 된 이론 을 간단하게 알 아야 한다.그렇지 않 으 면 문제 에 대해 약간 어리둥절 할 수 있다.특히 그 중의 OPTIONS 요청 은 GET,POST 방식 으로 설정 되 어 있 는데 어떻게 OPTIONS 요청 이 하나 더 나 올 수 있 습 니까?
CORS 요청 은 간단 한 요청 과 복잡 한 요청 으로 나 뉜 다.
간단 한 요청
동시에 다음 조건 을 만족 시 키 는 것 은 간단 한 요구 로 분류 된다.

요청 방식 은 HEAD,GET,POST 중의 하나 이다

HTTP 의 헤더 정 보 는 Accept,Accept-language,Content-language,Last-이벤트-ID,Content-Type 필드 를 초과 하지 않 습 니 다

Content-Type 은 application/x-www-form-urlencoded,multipart/form-data,text/plain 세 가지 중 하나 에 국한 된다

간단 한 요청 은 서버 에서 Access-Control-Allow-Origin 을 설정 하여 요청 소스 주 소 를 허용 하면 됩 니 다.우 리 는.NET Core API 프로젝트 의 Startup.cs 에서 다음 과 같이 조정 할 수 있 습 니 다.

public void ConfigureServices(IServiceCollection services)
{
	//         
	services.AddCors(); 
}

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
	//          ，              http://localhost:53894 
	app.UseCors(options => options.WithOrigins("http://localhost:53894")); 
}

전단 에서 GET 또는 POST 요청:

$.ajax({
	type: 'post',
	url: 'http://localhost:5000/home/fromFormTest',
	data: {
		name: 'beck'
	},
	success: function (result) {
		$('#result').html(result.data);
	}
});

복잡 한 요구
간단 한 요청 조건 을 충족 하지 못 하 는 일괄 적 인 요 구 는 복잡 한 요청 으로 분류 되 며,복잡 한 요 구 는 정식 통신 에 앞서 OPTIONS 요청 을 한 번 추가 해'예 찰'요청 이 라 고 하 며,예 찰 요청 의 반환 헤더 정 보 를 통 해 현재 요청 이 허용 되 는 지 여 부 를 판단 한다.
contentType 을 application/json 으로 설정 할 수 있 습 니 다.이 요청 은 복잡 한 요청 이 됩 니 다.

$.ajax({
	type: 'post',
	url: 'http://localhost:5000/home/fromBodyTest',
	contentType: 'application/json',
	data: JSON.stringify({
		name: 'beck'
	}),
	success: function (result) {
		$('#result').html(result.data);
	}
});

API 프로젝트 의 Startup.cs 가 위 에서 조정 한 후에 변 하지 않 으 면 OPTIONS 요청 에서 Response Headers 정보 가 요청 을 허용 하 는 원본 주소 인 Access-Control-Allow-Origin 이 나타 나 지 않 는 것 을 볼 수 있 습 니 다.이 는 예비 검사 가 실 패 했 음 을 의미 하 며 계속 차 갑 게 식 혀 있 습 니 다.

예 검 요청 의 반환 헤더 에 Access-Control-Request-Method 와 Access-Control-Request-Headers 를 설정 해 야 하기 때문이다.app.UseCors 는 일부 헤더 정보 나 요청 형식 을 설정 하 는 것 을 지원 합 니 다.이 는 사용 할 때 실제 상황 을 보고 결정 합 니 다.

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
	//            、   、    
	app.UseCors(options => options
		.WithOrigins("http://localhost:53894")
		.AllowAnyHeader()
		.AllowAnyMethod()
	);
}

예비 검사 통과 후 POST 요청:

Cookie
서버 에 쿠키 를 휴대 할 것 을 요청 하면 다음 과 같이 약간의 조정 이 필요 합 니 다.
Startup.cs AllowCredentials 설정 추가:

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
	//            、   、    、Cookie
	app.UseCors(options => options
		.WithOrigins("http://localhost:53894")
		.AllowAnyHeader()
		.AllowAnyMethod()
		.AllowCredentials()
	);
}

AJAX 요청 에 도 withCredentials 설정 을 추가 해 야 합 니 다.

setCookie('name', 'test');
$.ajax({
	type: 'post',
	url: 'http://localhost:5000/home/fromBodyTest',
	contentType: 'application/json',
	data: JSON.stringify({
		name: 'beck'
	}),
	xhrFields: {
		withCredentials: true
	},
	success: function (result) {
		$('#result').html(result.data);
	}
});

상기 코드 의 간단 한 수정 을 통 해 CORS 가 실현 되 었 다.실제 내부 네트워크 나 생산 환경 에 서 는 운영 차원 에서 Nginx 나 다른 설정 을 통 해 코드 를 수정 하지 않 아 도 완벽 하 게 지원 할 수 있 습 니 다.
참고 자료
 ASP.NET Core CORS
 CORSSample
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.