programing

CORB(Cross-Origin Read Blocking)

testmans 2023. 2. 24. 13:21
반응형

CORB(Cross-Origin Read Blocking)

Jquery AJAX를 사용하여 서드파티 API를 호출했습니다.콘솔에 다음 오류가 나타납니다.

CORB(Cross-Origin Read Blocking)가 MIME 유형 응용 프로그램/json을 사용하여 교차 오리진 응답 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....=================");
  }
});

Fiddler에 체크인 했을 때, Ajax 성공 방법은 아니지만 응답으로 데이터를 받았습니다.

제발 도와주세요.

 dataType:'jsonp',

JSONP 요청을 하고 있는데 서버가 JSON으로 응답하고 있습니다.

브라우저는 보안상의 위험이 있기 때문에 JSON을 JSONP로 취급하는 것을 거부하고 있습니다(브라우저가 JSON을 JSONP로 취급하려고 하면 기껏해야 실패합니다).

JSONP에 대한 자세한 내용은 다음 질문을 참조하십시오.CORS가 나오기 전에 사용되었던 동일한 원산지 정책을 회피하는 것은 고약한 해킹이라는 점에 유의하십시오.CORS는 이 문제에 대한 훨씬 더 깨끗하고 안전하며 강력한 해결책입니다.

당신은 교차 출처를 요청하려고 하는 것 같고, 당신이 생각할 수 있는 모든 것을 하나의 거대한 명령 더미에 던져넣고 있는 것처럼 보입니다.

동일한 오리진 정책의 작동 방식을 이해해야 합니다.

자세한 내용은 이 질문을 참조하십시오.

다음은 코드에 대한 몇 가지 참고 사항입니다.

contentType: 'application/json',
  • 이것은 JSONP를 사용하는 경우 무시됩니다.
  • GET 요청을 하고 있습니다.유형을 설명하는 요청 본문이 없습니다.
  • 이것에 의해, 크로스 오리진 요구가 간단하지 않게 됩니다.즉, 기본적인 CORS 허가와 함께, 비행 전 대응도 필요하게 됩니다.

그거 치워.

 dataType:'jsonp',
  • 서버가 JSONP로 응답하지 않습니다.

이것을 삭제합니다.(서버가 대신 JSONP로 응답하도록 할 수 있지만 CORS가 더 좋습니다.)

responseType:'application/json',

이는 jQuery.ajax에서 지원되지 않는 옵션입니다.이것을 제거해 주세요.

xhrFields: { with Credentials: false},

이것이 기본값입니다.ajaxSetup에서 true로 설정하지 않는 한 이 항목을 제거합니다.

  headers: {
    'Access-Control-Allow-Credentials' : true,
    'Access-Control-Allow-Origin':'*',
    'Access-Control-Allow-Methods':'GET',
    'Access-Control-Allow-Headers':'application/json',
  },
  • 응답 헤더입니다.그들은 요청이 아닌 응답에 속합니다.
  • 이것에 의해, 크로스 오리진 요구가 간단하지 않게 됩니다.즉, 기본적인 CORS 허가와 함께, 비행 전 대응도 필요하게 됩니다.

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

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

브라우저의 캐시를 청소해야 했습니다.이 링크를 읽고 있었는데, 요청이 빈 응답을 받으면 이 경고 오류가 발생합니다.제 요청으로 CORS를 받았기 때문에, 이 요청의 답변은 비어 버렸습니다. 제가 해야 할 일은 브라우저의 캐시를 지우는 것뿐이었고, CORS는 도망쳤습니다.는 「PORT」를 받아들이기만 .서버는 그냥 받아 들였습니다.localhost:3010는 ㅇㅇㅇㅇㅇㅇㅇㅇㅇ를 하고 있었다.localhost:3002캐시 때문입니다.

'Access-Control-Allow-Origin' 헤더가 포함된 응답을 반환합니다.*' Php 서버 응답은 아래 코드를 확인하십시오.

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

서버 측에 CORS를 추가해야 합니다.

노드를 사용하는 경우그러면 JS:

먼저 설치해야 합니다. cors다음 명령을 사용합니다.

npm install cors --save

이제 앱 시작 파일에 다음과 같은 코드를 추가하십시오( ).app.js or 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);

