가져오기 및 전달 모드 사용 시도 중: no-cors

가져오기 및 전달 모드 사용 시도 중: no-cors

이 엔드포인트, 「 」를 칠 수 있다.http://catfacts-api.appspot.com/api/facts?number=99됩니다.JSON

또한 create-react-app을 사용하고 있으며 서버 설정을 피하고 싶습니다.

코드에서 는 라라언 i i i i i in i in in in in in in in in in를 사용하려고 합니다.fetch동일한 작업을 수행하는데 오류가 발생합니다.

요청된 리소스에 'Access-Control-Allow-Origin' 헤더가 없습니다.따라서 오리진 'http://localhost:3000'은 액세스가 허용되지 않습니다.불투명한 응답이 요구에 적합한 경우 요청 모드를 'no-cors'로 설정하여 CORS가 비활성화된 상태로 리소스를 가져옵니다.

그래서 다음과 같이 CORS를 비활성화하는 객체를 Fetch에 전달하려고 합니다.

fetch('http://catfacts-api.appspot.com/api/facts?number=99', { mode: 'no-cors'})
  .then(blob => blob.json())
  .then(data => {
    console.table(data);
    return data;
  })
  .catch(e => {
    console.log(e);
    return e;
  });

흥미롭게도 이 함수의 구문 오류입니다. ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★.fetch{mode: 'no-cors' } 개체를 삭제하고 다른 URL로 지정하면 정상적으로 동작하기 때문에 이 오류가 발생합니다.

도 그 하려고 했다.{ mode: 'opaque'} 에러가 됩니다.

난 내가 해야 할 일은 CORS를 무력화하는 것뿐이라고 믿는다.제가 무엇을 빠뜨리고 있나요?

mode: 'no-cors'마법처럼 일이 잘 풀리진 않을 거야실제로 상황을 악화시키는 한 가지 효과는 브라우저에 "모든 상황에서 응답 본문과 헤더의 내용을 볼 수 없도록 프런트엔드 자바스크립트 코드를 차단하라"고 지시하는 것입니다.물론 넌 절대 그걸 원하지 않아.

프런트 엔드 JavaScript로부터의 크로스 오리진 요구는 브라우저가 디폴트로 프론트 엔드 코드가 크로스 오리진 리소스에 액세스하는 것을 차단하는 것입니다. ifAccess-Control-Allow-Origin그러면 브라우저는 차단이 해제되고 코드가 응답에 액세스할 수 있습니다.

, 에서 「」가 되지 않는 는, 「」로 합니다.Access-Control-Allow-Origin프런트 엔드 코드는, 그 사이트의 응답에 직접 액세스 할 수 없습니다. ,, 를, ifying, ifying, ifying, 이, 습, 습, 습, ifying, ifying, ifying, ifying, ifying, ifying, ifying, ifying, ifying, , ifying, , ifyingmode: 'no-cors'(프런트 엔드 코드가 응답 내용에 액세스 할 수 없게 됩니다).

단, 한 가지는 유효합니다.CORS 대리인을 통해 요청을 보내주시면 됩니다.

또한 5개의 명령어를 사용하여 사용자 자신의 프록시를 Heroku에 2~3분 만에 쉽게 배포할 수 있습니다.

git clone https://github.com/Rob--W/cors-anywhere.git
cd cors-anywhere/
npm install
heroku create
git push heroku master

명령어를 CORS Anywhere에서 독자적인 됩니다.https://cryptic-headland-94862.herokuapp.com/.

요청 URL 앞에 프록시 URL을 붙입니다.다음은 예를 제시하겠습니다.

https://cryptic-headland-94862.herokuapp.com/https://example.com

프록시 URL을 프리픽스로 추가하면 프록시를 통해 요구가 이루어집니다.이러한 요구는 다음과 같습니다.

1. 을 '하다'로 전송합니다.https://example.com.
2. 을 수신하다https://example.com.
3. 더합니다.Access-Control-Allow-Origin응답에 대한 헤더입니다.
4. 추가된 헤더를 포함한 응답을 요구 프런트엔드 코드로 되돌립니다.

