jQuery $.ajax(), $.post는 Firefox에서 "OPTIONS"를 REQUEST_METHOD로 전송합니다.
비교적 단순한 jQuery 플러그인이라고 생각했던 것에 문제가 있었습니다.
acjax 을 php에 .<select>
. 일반적입니다 ajax 요청은 다음과 같습니다
$.ajax({
url: o.url,
type: 'post',
contentType: "application/x-www-form-urlencoded",
data: '{"method":"getStates", "program":"EXPLORE"}',
success: function (data, status) {
console.log("Success!!");
console.log(data);
console.log(status);
},
error: function (xhr, desc, err) {
console.log(xhr);
console.log("Desc: " + desc + "\nErr:" + err);
}
});
이것은 Safari에서는 정상적으로 동작하고 있는 것 같습니다. 3에서는 '''3.5REQUEST_TYPE
OPTIONS'는 $_POST를 사용합니다.는 'OPTIONS유형으로 합니다.
::1 - - [08/Jul/2009:11:43:27 -0500] "OPTIONS sitecodes.php HTTP/1.1" 200 46
이 ajax 콜이 Firefox가 아닌 Safari에서는 작동하는 이유와 Firefox에서는 어떻게 수정해야 합니까?
응답 헤더일시: 2009년 7월 8일 (수) 21:22:17 GMT서버: Apache/2.0.59(Unix) PHP/5.2.6 DAV/2X-Powered-By: PHP/5.2.6콘텐츠 길이 46Keep-Alive 시간 초과=15, max=100접속 킵얼라이브Content-Type 텍스트/html 요청 헤더호스트 주문 양식: 8888User-Agent Mozilla/5.0 (Macintosh; U; 인텔 Mac OS X 10.5; en-US; rv:1.9.1) Gecko/20090624 Firefox/3.5text/module,application/xhtml+xml,application/xml;q=0.9,*/*;q=0을 사용합니다.8Accept-Language en-us,en;q=0.5Accept-Encoding gzip,deflateAccept-Charset ISO-8859-1,utf-8;q=0.7,*;q=0.7Keep-Alive 300접속 킵얼라이브오리진 http://ux.inetu.act.orgAccess-Control-Request-Method POST액세스 제어 요구 헤더 x-requested-with
다음은 Firebug 출력 그림입니다.
에러의 원인은, 같은 오리진정책입니다.자신의 도메인에 대한 XMLHTTPRequest만 실행할 수 있습니다.대신 JSONP 콜백을 사용할 수 있는지 확인합니다.
$.getJSON( 'http://<url>/api.php?callback=?', function ( data ) { alert ( data ); } );
OPTIONS 요청을 해석하고 필요한 Access-Control 헤더를 설정하기 위해 Django 측에서 다음 코드를 사용했습니다.그 후 Firefox로부터의 크로스 도메인 요구가 기능하기 시작했습니다.앞서 말한 바와 같이 브라우저는 OPTIONS 요청을 먼저 전송한 후 바로 POST/GET을 전송합니다.
def send_data(request):
if request.method == "OPTIONS":
response = HttpResponse()
response['Access-Control-Allow-Origin'] = '*'
response['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS'
response['Access-Control-Max-Age'] = 1000
# note that '*' is not valid for Access-Control-Allow-Headers
response['Access-Control-Allow-Headers'] = 'origin, x-csrftoken, content-type, accept'
return response
if request.method == "POST":
# ...
편집: 적어도 경우에 따라서는 실제 응답에 동일한 Access-Control 헤더를 추가해야 할 수 있습니다.요청은 성공한 것처럼 보이기 때문에 다소 혼란스러울 수 있지만 Firefox는 응답 내용을 Javascript에 전달하지 않습니다.
이 Mozilla Developer Center 문서에서는 다양한 교차 도메인 요청 시나리오를 설명합니다.이 문서는 콘텐츠 유형이 'application/x-www-form-urlencoded'인 POST 요청을 '단순 요청'으로 전송해야 함을 나타내는 것 같습니다('사전 이동' OPTIONS 요청 없음).다만, 파이어폭스는 OPTIONS 요구를 송신하고 있었습니다만, POST는 그 컨텐츠 타입으로 송신되고 있었습니다.
서버에 옵션 요청 핸들러를 생성하여 'Access-Control-Allow-Origin' 응답 헤더를 '*'로 설정함으로써 이 작업을 수행할 수 있었습니다.http://someurl.com'과 같은 특정 항목으로 설정하면 더 제한적일 수 있습니다.또, 복수의 기원을 쉼표로 구분한 리스트로 지정할 수 있다고 하는 것도 읽어 보았습니다만, 동작시킬 수 없었습니다.
Firefox는 OPTIONS 요청에 대한 응답을 허용 가능한 'Access-Control-Allow-Origin' 값으로 수신하면 POST 요청을 전송합니다.
완전히 Apache 기반의 솔루션을 사용하여 이 문제를 해결했습니다.vhost/htaccess에 다음 블록을 넣습니다.
# enable cross domain access control
Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS"
# force apache to return 200 without executing my scripts
RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule .* / [R=200,L]
Apache가 대상 스크립트를 실행할 때 발생하는 작업에 따라 후자가 필요하지 않을 수 있습니다.후자는 친근한 ServerFault 사용자에게 돌아옵니다.
응답 스크립트 맨 위에 있는 이 PHP는 작동하는 것 같습니다.(Firefox 3.6.11에서는)아직 많은 테스트를 하지 않았습니다.)
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
header('Access-Control-Max-Age: 1000');
if(array_key_exists('HTTP_ACCESS_CONTROL_REQUEST_HEADERS', $_SERVER)) {
header('Access-Control-Allow-Headers: '
. $_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']);
} else {
header('Access-Control-Allow-Headers: *');
}
if("OPTIONS" == $_SERVER['REQUEST_METHOD']) {
exit(0);
}
맵에 방법은 1.로 매우 의 경우 use use 、 jQuery 1.5 、 data Type 。dataType: "jsonp"
OPTIONS 메서드를 사용한 사전 요청입니다.
사용자 데이터에 부작용을 일으킬 수 있는HTTP 요구 방식(특히 GET 이외의 HTTP 방식 또는 특정 MIME 유형에서의 POST 사용)의 경우 사양에서는 브라우저가 요구를 '프리플라이트'하고 HTTP OPTIONS 요구 방식을 사용하여 서버에서 지원되는 메서드를 요청하고 서버로부터 '승인'을 하도록 요구하고 있습니다.실제 HTTP 요청 방식을 사용하여 실제 요청을 전송합니다.
Web 사양은, https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS 를 참조해 주세요.
Nginx conf에 다음 행을 추가하여 문제를 해결했습니다.
location / {
if ($request_method = OPTIONS ) {
add_header Access-Control-Allow-Origin "*";
add_header Access-Control-Allow-Methods "POST, GET, PUT, UPDATE, DELETE, OPTIONS";
add_header Access-Control-Allow-Headers "Authorization";
add_header Access-Control-Allow-Credentials "true";
add_header Content-Length 0;
add_header Content-Type text/plain;
return 200;
}
location ~ ^/(xxxx)$ {
if ($request_method = OPTIONS) {
rewrite ^(.*)$ / last;
}
}
소스 1.3.2를 조사했는데, JSONP를 사용할 때는 브라우저의 Same-domain 정책을 통과하는 SCRIPT 요소를 동적으로 구축함으로써 요구가 이루어집니다.당연히 SCRIPT 요소를 사용하여 POST 요청을 할 수 없습니다.브라우저는 GET을 사용하여 결과를 가져옵니다.
JSONP 콜을 요구할 때 SCRIPT 요소는 생성되지 않습니다.이는 AJAX 콜의 타입이 GET으로 설정되어 있는 경우에만 생성되기 때문입니다.
http://dev.jquery.com/ticket/4690
ASP에서 이와 같은 문제가 발생했습니다.Net. jQuery를 실행하려고 할 때 IIS가 내부 서버 오류를 반환했습니다.$.post
PageHandlerFactory가 응답만 하도록 제한되었기 때문에 html 콘텐츠를 가져옵니다.GET,HEAD,POST,DEBUG
동사입니다. 따라서 동사 "OPTIONS"를 목록에 추가하거나 "All 동사"를 선택할 수 있습니다.
이를 IIS 매니저에서 수정하고 웹 사이트를 선택한 후 핸들러 매핑을 선택하고 필요에 따라 *.apx 파일용 PageHandlerFactory를 더블 클릭할 수 있습니다(프레임 4.0과 통합 애플리케이션 풀을 사용합니다).Request Restrictions(요구 제한)를 클릭한 다음 동사 탭으로 이동하여 수정을 적용합니다.
자, 이제$.post
요청이 예상대로 작동하고 있습니다. : )
당신의 양식이 맞는지 확인합니다.action
URL에는 다음이 포함됩니다.www
도메인의 일부이며, 열어본 원본 페이지는 도메인 없이 볼 수 있습니다.www
.
일반적으로 표준 URL에 대해 수행됩니다.
나는 이 기사를 우연히 발견하기 전까지 몇 시간 동안 고군분투하다가 크로스 도메인의 힌트를 발견했다.
내 생각에 만약o.url = 'index.php'
이 파일은 정상적으로 존재하며 콘솔에 성공 메시지가 반환됩니다.url을 사용하면 다음 오류가 반환됩니다.http://www.google.com
포스트 요청을 하는 경우 $.post 메서드를 직접 사용하지 않는 이유는 무엇입니까?
$.post("test.php", { func: "getNameAndTime" },
function(data){
alert(data.name); // John
console.log(data.time); // 2pm
}, "json");
그것은 훨씬 더 간단하다.
POST 하는 도메인의 서버 코드를 제어하는 경우의 해결 방법의 명확한 예를 게재했습니다.이 답변은 이 스레드에서 다루어졌지만 IMO에 대해 더 명확하게 설명합니다.
JavaScript를 통해 크로스 도메인 POST 요청을 전송하려면 어떻게 해야 합니까?
이 문제의 해결 방법은 다음과 같습니다.
- data Type 사용:
json
- 더하다
&callback=?
당신의 URL로
이것은 Facebook API를 호출하고 Firefox를 사용하여 작동했습니다.Firebug 사용 중GET
대신OPTIONS
(양자 모두) 상기의 조건을 만족시키는 것으로 합니다.
이 문제를 회피할 수 있는 또 다른 방법은 프록시 스크립트를 사용하는 것입니다.이 방법은 예를 들어 다음과 같습니다.
이거 없이 해 볼 수 있어요?
contentType:application/x-www-form-urlencoded
옵션을 추가해 보십시오.
데이터 유형: "json"
function test_success(page,name,id,divname,str)
{
var dropdownIndex = document.getElementById(name).selectedIndex;
var dropdownValue = document.getElementById(name)[dropdownIndex].value;
var params='&'+id+'='+dropdownValue+'&'+str;
//makerequest_sp(url, params, divid1);
$.ajax({
url: page,
type: "post",
data: params,
// callback handler that will be called on success
success: function(response, textStatus, jqXHR){
// log a message to the console
document.getElementById(divname).innerHTML = response;
var retname = 'n_district';
var dropdownIndex = document.getElementById(retname).selectedIndex;
var dropdownValue = document.getElementById(retname)[dropdownIndex].value;
if(dropdownValue >0)
{
//alert(dropdownValue);
document.getElementById('inputname').value = dropdownValue;
}
else
{
document.getElementById('inputname').value = "00";
}
return;
url2=page2;
var params2 = parrams2+'&';
makerequest_sp(url2, params2, divid2);
}
});
}
저도 페이스북 API를 사용하려다 비슷한 문제가 있었습니다.
유일한 콘텐츠사전 비행 요청을 전송하지 않은 유형은 텍스트/보통인 것 같습니다...여기서 Mozilla에서 언급된 나머지 매개 변수는 없습니다.
- 왜 이 브라우저만 이 기능을 하는 거죠?
- Facebook은 왜 비행 전 요청을 알고 받아들이지 않나요?
참고로 상기 Moz 문서에 따르면 X-Lori 헤더는 Pre-flighted 요청을 트리거해야 합니다.그렇지 않아요.
서버측에서 작업을 해야 합니다.서버측에서 PHP를 사용하고 있는 것을 알 수 있습니다만, 솔루션에서는 솔루션을 사용하고 있습니다.NET 웹 응용 프로그램이 있습니다. jQuery.ajax에서 content-type을 'application/json'으로 설정할 수 없습니다.
PHP 스크립트에서 동일한 작업을 수행하면 작동합니다.심플:첫 번째 요청 브라우저는 서버에 이러한 유형의 데이터를 전송할 수 있는지 여부를 묻고 두 번째 요청은 적절한지/허용되는지 확인합니다.
다음을 추가해 보십시오.
dataType: "json",
ContentType: "application/json",
data: JSON.stringify({"method":"getStates", "program":"EXPLORE"}),
다른 서버에서 호스팅되는 Apache Solr에 데이터를 게시하고 싶을 때 프록시 URL을 사용하여 유사한 문제를 해결했습니다. (완벽한 답변은 아닐 수 있지만 문제가 해결됩니다.)
다음 URL을 따릅니다.프록시에 Mode-Rewrite를 사용하여 다음 행을 httpd.conf에 추가합니다.
RewriteRule ^solr/(.*)$ http://ip:8983/solr$1 [P]
따라서 http://ip:8983/solr/*에 데이터를 게시하는 대신 /solr에 데이터를 게시할 수 있습니다.그러면 같은 출처의 데이터를 게시하게 됩니다.
저는 이미 이 코드를 사용하여 cors 상황을 php로 잘 처리하고 있습니다.
header( 'Access-Control-Allow-Origin: '.CMSConfig::ALLOW_DOMAIN );
header( 'Access-Control-Allow-Headers: '.CMSConfig::ALLOW_DOMAIN );
header( 'Access-Control-Allow-Credentials: true' );
로컬 및 리모트에서는 정상적으로 동작하고 있었지만, 리모트에서는 업로드 할 수 없었습니다.
apache/php 또는 내 코드에 무슨 문제가 생겼다면 굳이 검색하지 않고 OPTIONS를 요청하면 cors rule로 내 헤더를 반환하지만 결과는 302입니다.따라서 내 브라우저는 허용 가능한 상황으로 인식되지 않습니다.
@Mark McDonald의 답변에 근거해, 내가 한 것은, 내 헤더 뒤에 다음의 코드를 넣는 것뿐이다.
if( $_SERVER['REQUEST_METHOD'] === 'OPTIONS' )
{
header("HTTP/1.1 202 Accepted");
exit;
}
,를 때, 청청 now now 。OPTIONS
202번입니다.
주의해 주십시오.
JSONP는 GET 요구 방식만 지원합니다.
* Firefox로 요청 전송:*
$.ajax({
type: 'POST',//<<===
contentType: 'application/json',
url: url,
dataType: "json"//<<=============
...
});
위의 요청은 OPTIONS(옵션)를 통해 전송됩니다(유형: 'POST').!!!
$.ajax({
type: 'POST',//<<===
contentType: 'application/json',
url: url,
dataType: "jsonp"//<<==============
...
});
하지만 위의 요청은 GET으로 발송됩니다(단, ==> 유형: 'POST').!!!
「크로스 도메인 통신」의 경우는, 주의해 주세요.
언급URL : https://stackoverflow.com/questions/1099787/jquery-ajax-post-sending-options-as-request-method-in-firefox
'programing' 카테고리의 다른 글
jQuery가 Ajax 콜이 종료될 때까지 대기하도록 하려면 어떻게 해야 합니까? (0) | 2023.02.10 |
---|---|
AngularJS: 문자열에서 HTML 삽입 (0) | 2023.02.10 |
CSRF와 Django, React+Redux(Axios 사용) (0) | 2023.02.10 |
WordPress REST API 글로벌 검색(API V2) (0) | 2023.02.10 |
오류: [ngModel:datefmt] 2015-05-29가 예상됨T19:06:16.693209Z가 날짜로 지정됨 - 각도 (0) | 2023.02.10 |