교차 오리진 읽기 차단(CORB)

나는 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 성공 방법에는 없습니다.

제발 좀 도와주세요.

sideshowbarker
편집된 질문1일 7월 2018 в 4:27
프로그래밍
javascript jquery ajax cors cross-origin-read-blocking
15일 6월 2018 в 10:29
392 파운드
질문에 대한 의견 (4)

데이터 형식:'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-공합니다.

해설 (0)

대부분의 경우 차단된 응답이 웹 페이지의 동작에 영향을 미치지 않아야 하며 CORB 오류 메시지는 안전하게 무시될 수 있습니다. 예를 들어, 차단된 응답의 본문이 이미 비어 있거나 응답이 이를 처리할 수 없는 컨텍스트로 전달될 예정일 때 경고가 발생할 수 있습니다(예: 404 오류 페이지가 태그로 전달됨).

https://www.chromium.org/Home/chromium-security/corb-for-developers

브라우저 캐시를 정리해야 했고, 이 링크에서 읽었는데, 요청이 빈 응답을 받으면 이 경고 오류가 발생합니다. 저는 제 요청으로 CORS를 받고 있었고, 그래서 이 요청의 응답은 공허해졌습니다. 제가 해야 할 일은 브라우저의 캐시를 지우는 것이었고, CORS는 도망쳤습니다. 크롬이 캐시에 포트 번호를 저장해놨기 때문에 CORS를 받았는데 서버는 localhost:3010만 받고 저는 cache 때문에 localhost:3002를 하고 있었습니다.

Alex
편집된 답변6일 2월 2019 в 12:42
해설 (0)

반 응답 헤더를'액세스 제어할 수 있 출처:*' 체크인 코드 아래에 Php 서버 응답입니다.

<?php header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json');
echo json_encode($phparray);
해설 (2)

서버 측에서 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);
Shubham Verma
편집된 답변7일 9월 2018 в 7:21
해설 (7)

에서 작업하는 경우 localhost,이 시도하고,이 중 하나만을 확장하는 방법 나를 위해 일했다(각지,자바스크립트만 없 php)

https://chrome.google.com/webstore/detail/moesif-orign-cors-changer/digfbfaphojjndkpccljibejjbppifbc/related?hl=en

해설 (1)

It's 에서 명확하지 않은 질문,하지만 가정에서 일어나는 일이 있 개발 또는 테스트,클라이언트는 주어진 이미 사용하고 있다 Fiddler 할 수 있습 Fiddler 응답으로 허용 응답:

선택 문제 요청에 Fiddler 을 열고자동 응답 탭 *클릭하여 추가 규칙 및 규칙을 편집: *방법:옵션*서버는 url 여기*,예를 들어방법:옵션 http://localhost *CORSPreflightAllow` 확인타의 추종을 불허 요청 패스 스루 *확인 사용규칙

몇 사항:

  1. 물론 이것은 단지 솔루션 개발에 대한 테스트는 그것을 아't 한/실질적인 수정하 API 서비스
  2. 검사는 어떤 계약과 제삼자 API 를 공급자 할 수 있도록 이
  3. 한 이 방법의 일부 CORS 작동하고,결국 헤더를 설정할 필요가 API 서버입니다. 는 경우에 당신을 제어하는 서버,당신은 설정할 수 있습니다글 자신입니다. 이 경우에는 그 이후 세 번째 파티 서비스,나는 가정 할 수 있습니다 그들은 일부 메커니즘을 통해 당신을 제공할 수 있으로 그들의 URL 을 원래 사이트와 그들 것입 업데이트들의 서비스에 따라 응 헤더가 있습니다.
해설 (0)

당신은 시도 변경하는데이터 형식에서아약스에서 요청jsonp에서json? 는 그것을 고정합니다.

해설 (0)

그것은 보인다는 경고가 발생했을 보낼 때 빈 응답이 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]

문제를 해결!

해설 (0)

거기에는 가장자리의 경우는 언급 할 가치가있 컨텍스트에서 크롬(일부 버전,최소)검사 CORS preflights 알고리즘을 사용하여 설정한 CORB. IMO,이 비트이기 때문에 어리석은 preflights don't 에 영향을 미치는 것으로 보이 CORB 위협이 모델,그리고 CORB 것으로 보인다는 것을 직교 CORS. 또한,몸의 CORS 전에 액세스 할 수 없습니다,그래서 거기에는 부정적인 결과는 자극적 경고입니다.

어쨌든,는지 확인 CORS preflight 응답이(옵션 방법 응답)지't 몸이(204). 빈 200content type 이 application/octet-stream 과 길이로 잘했습니다.