후 할 수 은, 「」를 가지는 이 「」를 것이기 때문입니다.그 이유는 이 응답에 대한Access-Control-Allow-Origin입니다.response header는 "response header"입니다.

가 CORS 실행을 합니다.OPTIONS는 "Drught"를 .Access-Control-Allow-Headers ★★★★★★★★★★★★★★★★★」Access-Control-Allow-Methods필요한 헤더를 지정합니다.

---

이 엔드포인트, 「 」를 칠 수 있다.http://catfacts-api.appspot.com/api/facts?number=99

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS는 응답에 Postman을 사용하여 접근할 수 있지만 브라우저는 응답에 다음 응답이 포함되지 않는 한 웹 앱에서 실행되는 프런트엔드 자바스크립트 코드에서 크로스오버된 응답에 액세스할 수 없도록 하는 이유를 설명합니다.Access-Control-Allow-Origin응답 헤더

http://catfacts-api.appspot.com/api/facts?number=99에는 없습니다.Access-Control-Allow-Origin응답 헤더이므로 프런트 엔드 코드가 교차 응답에 액세스할 수 없습니다.

브라우저는 응답을 잘 받아 Postman이나 브라우저 devtools에서도 볼 수 있지만 브라우저가 코드에 노출되는 것은 아닙니다., 안 돼, 안 돼, 안 돼, 안 돼, 안 돼.Access-Control-Allow-Origin.그 대신 프록시를 사용하여 취득해야 합니다.

는 해당후 "이렇게 하다"를 합니다.Access-Control-Allow-Origin응답 헤더 및 기타 필요한 CORS 헤더를 지정한 후 요청 코드로 되돌립니다. 그 은 ★★★★★★★★★★★★★★★★★★★★★★★★★★」Access-Control-Allow-Originheader added는 브라우저에 표시되는 것이므로 브라우저는 프런트엔드 코드를 실제로 응답에 액세스할 수 있습니다.

---

그래서 CORS를 무효로 하는 Fetch에 오브젝트를 전달하려고 합니다.

그러고 싶진 않겠지확실히 하자면, 「CORS 를 무효로 한다」라고 하는 것은, 실제로는 같은 발신기지 정책을 무효로 하는 것을 의미하는 것 같습니다.CORS 자체는 실제로 그것을 실현하는 방법입니다.CORS는 같은 기원의 정책을 완화하는 방법이지, 그것을 제한하는 방법이 아닙니다.

그러나 어쨌든 로컬 환경에서는 보안을 해제하고 안전하지 않게 실행하기 위해 브라우저 런타임 플래그를 지정하거나 브라우저 확장을 로컬로 설치하여 동일한 원본 정책을 회피할 수 있습니다. 그러나 이 경우 로컬에서만 상황이 변경됩니다.

로컬에서 무엇을 변경하든 앱을 사용하려는 다른 사용자는 여전히 동일한 원본 정책을 적용하므로 앱의 다른 사용자에 대해 이를 비활성화할 수 없습니다.

몇 가지 제한적인 경우를 제외하고는 실제로 사용하고 싶지 않을 가능성이 높으며, 그 경우에도 자신이 무엇을 하고 있는지, 어떤 효과가 있는지 정확히 알고 있는 경우에만 사용할 수 있습니다.그 이유는 어떤 설정이mode: 'no-cors'는 브라우저에 대해 "모든 상황에서 응답 본문과 헤더의 내용을 볼 수 없도록 프런트 엔드 자바스크립트 코드를 차단합니다."라고 말합니다.대부분의 경우 그것은 확실히 당신이 원하는 것이 아니다.

---

이 기능을 사용하는 것을 검토하고 싶은 경우mode: 'no-cors'불투명 응답에 적용되는 제한 사항은 무엇입니까?의 답변을 참조하십시오.자세한 것은, 을 참조해 주세요.요점은 다음과 같습니다.