질문에서는 명확하지 않지만, 개발 또는 테스트 클라이언트에서 발생한 일이라고 가정하고, 이미 Fiddler를 사용하고 있는 것을 고려하면 Fiddler가 허용 응답으로 응답하도록 할 수 있습니다.

  • Fiddler에서 문제 요청을 선택합니다.
  • '열다'를 열어보세요.AutoResponder
  • [ ] 를 합니다.Add Rule규칙을 편집하여 다음을 수행합니다.
    • 방법: OPTIONS 서버의 URL을 입력합니다(예:Method:OPTIONS http://localhost
    • *CORSPreflightAllow
  • 마크를 켜주세요.Unmatched requests passthrough
  • 마크를 켜주세요.Enable Rules

몇 가지 주의:

  1. 이는 API 서비스를 수정할 수 없는 개발/테스트용 솔루션일 뿐입니다.
  2. 서드파티 API 프로바이더와 체결한 계약이 이를 가능하게 하는지 확인합니다.
  3. 다른 사람들이 지적한 바와 같이 이것은 CORS 동작의 일부이며, 최종적으로 API 서버에서 헤더를 설정해야 합니다.해당 서버를 제어할 경우 헤더를 직접 설정할 수 있습니다.이 경우 서드파티 서비스이기 때문에 발신 사이트의 URL을 제공할 수 있는 메커니즘이 있을 것으로 생각되며, 그에 따라 올바른 헤더로 응답하도록 서비스를 갱신합니다.

localhost에서 작업하는 경우 이 확장자 및 메서드는 이것뿐입니다(Angular, only javascript, no php).

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

Chrome 확장에서는 다음을 사용할 수 있습니다.

chrome.webRequest.onHeadersReceived.addListener

서버 응답 헤더를 다시 씁니다.기존 헤더를 바꾸거나 헤더를 추가할 수 있습니다.원하는 헤더는 다음과 같습니다.

Access-Control-Allow-Origin: *

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

나는 CORB 문제에 얽매여 있었고, 이것으로 해결되었다.

'를 요?dataType당신의 아약스 요청으로jsonp로로 합니다.json제 경우엔 해결됐죠

이 맥락에서 언급할 가치가 있는 엣지 케이스가 있습니다.크롬(최소한 일부 버전)은 CORB용으로 설정된 알고리즘을 사용하여 CORS 프리플라이를 체크합니다.IMO, 이건 좀 바보같은데요, 왜냐하면 비행 전은 CORB 위협 모델에 영향을 주지 않고 CORB는 CORS와 직교하도록 설계되어 있기 때문입니다.또, CORS 프리플라이의 본체에는 접근할 수 없기 때문에, 자극적인 경고만으로 악영향은 없습니다.

어쨌든, 당신의 CORS 비행 전 응답(OPTIONS method 응답)에 본체가 없는지 확인합니다(204).content type application/octet-stream 및 length 0을 가진 빈 200도 여기서 정상적으로 동작했습니다.

메시지 본문을 사용하여 CORB 경고와 OPTIONS 응답을 카운트함으로써 이 경우 여부를 확인할 수 있습니다.

이 경고는 빈 응답을 200으로 전송했을 때 발생한 것으로 보입니다.

은, 「」의 설정입니다..htaccessChrome chrome chrome 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]

문제를 해결하세요!

저도 비슷한 문제가 있어요.제 경우는 그 내용이서버 응답 유형은 text/javascript가 아닌 application/json입니다.

서버(봄 MVC)에서 해결합니다.

// http://127.0.0.1:8080/jsonp/test?callback=json_123456
    @GetMapping(value = "/test")
    public void testJsonp(HttpServletRequest httpServletRequest,
                          HttpServletResponse httpServletResponse,
                          @RequestParam(value = "callback", required = false) String callback) throws IOException {
        JSONObject json = new JSONObject();
        json.put("a", 1);
        json.put("b", "test");
        String dataString = json.toJSONString();

        if (StringUtils.isBlank(callback)) {
            httpServletResponse.setContentType("application/json; charset=UTF-8");
            httpServletResponse.getWriter().print(dataString);
        } else {
            // important: contentType must be text/javascript
            httpServletResponse.setContentType("text/javascript; charset=UTF-8");
            dataString = callback + "(" + dataString + ")";
            httpServletResponse.getWriter().print(dataString);
        }
    }

응답 헤더는 일반적으로 서버에서 설정됩니다. ★★'Access-Control-Allow-Headers'로로 합니다.'Content-Type'

제 크롬 확장에도 같은 문제가 있었습니다.매니페스트 "content_scripts" 옵션에 추가하려고 했을 때 이 부분은 다음과 같습니다.

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

그리고 나는 나의 명백한 "허락"에서 다른 부분을 삭제한다.

"https://*/"

내 XHR 요구 사항 중 하나에서 CORB를 삭제했을 때만.

가장 나쁜 점은 코드에 XHR 요구 사항이 거의 없고 그 중 1개만 CORB 오류가 발생한다는 것입니다(CORB가 다른 XHR에 적용되지 않는 이유, 매니페스트 변경 사항이 이 오류를 야기하는 이유).그래서 코드 전체를 몇 시간씩 몇 번이고 반복해서 검사했는데 많은 시간을 허비했어요.

서버로부터의 jsonp 응답 형식이 잘못되어 이 문제가 발생하였습니다.잘못된 응답은 다음과 같습니다.

callback(["apple", "peach"])

문제는 안에 있는 물체가callbackjson 배열이 아닌 올바른 json 개체여야 합니다.그래서 서버 코드를 수정하고 형식을 변경했습니다.

callback({"fruit": ["apple", "peach"]})

브라우저는 수정 후 응답을 기쁘게 받아들였습니다.

구글 크롬에 문제가 있는 경우 "Moesif CORS" 확장을 설치해 보십시오.크로스 오리진 요청이라 응답 상태 코드가 200이어도 크롬은 응답을 받지 않습니다.

언급URL : https://stackoverflow.com/questions/50873764/cross-origin-read-blocking-corb

반응형

'programing' 카테고리의 다른 글

Angular HttpClient "해석 중 Http 오류"  (0) 2023.02.24
AngularJS를 명시적으로 지원하는 IDE가 있습니까?  (0) 2023.02.24
환경 변수로 JSON 내보내기  (0) 2023.02.24
봄에는 index.html의 모든 루트를 캐치합니다.  (0) 2023.02.24
Wordpress는 slug와 함께 분류법 이름을 가져옵니다.  (0) 2023.02.24

'programing'의 다른글

  • 현재글CORB(Cross-Origin Read Blocking)

관련글

댓글

티스토리툴바