지 확인할 수 있습니다 이 경우 당신은 당신을 타격하여 계산 CORB 경고 대 옵션에 응답 메시지와 함께 몸입니다.

해설 (0)

에서 크롬 확장 프로그램 사용할 수 있습니다

chrome.webRequest.onHeadersReceived.addListener

다시 작성하는 서버의 응답 헤더로 보낸다. 할 수 있는 바꾸거나 기존 헤더에 추가하거나 추가 헤더가 있습니다. 이것은 헤더가 당신이 원하는:

Access-Control-Allow-Origin: *

https://developers.chrome.com/extensions/webRequest#event-onHeadersReceived

에 CORB 문제,그리고 이것을 고정한다.

해설 (0)

십자가 원산지 읽 차단(CORB),알고리즘으로는 반신반의 십자가 원산지 자원이 부 확인될 수 있습니다 차단하여 웹 브라우저에 도달하기 전에 웹 페이지에..그것은 것을 방지하도록 설계되어 있습 브라우저에서 제공하는 특정 크로스 근원 네트워크 응답 웹 페이지입니다.

먼저 확인 이러한 리소스와 함께 제공이 올바른"Content-Type"i.e,JSON MIME 형식"text/json","응용 프로그램/json",HTML MIME 형식"text/html".

두 번째:설정 모드를 cors i.전자,모드:cors

Fetch 는 다음과 같이 보일 것이다

fetch("https://example.com/api/request",{ 방법:&#39;게&#39;, 체:JSON.변환(data), 모:&#39;cors&#39;, 헤더:{ &#39;Content-Type&#39;:&#39;응용 프로그램/json&#39;, "받":&#39;응용 프로그램/json&#39;, } }) .다음((data)=>data.json()) .다음((resp)=>console.로그(resp)) .catch((err)=>console.로그(err))

참고:https://chromium.googlesource.com/chromium/src/+/master/services/network/cross_origin_read_blocking_explainer.md

https://www.chromium.org/Home/chromium-security/corb-for-developers

해설 (0)

당신을 호출 할 수 없습니다 세 번째 파티 API 클라이언트에서 직접측(프론트 엔드)의의 코드입니다. 에 대한 호출해야 하는 변경에서 서버는 하지만 당신은 할 수 없습니다. 브라우저에서 당신을 얻을 것이 정상적으로 반응하지만에서 Js 코드에,당신은하지 않은 응답을 얻을. 이 링크를 시도하십시오 여기

해설 (0)

응답 헤더는 일반적으로 서버에서 설정됩니다. 서버 측에서 '액세스-제어-허용-헤더'를 '콘텐츠 유형'으로 설정

lifetimeLearner007
편집된 답변15일 6월 2018 в 10:57
해설 (3)

가 동일한 문제와 내 Chrome extension. When I tried to manifest"content_scripts"옵션이 부: 

//{
    //  "matches": [ "" ],
    //  "css": [ "myStyles.css" ],
    //  "js": [ "test.js" ]
    //}

고 제거 다른 부분에서 내 manifest"사용 권":

"https://*/"

경우에만 나는 삭제 CORB 에서 하나의 제 XHR reqest disappare.

최악의 모든 것을 몇 가지 XHR reqest 내 코드와 그 중 하나를 얻기 위해 시작 CORB 오류가(왜 CORB 지 않 appare 에 다른 XHR 나는 알지 못한다;이유는 매니페스트의 변화 coused 이 오류는지 모르겠). 는's 왜 내가 검사 전체 코드에 의해 또 다시는 몇 시간이고 손실이 많은 시간입니다.

해설 (1)

당신이 그것을 할 경우에서 사파리 이 시간이 필요하지 않습니다,단지 사용자 메뉴에서 설>>개인 정보 보호,그리고를 선택 해제"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

는 사용하지 않도록 설정해야 합 같은 원산지 정책을 액세스 할 수 있도록 지역 파일이 있습니다.

joshkmartinez
편집된 답변28일 12월 2018 в 9:52
해설 (0)

설치하려고 하"Moesif CORS"확장을 직면하는 경우 문제 in google chrome. 그것은 십자가 원산지 요청,그래서 chrome 수락하지 않은 응답을 때에도 응답 상태 코드가 200

해설 (0)

저는 이 문제가 발생하기 때문에 포맷의 jsonp 대응 서버에서는 잘못된 것입니다. 잘못된 응답은 다음과 같습니다.

콜백([아","복숭아"])

문제,객체 내부에콜백해야 정확한 json 대 json 배열입니다. 그래서 나는 수정이 일부 서버 코드 및 변경된 형식:

콜백({"fruit":[아","복숭아"]})

브라우저 행복하게 받아들이 응답한 후에 수정할 수 있습니다.

해설 (1)