• JavaScript를 를 JavaScript에 하는 <script>,<link rel=stylesheet>,<img>,<video>,<audio>,<object>,<embed> , 「」<iframe>에서는 자원 이 허용되기 , 어떠한 이 자원 를 「」( 「」)로서 그렇게 할 수 .href ★★★★★★★★★★★★★★★★★」src아트리뷰트

• 리소스를 캐시하는 작업만 수행하려는 경우.불투명한 응답에 적용되는 제한 사항은 무엇입니까?에서 언급한 바와 같이 실제로는 서비스 워커를 사용하는 시나리오입니다. 이 시나리오에서 관련된 API는 Cache Storage API입니다.

그러나 이러한 제한된 경우에도 주의해야 할 몇 가지 중요한 문제가 있습니다. "불투명한 응답에 적용되는 제한 사항은 무엇입니까?"의 답변을 참조하십시오.자세한 것은, 을 참조해 주세요.

---

도 그 하려고 했다.{ mode: 'opaque'}

'opaque'mode : " " " " 입니다.opaque는 응답 속성일 뿐이며 브라우저는 이 불투명 속성을 다음과 같이 송신된 요청의 응답에 설정합니다.no-cors

그런데 덧붙여서 불투명이라는 단어는 여러분이 결국 얻게 되는 반응의 본질에 대한 매우 명확한 신호입니다. "opaque"는 여러분이 그 세부 사항을 볼 수 없다는 것을 의미하며, 여러분이 보는 것을 차단합니다.

저와 마찬가지로 Laravel API에서 데이터를 가져와 Vue 프런트 엔드에서 사용하려고 하는 로컬 호스트에서 웹 사이트를 개발하고 있으며, 이 문제를 해결한 방법은 다음과 같습니다.

1. 에서 명령어 Laravel을 합니다.php artisan make:middleware Cors .가 생성됩니다.app/Http/Middleware/Cors.php널 위해서.

2. 하다, 하다, 하다, 하다 안에 를 넣으세요.handlesCors.php:

   return $next($request)
       ->header('Access-Control-Allow-Origin', '*')
       ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
   

3. »app/Http/kernel.php 다음 $routeMiddleware 스위칭:

   ‘cors’ => \App\Http\Middleware\Cors::class
   

   에는 (다보다)와 같은 .auth,guest 이 , 작, 작, 작, 이, 이, 이, 이, etc, etc, etc, etc, etc, etc, etcapp/Http/kernel.php 이 있기 때문에kernel.php in (라벨)

4. 접근을 허용하는 모든 루트의 루트 등록에 다음과 같이 미들웨어를 추가합니다.

   Route::group(['middleware' => 'cors'], function () {
       Route::get('getData', 'v1\MyController@getData');
       Route::get('getData2', 'v1\MyController@getData2');
   });
   

5. 엔드에서는 이 를 Vue API로 .mounted()하고 있지 않다data() 꼭 . , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , .http:// ★★★★★★★★★★★★★★★★★」https:// 의 을 .fetch()discl.discl.discl을 클릭합니다.

피트 휴스턴의 블로그 기사에 대한 모든 공로를 인정합니다.

Express를 백엔드로 사용하는 경우 cors를 설치하고 app.use(cors();)에서 Import하여 사용해야 합니다.해결되지 않는 경우는, 포토를 스위칭 해 주세요.포트를 전환하면 반드시 해결됩니다.

매우 간단한 솔루션(설정까지2분 소요)은 로컬 ssl-proxy 패키지를 사용하는 것입니다.npm

이치노
합니다.1 . 패키지를 설치합니다. npm install -g local-ssl-proxy
중 2. 실행 중local-server로 the the the local-ssl-proxy --source 9001 --target 9000

추신: 교환--target 9000-- "number of your port" ★★★★★★★★★★★★★★★★★」--source 9001--source "number of your port +1"

또한 자체 호스팅된 CORS Anywhere 또는 관리 솔루션을 원하는 경우 Just CORS를 사용하여 CORS 헤더를 추가하는 역방향 프록시를 설정할 수도 있습니다.

