IE10/Edge에서 작동하지 않는 Cors와 함께 JSON Ajax 요청 게시
배경:- 로컬 시스템 IIS에서 호스트되는 WCF 서비스를 만들었습니다.서비스는 GET/POST 메서드와 교차 도메인을 사용하도록 설정했으며 https를 사용하여 액세스할 수도 있습니다.액세스할 수 있도록 자체 서명된 인증서가 사용됩니다.
테스트:- 교차 도메인 Ajax를 수행하려고 하면 IE10/Edge에서 GET 요청 및 POST 요청(json으로 데이터를 수락하지 않는 포스트 메서드만)에 대해 정상적으로 작동합니다.크롬/파이어박스 브라우저에서 모든 GET/POST 요청에 대해 도메인 간 통화를 할 수 있습니다.오직 IE 10/Edge만이 contenttype:accept/json 매개 변수가 Ajax 호출에서 전달될 때 POST 요청에 대해 교차 도메인 호출을 수행하는 문제를 일으킵니다.
연구:- 저는 많은 블로그/mdn을 읽고 IE가 코르스를 종교적으로 따르지 않는 코르스의 사양을 알게 되었습니다.코르스 사양이 커스텀 헤더/헤더 값을 허용하지 않는다는 것을 알고 있습니다. 그로 인해 코르스 프리플라이트가 중단되었습니다.
내가 만들고 있는 아약스 요청의 예:-
var postDT = { "postValue": "test" };
debugger;
$.support.cors = true;
$.ajax({
type: "POST",
data: JSON.stringify(postDT),
url: "http://ateet3371/Service1.svc/postdata",
contentType: "application/json; charset=utf-8",
dataType: "JSON",
processData: true,
success: function (data) {
alert(data);
},
error: function (jqXHR, textStatus, errorThrown) {
var a = jqXHR;
alert(jqXHR + '---' + textStatus + '---' + errorThrown);
}
});
제거한 경우contentType: "application/json; charset=utf-8"
그런 다음 잘못된 요청 오류를 던집니다. 그렇지 않으면 액세스 거부 오류를 던집니다.
WCF에서의 메서드 구현은 다음과 같습니다.
[OperationContract]
[WebInvoke(Method = "POST", ResponseFormat = WebMessageFormat.Json, UriTemplate = "PostResponseData")]
string PostResponseData(PostDataTest postDT);
데이터 계약은 다음과 같습니다.
[DataContract]
public class PostDataTest
{
private string post_value;
// Apply the DataMemberAttribute to the property.
[DataMember]
public string postValue
{
get { return post_value; }
set { post_value = value; }
}
}
메서드 PostUrl 데이터를 사용하면 Ajax 호출이 성공적으로 실행되고 콘텐츠인 경우 적절한 결과를 반환합니다.유형: "Application/json" 헤더가 요청에서 제거되었습니다.
[OperationContract]
[WebInvoke(Method = "POST", RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, UriTemplate = "PostUrlData/{value}")]
string PostUrlData(string value);
옵션 요청을 처리하기 위해 Global.asax of WCF의 BeginRequest 이벤트에 코드를 이미 작성했습니다.
HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
if (HttpContext.Current.Request.HttpMethod == "OPTIONS" )
{
//These headers are handling the "pre-flight" OPTIONS call sent by the browser
HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST, PUT, HEAD");
HttpContext.Current.Response.AddHeader("Access-Control-Allow-Credentials", "true");
HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Origin, Content-Type, Accept, X-Requested-With, Session");
HttpContext.Current.Response.AddHeader("Access-Control-Expose-Headers", "DAV, content-length, Allow" );
HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000" );
HttpContext.Current.Response.AddHeader("Cache-Control", "no-cache,no-store");
HttpContext.Current.Response.End();
}
그리고 나는 활성화할 수 없습니다.Allow cross domain call
IE에서 최종 사용자로 설정하면 이러한 단계를 수행하지 않습니다.
문제로 고착됨:- 그래도 IE 10/Edge(코르스 사용)에서 JSON 데이터 포스트 콜을 수행할 수 없습니다.
(편집) 업데이트:WCF가 호스팅되는 IIS 사이트에서는 익명 인증만 활성화되고 다른 인증은 비활성화됩니다.심지어 나는 https에 대한 유효한 인증서로 시도했지만 여전히 IE에서는 작동하지 않고 크롬에 완벽하게 작동합니다.
요청 헤더
OPTIONS https://service.domian.com/projectservice.svc/GetMultiListData HTTP/1.1 Accept: */* Origin: https://sitename.servicedomain.com Access-Control-Request-Method: POST Access-Control-Request-Headers: content-type, accept Accept-Encoding: gzip, deflate User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko Host: sitename.servicedomain.com Content-Length: 0 Connection: Keep-Alive Cache-Control: no-cache
응답 머리글
HTTP/1.1 200 OK Cache-Control: no-cache,no-store Server: Microsoft-IIS/7.5 Access-Control-Allow-Origin: sitename.servicedomain.com Access-Control-Allow-Methods: GET,POST,PUT,HEAD Access-Control-Allow-Credentials: true Access-Control-Allow-Headers: Origin,Content-Type,Accept,X-Requested-With,Session Access-Control-Expose-Headers: DAV,content-length,Allow Access-Control-Max-Age: 1728000 X-Powered-By: ASP.NET Date: Thu, 04 Aug 2016 17:26:27 GMT Content-Length: 0
제가 많은 글과 블로그를 검토하고 있지만 아직도 문제를 해결하지 못하고 있으니 도와주세요.도움을 주시면 대단히 감사하겠습니다!
전문가들이 도와주세요!
클라이언트 측에서 확인할 수 있는 몇 가지 사항이 있습니다.
- 당신은 당신을 무시하려고 합니다.
$.support.cors
이 속성은 CORS가 브라우저에서 지원되는지 여부를 알려주는 읽기 쉬운 속성입니다.(확인된 위치는 jQuery source 참조) - 추가할 Ajax에 대한 jQuery 문서를 기반으로 합니다.
xhrFields: { withCredentials: true }
에▁$.ajax()
설정 - 합니다.
dataType: "json"
그리고.charset=UTF-8
서버 측에서는 특정 호스트 이름으로 응답하기를 원할 수 있습니다.Origin
*
Access-Control-Allow-Origin
응답 헤더입니다.이는 MDN에서 특히 다음과 같은 내용을 논의하는 문단에 언급되어 있습니다.
중요: 인증된 요청에 응답할 때 서버는 도메인을 지정해야 하며 와일드카드를 사용할 수 없습니다.머리글에 와일드카드가 "Access-Control-Allow-Origin: *"로 지정된 경우 위의 예는 실패합니다.
장기적인 솔루션은 아니지만 https://cors-anywhere.herokuapp.com/ 을 확인할 수 있습니다. 이를 통해 문제 없이 데이터를 얻거나 게시할 수 있습니다.URL 앞에 링크를 포함하여 https://cors-anywhere.herokuapp.com/http ://ateet3371/Service1.svc/postdata를 Ajax의 URL 값으로 설정합니다.앞서 말씀드린 것처럼 장기적인 해결책은 아니지만, 효과가 있다면 거기서 무엇을 할 수 있는지 확인해 보십시오.
제가 좀 더 도움이 되었으면 좋겠습니다.행운을 빕니다.
언급URL : https://stackoverflow.com/questions/38451753/post-json-ajax-request-with-cors-not-working-in-ie10-edge
'programing' 카테고리의 다른 글
시간이 지나면 Windows 콘솔에서 명령줄 기록(위쪽 화살표)이 손실되는 이유는 무엇입니까? (0) | 2023.08.15 |
---|---|
Angular2: 하위 구성 요소 액세스 상위 클래스 변수/함수 (0) | 2023.08.15 |
DIV 중심을 수평 및 수직으로 맞춥니다. (0) | 2023.08.15 |
HTML5 입력 유형 범위 범위 값 표시 (0) | 2023.08.15 |
유형 오류: p.easing[this.easing]이(가) 함수가 아닙니다. (0) | 2023.08.15 |