나는 Jquery AJAX를 사용하여 서드파티 API에 전화를 걸었다. 콘솔에서 다음 오류가 발생합니다.
MIME 유형 응용 프로그램/json을 사용하여 CORB(교차 오리진 읽기 차단)가 교차 오리진 응답 *MY URL을 차단했습니다. 자세한 내용은 https://www.chromestatus.com/feature/5629709824032768을 참조하십시오.
Ajax 호출에 다음 코드를 사용했습니다.
$.ajax({
type: 'GET',
url: My Url,
contentType: 'application/json',
dataType:'jsonp',
responseType:'application/json',
xhrFields: {
withCredentials: false
},
headers: {
'Access-Control-Allow-Credentials' : true,
'Access-Control-Allow-Origin':'*',
'Access-Control-Allow-Methods':'GET',
'Access-Control-Allow-Headers':'application/json',
},
success: function(data) {
console.log(data);
},
error: function(error) {
console.log("FAIL....=================");
}
});
피들러에 체크인했을 때, 응답한 데이터는 있지만 Ajax 성공 방법에는 없습니다.
제발 좀 도와주세요.
데이터 형식:'jsonp',
당 JSONP 요청하지만,서버의 응답으로 JSON.
브라우저 거절하는 것을 치료하기 위해 노력 JSON 으로 JSONP 될 것이기 때문에 보안 위험이 있습니다. (경우에는 브라우저 할 수 있습니다.:*을 치료하기 위해 노력 JSON 으로 JSONP 음,최고,실패하).
볼이 질문에 대한 자세한 내용은 무엇 JSONP 입니다. 참고 불쾌한 해킹을 동일한 원산지는 정책을 사용하기 전에 CORS 사용할 수 있었습니다. CORS 은 훨씬 더 깨끗하고,안전하고,더 강력한 솔루션하는 문제입니다.
데 그것은 만들려고 십자가 원산지 요청에 던지고 모든 것을 생각할 수 있습에서 그것은 하나의 거대한 더미의 충돌하는 지침.
는 방법을 이해할 필요가있는 동일한 원산지 정책을 작동합니다.
볼이 질문에 대한 심층적인 안내서입니다.
지금 몇 가지에 관한 사항 코드:
contentType:'응용 프로그램/json',
이를 무시할 때 사용 JSONP 당신이 만드는 GET 요청을 합니다. 가 없는 요청체 형식을 설명합니다. *이 십자가 원래 요청한 간단한 의미하는 것 뿐만 아니라 기본적인 CORS 권한,당신은 또한 필요를 다루 pre-공합니다.
제니다.
데이터 형식:'jsonp',
*서버에 응답하지 않으로 JSONP.
제거이다. (당신은 서버 응답 JSONP 대신하지만,CORS 은 더 낫다).
responseType:'응용 프로그램/json',
이 옵션을 지원하는 jQuery.ajax. 제거이다.
xhrFields:{ withCredentials:false},
기본값이다. 지 않는 한 당신이 그것을 설정하는 사실과 함께 ajaxSetup,제거한다.
headers:{ '스-을 적용하지':true, '액세스 제어할 수 있 원산지':'*', '액세스 제어-Allow-방':'얻', '액세스 제어-Allow-Headers':'응용 프로그램/json', },
이들은 응답 헤더로 보낸다. 그 속에 응답하지 않습니다. 이 십자가 원래 요청한 간단한 의미하는 것 뿐만 아니라 기본적인 CORS 권한,당신은 또한 필요를 다루 pre-공합니다.
대부분의 경우 차단된 응답이 웹 페이지의 동작에 영향을 미치지 않아야 하며 CORB 오류 메시지는 안전하게 무시될 수 있습니다. 예를 들어, 차단된 응답의 본문이 이미 비어 있거나 응답이 이를 처리할 수 없는 컨텍스트로 전달될 예정일 때 경고가 발생할 수 있습니다(예: 404 오류 페이지가 태그로 전달됨).
https://www.chromium.org/Home/chromium-security/corb-for-developers
브라우저 캐시를 정리해야 했고, 이 링크에서 읽었는데, 요청이 빈 응답을 받으면 이 경고 오류가 발생합니다. 저는 제 요청으로 CORS를 받고 있었고, 그래서 이 요청의 응답은 공허해졌습니다. 제가 해야 할 일은 브라우저의 캐시를 지우는 것이었고, CORS는 도망쳤습니다. 크롬이 캐시에 포트 번호를 저장해놨기 때문에 CORS를 받았는데 서버는 localhost:3010만 받고 저는 cache 때문에 localhost:3002를 하고 있었습니다.
서버 측에서 CORS를 추가해야 합니다.
노드를 사용하는 경우JS 그렇다면:
먼저 아래 명령을 사용하여 *** 'cors'를 설치해야 합니다.
npm install cors --save
이제 *다음 코드를 ('app.js 또는 server.js')와 같은 앱 시작 파일에 추가하십시오.
var express = require('express');
var app = express();
var cors = require('cors');
var bodyParser = require('body-parser');
//enables cors
app.use(cors({
'allowedHeaders': ['sessionId', 'Content-Type'],
'exposedHeaders': ['sessionId'],
'origin': '*',
'methods': 'GET,HEAD,PUT,PATCH,POST,DELETE',
'preflightContinue': false
}));
require('./router/index')(app);
It's 에서 명확하지 않은 질문,하지만 가정에서 일어나는 일이 있 개발 또는 테스트,클라이언트는 주어진 이미 사용하고 있다 Fiddler 할 수 있습 Fiddler 응답으로 허용 응답:
선택 문제 요청에 Fiddler
을 열고자동 응답 탭 *클릭하여 추가 규칙 및 규칙을 편집: *방법:옵션*서버는 url 여기*,예를 들어
방법:옵션 http://localhost *
CORSPreflightAllow`
확인타의 추종을 불허 요청 패스 스루
*확인 사용규칙
몇 사항:
그것은 보인다는 경고가 발생했을 보낼 때 빈 응답이 200.
이 구성에서 나.htaccess
표시에 경고 Chrome:
Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST,GET,HEAD,OPTIONS,PUT,DELETE"
Header always set Access-Control-Allow-Headers "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, Authorization"
RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule .* / [R=200,L]
하지만 변화하는 마지막 줄을
RewriteRule .* / [R=204,L]
문제를 해결!
거기에는 가장자리의 경우는 언급 할 가치가있 컨텍스트에서 크롬(일부 버전,최소)검사 CORS preflights 알고리즘을 사용하여 설정한 CORB. IMO,이 비트이기 때문에 어리석은 preflights don't 에 영향을 미치는 것으로 보이 CORB 위협이 모델,그리고 CORB 것으로 보인다는 것을 직교 CORS. 또한,몸의 CORS 전에 액세스 할 수 없습니다,그래서 거기에는 부정적인 결과는 자극적 경고입니다.
어쨌든,는지 확인 CORS preflight 응답이(옵션 방법 응답)지't 몸이(204). 빈 200content type 이 application/octet-stream 과 길이로 잘했습니다.
지 확인할 수 있습니다 이 경우 당신은 당신을 타격하여 계산 CORB 경고 대 옵션에 응답 메시지와 함께 몸입니다.
에서 크롬 확장 프로그램 사용할 수 있습니다
chrome.webRequest.onHeadersReceived.addListener
다시 작성하는 서버의 응답 헤더로 보낸다. 할 수 있는 바꾸거나 기존 헤더에 추가하거나 추가 헤더가 있습니다. 이것은 헤더가 당신이 원하는:
Access-Control-Allow-Origin: *
https://developers.chrome.com/extensions/webRequest#event-onHeadersReceived
에 CORB 문제,그리고 이것을 고정한다.
십자가 원산지 읽 차단(CORB),알고리즘으로는 반신반의 십자가 원산지 자원이 부 확인될 수 있습니다 차단하여 웹 브라우저에 도달하기 전에 웹 페이지에..그것은 것을 방지하도록 설계되어 있습 브라우저에서 제공하는 특정 크로스 근원 네트워크 응답 웹 페이지입니다.
먼저 확인 이러한 리소스와 함께 제공이 올바른"Content-Type
"i.e,JSON MIME 형식"text/json
","응용 프로그램/json
",HTML MIME 형식"text/html
".
두 번째:설정 모드를 cors i.전자,모드:cors
Fetch 는 다음과 같이 보일 것이다
fetch("https://example.com/api/request",{ 방법:'게', 체:JSON.변환(data), 모:'cors', 헤더:{ 'Content-Type':'응용 프로그램/json', "받":'응용 프로그램/json', } }) .다음((data)=>data.json()) .다음((resp)=>console.로그(resp)) .catch((err)=>console.로그(err))
https://www.chromium.org/Home/chromium-security/corb-for-developers
응답 헤더는 일반적으로 서버에서 설정됩니다. 서버 측에서 '액세스-제어-허용-헤더'를 '콘텐츠 유형'으로 설정
가 동일한 문제와 내 Chrome extension. When I tried to manifest"content_scripts"옵션이 부:
//{
// "matches": [ "<all_urls>" ],
// "css": [ "myStyles.css" ],
// "js": [ "test.js" ]
//}
고 제거 다른 부분에서 내 manifest"사용 권":
"https://*/"
경우에만 나는 삭제 CORB 에서 하나의 제 XHR reqest disappare.
최악의 모든 것을 몇 가지 XHR reqest 내 코드와 그 중 하나를 얻기 위해 시작 CORB 오류가(왜 CORB 지 않 appare 에 다른 XHR 나는 알지 못한다;이유는 매니페스트의 변화 coused 이 오류는지 모르겠). 는's 왜 내가 검사 전체 코드에 의해 또 다시는 몇 시간이고 손실이 많은 시간입니다.
당신이 그것을 할 경우에서 사파리 이 시간이 필요하지 않습니다,단지 사용자 메뉴에서 설>>개인 정보 보호,그리고를 선택 해제"Disable 십자가 원산지 제한 사항"에서 개발하는 메뉴입니다. 당신이 원하는 경우 현지만,그때만 사용자 메뉴를 선택하고"Disable 로컬 파일 제한 사항"에서 개발하는 메뉴입니다.
과 크롬에서 OSX 터미널 및 실행
$ open -a Google\ Chrome --args --disable-web-security --user-data-dir
-사용자 데이터 dir 에 필요한 크롬 49+에 OSX
리눅스를 위해 실행:
$ google-chrome --disable-web-security
또한 당신이'다시스에 액세스하려는 로컬 파일에 대한 dev 같은 목적으로 AJAX 또는 JSON 사용할 수 있습니다 이래도.
-–allow-file-access-from-files
Windows 를 위한 이동으로 명령 프롬프트 및으로 이동 폴더 Chrome.exe 은 유형
chrome.exe --disable-web-security
는 사용하지 않도록 설정해야 합 같은 원산지 정책을 액세스 할 수 있도록 지역 파일이 있습니다.