https://justcors.com/<id>/<your-requested-resource>
http://cors-anywhere.com/<your-requested-resource>

localhost에서 이 문제를 일시적으로 해결하려는 경우 다음 크롬 확장을 사용할 수 있습니다.Allow CORS Access-Control-Allow-Origin https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf

솔루션은 서버 측에서 하는 것 뿐이었습니다.

는 C#C#을 요.WebClient(내 경우는 이미지 데이터)를 가져와 클라이언트에 반송하기 위한 라이브러리입니다.선택한 서버측 언어에도 유사한 언어가 있을 수 있습니다.

//Server side, api controller

[Route("api/ItemImage/GetItemImageFromURL")]
public IActionResult GetItemImageFromURL([FromQuery] string url)
{
    ItemImage image = new ItemImage();

    using(WebClient client = new WebClient()){

        image.Bytes = client.DownloadData(url);

        return Ok(image);
    }
}

자신의 사용 사례에 맞게 조정할 수 있습니다.은 ★★★★★★★★★★★★★★★.client.DownloadData()CORS ★★★★★★★★★★★★★★★★★★★★★」통상, CORS 의 문제는 Web 사이트간의 문제이기 때문에, 서버로부터 「크로스 사이트」를 요구해도 괜찮습니다.

React fetch 호출은 다음과 같이 간단합니다.

//React component

fetch(`api/ItemImage/GetItemImageFromURL?url=${imageURL}`, {            
        method: 'GET',
    })
    .then(resp => resp.json() as Promise<ItemImage>)
    .then(imgResponse => {

       // Do more stuff....
    )}

내 브라우저 디버거에서 내 응답을 말하는 것과 유사한 문제가 발생했습니다.body는 null이지만 fiddler와 개발자 툴은 body를 기본적으로 동일한 시나리오로 표시합니다.IISExpress에서 실행되는 웹 API 서비스를 때리는 로컬 Angular 애플리케이션을 사용하고 있었습니다.다음 절차에 따라 올바른 applicationhost.config 파일을 찾아 Access-Control-Allow-Origin 헤더를 추가했습니다.

  <customHeaders>
    <clear />
    <add name="X-Powered-By" value="ASP.NET" />
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Headers" value="Content-Type" />
  </customHeaders>

위의 솔루션이 모두 작동하지 않는 경우, Heroku 또는 다른 방법으로 코어 이외의 문제를 수정해도 403의 금지된 오류가 발생할 수 있기 때문에 파일 권한 때문일 수 있습니다.디렉토리/파일 권한을 다음과 같이 설정합니다.

권한 및 소유권 오류 403 금지 오류는 웹 콘텐츠 파일 및 폴더에 대한 잘못된 소유권 또는 권한으로 인해 발생할 수도 있습니다.

올바른 권한에 대한 사용 권한 경험:

폴더: 755

정적 콘텐츠: 644

다이내믹 콘텐츠: 700

심플한 솔루션:데이터를 요청하고 있는 php 파일의 맨 위에 다음 항목을 추가합니다.

header("Access-Control-Allow-Origin: *");

메모: 이 방법은 안전하지 않으므로 실제 가동 환경에서는 권장하지 않습니다.

코드 우체부

자바스크립트

function fnlogin(){
   
var url = ("http://localhost:3000/users/login");
var method =('POST');
var data = JSON.stringify({
    "email": "juan.perez@gmail.com",
    "password": "12345"
  });

  
  var xhr = new XMLHttpRequest();
  xhr.withCredentials = false; // SOLUTION False not True
  
  xhr.addEventListener("readystatechange", function () {
    if (this.readyState === 4) {
      console.log(this.responseText);
    }
  });
  
  xhr.open(method, url ,true);
  xhr.setRequestHeader("content-type", "application/json");
  xhr.setRequestHeader("cache-control", "no-cache");
  //xhr.send(data,{mode: 'no-cors'});
  xhr.send(data);
  }

언급URL : https://stackoverflow.com/questions/43262121/trying-to-use-fetch-and-pass-in-mode-no-cors