cURL은 CORS 규칙을 적용하지 않습니다. 이러한 규칙은 보안을 위해 브라우저에 의해 시행됩니다.

관련 헤더를 추가했다고 언급할 때 해당 헤더를 요청에 추가했다고 가정합니다. 실제로 헤더는 서버의 응답 헤더에 있어야 하며, 이는 다른 웹사이트에서 리소스에 직접 액세스할 수 있음을 나타냅니다.

참고로 CORS - 교차 출처 리소스 공유. API가 지원하지 않기 때문에 두 가지 옵션이 있습니다.

1. 웹페이지와 동일한 도메인의 프록시 서버를 사용하여 4chan의 API에 액세스하거나,
2. 다른 도메인의 프록시 서버를 사용하되 필요한 헤더를 포함하도록 응답을 수정하십시오.

이 문제를 "문제 없음"으로 종료하도록 투표하고 싶습니다.

제안해 주셔서 감사합니다. 프록시를 통해 요청을 라우팅하도록 코드를 업데이트했습니다.

axios.get('https://a.4cdn.org/a/threads.json', {
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
    proxy: {
      host: '104.236.174.88',
      port: 3128
    }
    }).then(function (response) {
        console.log('response is : ' + response.data);
    }).catch(function (error) {
        if (error.response) {
          console.log(error.response.headers);
        } 
        else if (error.request) {
          console.log(error.request);
        } 
        else {
          console.log(error.message);
        }
    console.log(error.config);
});

그러나 여전히 이 오류가 발생합니다.

교차 출처 요청 차단됨: 동일한 출처 정책은 https://a.4cdn.org/a/threads.json 에서 원격 리소스 읽기를 허용하지 않습니다

Stack Overflow에 대한 다양한 포럼과 질문을 검색했는데 이에 대한 해결책을 찾지 못한 것 같습니다. 누군가 통찰력을 제공할 수 있다면 감사하겠습니다.

이것에 대한 소식이 있습니까? 나는 거의 같은 배에 있습니다 ...

교차 출처 요청 차단됨: 동일한 출처 정책은 https://a.4cdn.org/a/threads.json 에서 원격 리소스 읽기를 허용하지 않습니다

https://a.4cdn.org 와 https://boards.4chan.org 가 서로 다른 도메인으로 간주되기 때문입니다. 차이점은과 보드에

나는 또한 같은 문제가 발생합니다. 아무도 이것에 대해 나를 도와주세요.

사아아메

임시 솔루션으로 다음을 사용할 수 있습니다. https://chrome.google.com/webstore/detail/cors-toggle/omcncfnpmcabckcddookmnajignpffnh

지금은 더 나은 것을 찾지 못했습니다 ..

@PetitBateau Chrome 확장 프로그램이

@adl1995 그것은 나를 위해 트릭을했습니다 ;)

Chrome 확장 프로그램은 확장 프로그램이 있는 사용자에게만 도움이 됩니다. 모든 사람이 해당 확장 프로그램을 가지고 있는 것은 아니므로 프로덕션 환경의 Chrome 확장 프로그램에 의존하는 것은 좋은 생각이 아닙니다.

그래서 임시 해결책이라고 말한 것입니다. 물론 개발 환경을 위한 것입니다.

Access-Control-Allow-Origin은 요청 헤더가 아닌 응답 헤더입니다.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin

axios.get(url, { headers: {'Access-Control-Allow-Origin': *} } ) 아무 의미 없습니다!

노력하다
axios.get(url, { 교차 도메인: true })

@ronnin 기록을 위해 귀하의 솔루션을 시도했지만 작동하지 않습니다.

AJAX 요청을 수행하는 원격 서비스는 도메인의 교차 출처 AJAX 요청을 수락하지 않습니다. 웹 사이트 서버 측 코드베이스에 액세스할 수 있는 경우 할 수 있는 한 가지는 컨트롤러 작업을 생성한 다음(MVC를 사용한다고 가정) 원격 서비스를 사용하는 데 사용하는 것입니다. 그런 다음 컨트롤러 작업에 AJAX 요청을 할 수 있습니다. 이 접근 방식의 장점은 원격 서비스에 연결하고 응답 형식을 지정하고 캐싱하기 전에 추가 검사를 실행할 수 있다는 것입니다.

이것을 읽으십시오, 여러분.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

나는 항상 그 MDN 문서에 대한 참조가 별로 도움이 되지 않는다는 것을 알게 되었습니다. 긴 문서이며 당면한 문제를 직접 다루지 않습니다. 서버 측 코드베이스에 액세스할 수 없고 이 API에 액세스하려면 어떻게 해야 합니까?

내 솔루션은 교차 출처 요청을 허용하지 않는 모든 외부 API에 액세스하기 위해 내 도메인 서버에 내 API를 만드는 것입니다. 저는 이것을 내 리피터 API라고 부릅니다.

@JigzPalillo 접근 방식이나 코드를 공유할 수 있습니까? 나는 꽤 많이 붙어있다! :(

일반적으로 이것은 작동하지만 작동하지 않고 해당 도메인에 대한 액세스 권한이 없는 경우...

axios.get('https://www.notmydomain.com/1511.json')
    .then(function (response) {
        console.log(response.data);
});

내가 한 것은 내 서버에 리피터를 만드는 것입니다.

axios.get('https://www.mydomain.com/repeater.php?url=https://www.notmydomain.com/1511.json')
    .then(function (response) {
        console.log(response.data);
});

/* repeater.php */
function collect_data($url){
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); //remove on upload
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_VERBOSE, 1);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_AUTOREFERER, false);
    curl_setopt($ch, CURLOPT_REFERER, "https://www.notmydomain.com");
    curl_setopt($ch, CURLOPT_HTTP_VERSION, CURL_HTTP_VERSION_1_1);
    curl_setopt($ch, CURLOPT_HEADER, 0);
    $result = curl_exec($ch);
    echo curl_error($ch);
    curl_close($ch);
return($result);
}
echo collect_data($_GET["url"]);

서버는 옵션 호출에서 CORS 헤더로 응답해야 합니다. nodejs/express를 사용하는 경우 다음을 사용하여 모든 엔드포인트에 대해 이 문제를 해결할 수 있습니다.

app.use(function(req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

그러나 그것은 약간 느슨합니다. 아마도 생산을 위해 강화하고 싶습니다.

나는 오랫동안 그 문제를 해결했다. 서버는 3p 서비스에 속하므로 제어할 수 없습니다. 나는 단순히 그것을 대신했습니다. 모든 것이 그 앞에서 잘됩니다.

감사 해요

@steveswork 여기에서 동일, 서버는 3p 서비스에 속합니다. ajax, request.js를 사용할 수 있지만 내가 선호하는 axios를 사용할 수 없다는 것은 매우 슬픈 일입니다 👎

@adl1995 아직 이 문제를 해결할 수 있습니까? 나는이 오류를 처리하는 방법을 완전히 혼란

지금이 2018년인데 업데이트가 있나요?

@challenger532 아니요 아직 아닙니다.

오류는 여전히 만연합니다.

내 조언: 다른 라이브러리를 사용하십시오.

좋아, 이것은 내 문제를 해결했습니다. 보시다시피, 저는 vuejs와 Laravel로 작업하고 있습니다... 다음과 같이 PHP에서 Laravel 웹 경로를 설정합니다.

Route::get('distancematrix/{source}/{destination}', function($source,$destination){
 $url = "https://maps.googleapis.com/maps/api/distancematrix/json?units=imperial&origins=$source&destinations=$destination&key=YOUR_API_KEY";
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_PROXYPORT, 3128);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);
$response = curl_exec($ch);
curl_close($ch);

return json_decode($response, true);
});

그런 다음 vuejs 파일은 단순히 axios를 사용하여 내 경로에 요청을 보냈습니다.

axios.get("distancematrix/place_id:${this.place.source}/place_id:${this.place.destination}").then(response => {
                    console.log('====================================')
                    console.log(response.data)
                    console.log('====================================')
   })

짜잔, 잘 작동합니다.

Laravel을 사용하는 경우 추가 기능:

header('접근-제어-허용-원본: *');

반환 하기 전에 컨트롤러 또는 경로에
예시:
Route::get('post',function(){ $jav = Blog::all(); header('Access-Control-Allow-Origin: *'); return $jav; });
내 영어에 대해 미안 해요. 이것이 당신을 도울 수 있기를 바랍니다.

내 API에 vue.js(localhost 포트 8080) 및 Flask를 사용합니다(localhost 포트 5000).

내 API 코드(포트 5000의 플라스크)를 약간 변경해야 했습니다.
플라스크 확장 flask-CORS를 추가하고 이를 사용하도록 코드를 수정했습니다.
전에:

from flask import Flask, request
import json
app = Flask(__name__)

후에:

from flask import Flask, request
import json
from flask_cors import CORS
app = Flask(__name__)
CORS(app)

이 후 작동했고 내 API를 사용할 수 있었습니다.
따라서 실제로 axios 문제는 아니지만 API 문제이며 axios.get 함수를 호출하지 않고 Firefox에서 경고를 받습니다.

헤더 및 프록시 옵션을 설정하여 대신 Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. 얻었습니다.

하지만 이 확장 프로그램을 사용하여 이 문제를 해결할 수 있었습니다. https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en .

슬프게도, 그것은 어제만 작동했고 오늘은 작동하지 않았습니다...나는 도대체 왜 그런지 알아내려고 노력했습니다.

개발 모드에서 _cors_를 피하기 위해 Webpack 개발 서버 를 사용하는 프록시 요청

webpack.config 파일에 추가

"devServer":{
  "proxy": {
    "/api": {
    "target": 'https://my-target.com',
    "pathRewrite": { '^/api': '' },
    "changeOrigin": true,
    "secure": false
    }
  }
}

위의 예는 요청을 프록시합니다.
axios.post(/api/posts/1 ... . . . .
https://my-target.com/posts/1

위의 Git 예제에서는 요청에서 다음

axios.get('/api/a/threads.json', {
    headers: {
           //  if u have some headers like this
       //  'Authorization': ' Basic //////some values'
    },
    }).then(function (response) {
        console.log('response is : ' + response.data);
    }).catch(function (error) {
        if (error.response) {
          console.log(error.response.headers);
        } 
        else if (error.request) {
          console.log(error.request);
        } 
        else {
          console.log(error.message);
        }
    console.log(error.config);
});

webpack.config 파일에서 .......

"devServer":{
  "proxy": {
    "/api": {
    "target": 'https://a.4cdn.org',
    "pathRewrite": { '^/api': '' },
    "changeOrigin": true,
    "secure": false
    }
  }
}

수정된 webpack 구성 프록시는 다음과 같이 요청을 변경합니다.

u can see this in chrome dev tool REQUEST HEADERS
https://a.4cdn.org/a/threads.json 

다음과 같이 devServer 프록시에서 여러 경로를 사용할 수 있습니다.
webpack.config 파일에서 .......

"devServer":{
  "proxy": {
    "/api": {
    "target": 'https://a.4cdn.org',
    "pathRewrite": { '^/api': '' },
    "changeOrigin": true,
    "secure": false
    },
    "/login": {
    "target": 'https://github.com', // for example
    "pathRewrite": { '^/login': '' },
    "changeOrigin": true,
    "secure": false
    },
    "/post": {
    "target": 'https://facebook.com', // for example
    "pathRewrite": { '^/post': '' },
    "changeOrigin": true
    }
  }
}

필요한 경우 사용

    "changeOrigin": true,
    "secure": false

나는 그것을 고치는 데 몇 시간을 보냈고 모든 곳에서 도움이되지 않는 것 같습니다. 간단하고 빠른 방법은 Allow-Control-Allow-Origin*이라는 크롬 확장을 추가하는 것입니다. https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=ko

당신에게만 도움이 되지만 다른 사람들은 어떻습니까?

다소 유용합니다: https://github.com/shalvah/cors-escape

Vue와 axios를 시도했지만 분명히 같은 문제가 있습니다.

방금 sundar6445에서 제공한 솔루션을 시도했는데 완벽하게 작동합니다.
내가 수정한 webpack 구성 파일은/config/index.js. 에서 참조한 이후로 이것을 수정하는 것을 선호했습니다./build/webpack.dev.conf.js

그 안에 당신은

module.exports = {
  dev: { 
...
proxyTable: {},

sundar가 설명한 것처럼 예를 들어 다음과 같이 proxyTable을 변경하십시오.

proxyTable: ({
      '/events': {
        "target": 'http://localhost:3000',
        "changeOrigin": true,
        "secure": false
      }
    }),

이는 /events로 시작하는 모든 것이 http://localhost :3000/events로 라우팅된다는 것을 의미합니다. 제 경우에는 'pathRewrite'가 없으며 상대 URL은 동일합니다.

물론 Vue 구성 요소에서 전체 URL을 제거하는 것을 잊지 마십시오. 나는 가지고 있었다:

  mounted () {
    axios.get('http://localhost:3000/events/nb')
      .then(result => {
        this.new_et_nb = result.data
        console.log('*******' + JSON.stringify(result) + ', ' + result.data)
      }, error => {
        console.error(error)
      })
  }

다음과 같이 됩니다.

  mounted () {
    axios.get('/events/nb')
      .then(result => {
        this.new_et_nb = result.data
        console.log('*******' + JSON.stringify(result) + ', ' + result.data)
      }, error => {
        console.error(error)
      })
  }

그리고 그것은 완벽하게 잘 작동합니다. @sundar6445 덕분에

도움이 되었기를 바랍니다

나는 이것이 폐쇄로 표시되어 있다는 것을 알고 있지만 무언가를 지적하고 싶었습니다. API 키가 만료되었거나 다른 사람이 사용 중인 경우 이 오류가 클라이언트 측에 표시되는 경우가 있습니다.

경험 많은 개발자는 말할 것도 없지만 코딩을 처음 접하는 사람들을 위해 고유한 API 키가 있는지 확인하십시오. 모든 API에 고유 키가 필요한 것은 아니지만 필요하다면 분명히 필요할 것입니다. 특정 API에 필요한 API 문서를 참조하십시오.

Axios 내부에는 crossDomain 옵션이 없습니다. 잘못된 단서를 주거나 사용하기 전에 소스 코드를 연구하십시오.

다른 사이트에서 정보를 검색하기 위해 클라이언트에서 JavaScript를 실행할 수 없습니다 (CORS를 비활성화하고 XSS의 대상으로 지정하지 않고).

이는 귀하가 클라이언트의 브라우저에 액세스하여 잠재적으로 은행 계좌를 고갈시키거나 승인 없이 일부 사이트에 게시하는 것을 방지하기 위한 것입니다. 스크래핑 사이트도 마찬가지입니다(본질적으로 op가 하려고 하는 것입니다).

당신은이 서버를 통해는 A CORS 모듈에 서버를 사용하여 웹 (즉, 데이터를 가져) 및 프록시를 긁어 수 있습니다.

이 헤더 구성이 이 문제를 해결할 것이라고 생각합니다.

headers: { 'content-type': 'application/x-www-form-urlencoded' }

감사 해요

나는 이것이 진부하게 들린다는 것을 알고 있지만 이 문제에 대한 나의 해결책은 이 호출을 처리하기 위한 사용자 정의 API를 만드는 것이었습니다.

문제는 axios가 아닙니다. 문제는 서버에 있습니다. 데이터를 제공할 때 보내기 전에 다음 헤더를 추가해야 합니다.

Access-Control-Allow-Origin은 *로 설정해야 합니다.

Access-Control-Allow-Headers는 Origin, X-Requested-With, Content-Type, Accept로 설정되어야 합니다.

출처 : axios.get 호출 중 CORS 오류

이 답변을 참조하여 다음과 같이 백엔드 익스프레스 서버에 해당 라인을 추가했습니다.

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "http://127.0.0.1:8080"); //My frontend APP domain
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
    next();
});`

출처 : ExpressJS의 CORS

그리고 axios나 프론트엔드에서 추가 구성 없이 모든 것이 잘 작동하므로 실제로 axios 문제가 아니라 서버 측 헤더 구성이 부족합니다.

마지막으로 stackoverflow 에 대한 이 다른

CORS 프리플라이트를 피하는 방법
CORS 프록시를 사용하여 "No Access-Control-Allow-Origin 헤더" 문제를 해결하는 방법
"Access-Control-Allow-Origin 헤더는 와일드카드가 아니어야 함" 문제를 해결하는 방법

도움이 되기를 바랍니다.

CORS 헤더에 문제가 있는 타사 API 또는 URL에서 데이터를 가져오려면(누락되거나 여러 값이 포함됨) 이에 대한 유일한 해결책은 이 링크를 사용하는 것입니다
" https://cors-anywhere.herokuapp.com/ "
나는 작은 프로젝트에 대한 링크를 사용하지만 큰 프로젝트의 경우 호출을 처리하기 위해 자신의 API를 만들고 API를 만들고 싶을 수 있습니다. 오픈 소스 프로젝트 https://github.com/Rob--W/cors-anywhere를 사용할 수 있습니다.

이것은 작동합니다:

axios.get(`${'https://cors-anywhere.herokuapp.com/'}https://a.4cdn.org/a/threads.json`)
.then(res => {
  console.log(res)
})

4webm 및 4chan-list-webm 을 생성하는 동안 얼마 전에 이 문제에 부딪 쳤습니다.

브라우저 플러그인을 만들면 API에 도달하기 위해 헤더를 가지고 놀 필요가 없다는 점은 주목할 가치가 있습니다. @moot를 호출 하면 CORS를 활성화할 수 있습니다.

교차 도메인: 참

백엔드 CORS에서 포트 '8080'을 활성화해야 했고 작동했습니다.

안전한

더 나은 이해를 위한 웹팩 문서: https://webpack.js.org/configuration/dev-server/#devserver -proxy

백엔드 API에 laravel 또는 lumen을 사용하는 경우. 그리고 이미 barryvdh/laravel-cors 패키지를 사용하고 있습니다. 해결책은 cors.php 구성을 헤더, 메소드 및 원본 부분으로 다음과 같이 설정하는 것입니다.
'allowedOrigins' => ['*'], 'allowedHeaders' => ['*'], 'allowedMethods' => ['*'],
바라건대 그것은 누군가의 문제를 해결합니다

사파리에서 하는 경우 시간이 걸리지 않습니다. 기본 설정 >> 고급에서 개발자 메뉴를 활성화하고 개발 메뉴에서 "교차 출처 제한 비활성화"를 선택하기만 하면 됩니다. 로컬 전용을 원하면 개발자 메뉴를 활성화하고 개발 메뉴에서 "로컬 파일 제한 비활성화"를 선택하기만 하면 됩니다.

OSX용 Chrome에서 터미널을 열고 다음을 실행합니다.

$ open -a Google\ Chrome --args --disable-web-security --user-data-dir

--user-data-dir은 OSX의 Chrome 49+에 필요합니다.

Linux 실행:

$ google-chrome --disable-web-security
또한 AJAX 또는 JSON과 같은 개발 목적으로 로컬 파일에 액세스하려는 경우에도 이 플래그를 사용할 수 있습니다.

-–allow-file-access-from-files
Windows의 경우 명령 프롬프트로 이동하여 Chrome.exe가 있는 폴더로 이동하고 다음을 입력합니다.

chrome.exe --disable-web-security
그러면 동일한 원본 정책을 비활성화하고 로컬 파일에 액세스할 수 있습니다.

위에서 언급한 모든 솔루션을 시도했습니다. 아무것도 작동하지 않습니다.
마침내 하나를 찾았습니다 - https://github.com/expressjs/cors
나는 그것이 당신에게 도움이되기를 바랍니다.

주요 문제는 서버 요청과 클라이언트 요청의 차이입니다.

클라이언트(대부분의 경우 브라우저라고도 함)를 통해 요청할 때 브라우저 소프트웨어에 종속됩니다. 브라우저 소프트웨어의 표준은 귀하의 소프트웨어에서 올 수도 있고 아닐 수도 있는 악의적인 활동 시도를 방지하는 것입니다.

자신의 서버(브라우저 클라이언트가 아님)에서 요청하는 경우 사용자가 직접 작성한 코드에 대해 아무도(서버 설정에 따라) 액세스하거나 제어할 수 없으며 무엇을 알고 있는지 알 수 있습니다. 종류의 요청이 발신되므로 귀하의 환경 또는 귀하가 알고 있는 외부에서 발생하는 네트워크 호출에 대한 우려가 없습니다.

이것이 브라우저가 교차 출처 요청에 대해 엄격한 이유입니다. 특히 공개 코드가 클라이언트에 있으면 누가 그것을 보고 누가 조작할 수 있는지에 대한 통제력이 떨어지기 때문입니다. 프론트엔드 애플리케이션이 손상되고 일부 악성 소프트웨어가 방문자/사용자를 희생하여 코드에서 네트워크 호출을 수행할 수 있는 경우 이러한 일이 발생하지 않도록 하려고 합니다. 따라서 mydomain.com은 의도하지 않은 경우에 대비하여 allyourdataarebelongtome.com을 호출할 수 없습니다.

여기서 해결책은 도메인 간 요청이 작동하지 않는다는 것이 아닙니다. 자체 서버가 이를 방지하고 있으며 원본 도메인을 수락할 때 이러한 상황을 수용해야 하거나 API를 호출하려는 타사 서버가 도메인 간 요청 외에 다른 인증/권한 부여 방법이 있습니다.

@mddanishyusuf 솔루션이 저에게

이 헤더 구성이 이 문제를 해결할 것이라고 생각합니다.

headers: { 'content-type': 'application/x-www-form-urlencoded' }

감사 해요

감사 해요! ;)

여기에서 : https://github.com/axios/axios axios URL 요청에 전체 URL을 넣지 않는다는 것을 깨달았습니다.

그래서 나는 내 사이트에서 내 자신의 API를 만들어 이것을 시도하고 해결했습니다. 방금 이렇게 요청을 보냈습니다

axios.get('/sample/request')

그러면 http://127.0.0.1 :8080/sample/request가 https://a.4cdn.org/에 또 다른 요청을 보내고 axios에 json으로 응답을 반환합니다.

그것은 나를 위한 일입니다, 그것이 당신을 도울 수 있기를 바랍니다

https://github.com/axios/axios/issues/853#issuecomment -408218917 fetch API 및 .NET 4.5 웹 API로 작업했습니다.

내가 이해하는 것처럼 문제는 요청이 loclahost:3000 에서 loclahost:8080으로 전송 되고 브라우저가 CORS와 같은 요청을 거부
틀 렸으면 고쳐줘

내 솔루션은 다음과 같습니다.
'http-proxy-middleware'에서 프록시 가져오기
app.use('/api/**', proxy({ target: "http://localhost:8080" }));

나는 같은 문제가 있었고 백엔드 (Express)에 'cors'를 설치하여 해결했습니다.

운영:
npm 설치 코어

그런 다음 다음을 설정하십시오.

var cors = require('cors');
app.use(cors());

@fernandoruch 감사합니다. 이것은 내 nodejs 서버에서 작동합니다.

나는 같은 문제가 있었고 그것을 해결했다.

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

처음에는 작동했지만 나중에 중지되고 이유를 알 수 없었습니다.

그런 다음 라우터를 사용해야 하므로 모든 코드를 다른 파일로 옮겼다는 것을 깨달았습니다.

router.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

안녕하세요,

이 문제에 대한 업데이트는 .net core 2.1 및 axios 0.18을 사용하고 있습니다.

감사 해요.

문제가 axios에 있다고 생각하지 않고 문제는 백엔드 서버에 있습니다.

저에게는 백엔드에 Flask가 있는 아키텍처가 있고 Vue.JS에서 axios를 사용하는 아키텍처가 있습니다. Flask 서버에서 해야 할 일은 다음과 같습니다.

...
from flask_cors import CORS
...
CORS(app)

이것은 프로덕션으로 이동해서는 안되지만 nginx 수준에서 교차 출처 허용 목록을 가질 수도 있습니다. 나는 이것을 읽고 도움 이 될 수 있습니다.

임시 솔루션으로 다음을 사용할 수 있습니다. https://chrome.google.com/webstore/detail/cors-toggle/omcncfnpmcabckcddookmnajignpffnh

지금은 더 나은 것을 찾지 못했습니다 ..

나쁜 생각

Darksky 날씨 API에 axios.get() 요청을 하려고 할 때 이 문제가 발생했습니다. 내가 Darksky의 FAQ 페이지를 읽었을 때 동일한 정확한 문제에 대한 질문을 찾았습니다. 그들은 이것을 의도하지 않은 악의적인 정보 액세스를 방지하기 위한 보안 수단으로 사용하고 데이터베이스에 액세스하기 위한 프록시를 만들 것을 제안했다고 대답했습니다.

package.json 파일을 다음과 같이 변경했습니다(create-react-app 사용).

{
  "proxy": "https://api.darksky.net/forecast/[myKey]
}

myKey 은 데이터에 액세스하기 위해 Darksky에서 나에게 제공했습니다.

이것은 매우 간단한 수정이었고 나를 위해 일했습니다! 많은 API 서비스가 이것을 보안 수단으로 사용하기 시작할 것이라고 생각합니다. 내 솔루션이 비슷한 문제를 가진 다른 사람들을 도울 수 있기를 바랍니다.

요약: 프록시를 만듭니다.

@fernandoruch 님 감사합니다. 내 node.js 서버의 app.js에 추가하면 저에게 효과적입니다.

var cors = require('cors');
app.use(cors());

import axios from 'axios'
import jsonpAdapter from 'axios-jsonp'

axios.get(`${url}`, { adapter: jsonpAdapter })
        .then(result => {
            console.log('Status Code: ' + result.status)
        })
        .catch(error => console.log('Request failed'))

JSONP(JSON with Padding 또는 JSON-P)는 클라이언트와 다른 도메인에 있는 서버에서 데이터를 요청하는 데 사용됩니다. JSONP를 사용하면 동일 출처 정책을 우회하여 데이터를 공유할 수 있습니다.

외부 API 호출에 jquery의 $.get을 사용합니다.

CORS 헤더에 문제가 있는 타사 API 또는 URL에서 데이터를 가져오려면(누락되거나 여러 값이 포함됨) 이에 대한 유일한 해결책은 이 링크를 사용하는 것입니다
" https://cors-anywhere.herokuapp.com/ "
나는 작은 프로젝트에 대한 링크를 사용하지만 큰 프로젝트의 경우 호출을 처리하기 위해 자신의 API를 만들고 API를 만들고 싶을 수 있습니다. 오픈 소스 프로젝트 https://github.com/Rob--W/cors-anywhere를 사용할 수 있습니다.

이것은 작동합니다:

axios.get(`${'https://cors-anywhere.herokuapp.com/'}https://a.4cdn.org/a/threads.json`)
.then(res => {
  console.log(res)
})

@yasincidem - 당신은 이 제안에 대한 절대적인 다이아몬드입니다. 건배 - 저는 솔루션을 찾기 위해 웹을 가로질러 많은 흔적을 따랐고 귀하의 것이 제 특정 시나리오에서 작동한 첫 번째 것입니다.

나는 방금이 문제를 건너 왔습니다. 이 특정 타사 API가 작동하도록 {withCredentials: true} (다른 API에서 복사하여 붙여넣기)가 있었습니다. {withCredentials: true} 제거

이 솔루션은 저에게 효과적입니다.

axios.get(myurl, {
    crossDomain: true
}).then(res => { 
    console.log(res);
}).catch(error => {
    console.log('error', error);
})

참조 https://stackoverflow.com/questions/42422494/cross-domain-at-axios

CORS 헤더에 문제가 있는 타사 API 또는 URL에서 데이터를 가져오려면(누락되거나 여러 값이 포함됨) 이에 대한 유일한 해결책은 이 링크를 사용하는 것입니다
" https://cors-anywhere.herokuapp.com/ "
나는 작은 프로젝트에 대한 링크를 사용하지만 큰 프로젝트의 경우 호출을 처리하기 위해 자신의 API를 만들고 API를 만들고 싶을 수 있습니다. 오픈 소스 프로젝트 https://github.com/Rob--W/cors-anywhere를 사용할 수 있습니다.

이것은 작동합니다:

axios.get(`${'https://cors-anywhere.herokuapp.com/'}https://a.4cdn.org/a/threads.json`)
.then(res => {
  console.log(res)
})

작동합니다!

axios로 전환할 때도 이 문제가 발생했습니다.
우리의 설정은 webpack + devServer(프록시 포함) + axios입니다.

문제는 '/api' 대신 전체 API URL을 axios에서 baseURL로 사용했다는 것입니다(프록시가 대상 속성을 통해 매핑을 수행함).

내 생각에 이것은 우리 자신의 실수 때문일 수 있습니다. 위와 같은 문제를 겪고 있습니다. 2일 동안 이 문제를 찾는 데 시간이 걸렸습니다. 그것은 내가 발견 한 작은 문제 일뿐입니다. 입력한 URL 주소가 구문 분석 문서와 일치하지 않습니다. 이제 axios는 내 각도 7에서 완벽하게 작동합니다.

플라스크 또는 다른 서버에 CORS가 활성화되어 있는지 확인하십시오.
또한 서버 주소가 올바른지 확인하십시오. 서버의 포트를 추가하는 것을 잊었기 때문에 멈췄습니다.
axios.get('http://localhost:5000/jsonshow')
.then(응답 => (this.array= 응답))

" localhost:3000 "을 " http://localhost :300"으로 변경하면 잘 작동합니다(서버 측에서 cors를 활성화해야 함).

" localhost:3000 "을 " http://localhost :300"으로 변경하면 잘 작동합니다(서버 측에서 cors를 활성화해야 함).

포트 3000이 아닌 300에서 실행 중인 경우

VueJS 에서 프로젝트의 루트에 vue.config.js 라는 사악한 파일이 없으면 생성하고 다음과 같은 것을 추가할 수 있습니다.

module.exports = {
  devServer: {proxy: 'http://localhost:3000'}
}

그러면 Axios 호출은 다음과 같아야 합니다.

axios.get('/api/say_hello', {})

CORS 헤더에 문제가 있는 타사 API 또는 URL에서 데이터를 가져오려면(누락되거나 여러 값이 포함됨) 이에 대한 유일한 해결책은 이 링크를 사용하는 것입니다
" https://cors-anywhere.herokuapp.com/ "
나는 작은 프로젝트에 대한 링크를 사용하지만 큰 프로젝트의 경우 호출을 처리하기 위해 자신의 API를 만들고 API를 만들고 싶을 수 있습니다. 오픈 소스 프로젝트 https://github.com/Rob--W/cors-anywhere를 사용할 수 있습니다.

이것은 작동합니다:

axios.get( ${'https://cors-anywhere.herokuapp.com/'}https://a.4cdn.org/a/threads.json )
.then(res => {
console.log(res)
})

이것은 나를 위해 일했습니다! 감사 해요!

이걸로 해봐 :

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import axios from 'axios';

Vue.config.productionTip = false;

// ======================
axios.defaults.withCredentials = false;
axios.defaults.proxy = {
  host: 'http://localhost',
  port: 5000,
};
// ======================
new Vue({
  router,
  render: (h) => h(App),
}).$mount('#app');

CORS 헤더에 문제가 있는 타사 API 또는 URL에서 데이터를 가져오려면(누락되거나 여러 값이 포함됨) 이에 대한 유일한 해결책은 이 링크를 사용하는 것입니다
" https://cors-anywhere.herokuapp.com/ "
나는 작은 프로젝트에 대한 링크를 사용하지만 큰 프로젝트의 경우 호출을 처리하기 위해 자신의 API를 만들고 API를 만들고 싶을 수 있습니다. 오픈 소스 프로젝트 https://github.com/Rob--W/cors-anywhere를 사용할 수 있습니다.

이것은 작동합니다:

axios.get(`${'https://cors-anywhere.herokuapp.com/'}https://a.4cdn.org/a/threads.json`)
.then(res => {
  console.log(res)
})

내 시간을 절약해 주셔서 감사합니다!

@ronnin 기록을 위해 귀하의 솔루션을 시도했지만 작동하지 않습니다.

뭐라고 요? 진짜? 나를 위해 그것은 확실히 효과가 있었습니다
GET 방법의 경우 매력처럼 작동합니다!

다음은 @ronnin 주석을 기반으로 공개 API를 사용하여 만든 예제입니다.
axios.get('https://world.openfoodfacts.org/api/v0/products', { crossdomain: true }) .then(function (response) { console.log(response.data); })

지금은 2019년인데 업데이트가 있나요? 😃

내 앱 개발에 이 크롬 확장 프로그램을 사용합니다.
https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

@ronnin 기록을 위해 귀하의 솔루션을 시도했지만 작동하지 않습니다.

곤경에 처한 남성들은 CORS를 잘 인식하지 못하므로 앞서 언급한 @seungha-kim 기사를 읽어야 합니다. https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

요약하자면:

1. 요청한 원격 리소스(소위: 원점)에서 요청한 것과 동일한 호스트가 아닌 경우 리소스와 함께 추가 CORS 헤더(일명)를 제공해야 합니다. 접근 제어 허용: 호스트(원본), 헤더, 메소드 등
2. 브라우저에서 요청하거나 'Access-Control-Request-Method' 헤더로 컬 을 요청하면 'GET', 'POST' 등의 의도된 메서드보다 먼저 자동으로 'OPTIONS' 메서드로 요청이 시도됩니다.
   이는 원격 자원의 핸들러가 'OPTION' 메소드를 특별히 처리해야 함을 의미합니다. 예를 들어(nginx):
   ```그루비
   위치 / 원격 리소스 {
   if ($request_method = '옵션') {
   add_header '접근-제어-허용-원본' $http_origin;
   add_header 'Access-Control-Allow-Headers' 'DNT, Keep-Alive, User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Content-Type, Authorization';
   add_header '액세스 제어 허용 방법' 'OPTIONS, GET, POST, PUT, PATCH, DELETE';
   add_header 'Access-Control-Allow-Credentials' true;
   add_header '접근 제어 최대 연령' 1728000; # 20일

    add_header 'Content-Type' 'text/plain charset=UTF-8';
    add_header 'Content-Length' 0;
   return 204;
  }
 // more ...

}
```

1. 위에서 언급했듯이 각 Access-Control-Allow-* 헤더에 값 *을 사용하지 않았습니다.
   값 *, 많은 제한 사항이 있습니다.
   NS. 값 * to Access-Control-Allow-Origin, Access-Control-Allow-Headers, Access-Control-Allow-Methods는 Access-Control-Allow-Credentials=true와 함께 작동할 수 없습니다. 요청에 쿠키가 필요한 경우 Access-Control-Allow-Credentials=true가 필요합니다.
   NS. *만 유효하고 *.google.com은 유효하지 않습니다.

1. Access-Control-Allow-Headers는 요청의 헤더 목록입니다. 목록에 없는 일부 헤더가 있으면 차단됩니다. 헤더를 Access-Control-Allow-Headers로 확인하고 선택하십시오.

2. 문제는 대부분 클라이언트(브라우저, 클라이언트 앱)가 아니라 서버에서 요청한 리소스에 있습니다.

3. 서버 측 개발자 동료와 대화

도움이 되기를 바랍니다.

@ronnin : 귀하의 요점에서 올바르게 이해한다면 내 GET 요청이 CORS를 활성화하지 않은 일부 서버에서 리소스를 요청하는 경우 기본적으로 프론트 엔드에서 우리가 할 수 있는 것이 아무것도 없다는 뜻입니까?

@ronnin : 귀하의 요점에서 올바르게 이해한다면 내 GET 요청이 CORS를 활성화하지 않은 일부 서버에서 리소스를 요청하는 경우 기본적으로 프론트 엔드에서 우리가 할 수 있는 것이 아무것도 없다는 뜻입니까?

아래의 앱을 사용하여 UR 요청이 작동하도록 하세요.

서버 가 CORS를 활성화하지 않아도 저에게

https://cors-anywhere.herokuapp.com/

용법 :

URL = https://cors-anywhere.herokuapp.com${url} ;
`

@ronnin : 귀하의 요점에서 올바르게 이해한다면 내 GET 요청이 CORS를 활성화하지 않은 일부 서버에서 리소스를 요청하는 경우 기본적으로 프론트 엔드에서 우리가 할 수 있는 것이 아무것도 없다는 뜻입니까?

내 GET 요청이 CORS를 활성화하지 않은 일부 서버에서 리소스를 요청하는 경우 기본적으로 프론트 엔드에서 XHR 요청(일명 AJAX 요청)을 통해 직접 할 수 있는 일은 없습니다. 예!
프로토콜을 따르고 귀하의 요청을 거부하는 것은 브라우저입니다.
그러나 location.href, iframe, form.action과 같은 일반적인 브라우저 요청으로 리소스를 가져올 수 있습니다.

대부분 CORS가 활성화되지 않은 상태에서 세 번째 리소스를 요청하는 문제를 해결하기 위해 자체 제어 서버 측이 있는 자체 역방향 프록시 서버(nginx와 같은)를 설정합니다.
@ndjerrou가 언급한 Heroku 앱이

자율주행차와 AI가 있지만 여전히 CORS로 어려움을 겪고 있습니다.

heroku를 프록시로 사용하여 이 문제를 해결했습니다.

여기 내 코드가 있습니다.

fetch("https://cors-anywhere.herokuapp.com/boards.4chan.org/biz/thread/13932651.json")
           .then(res => { //returns a readable stream
                  res.body.getReader().read().then(r => { //returns a Uint8 buffer array
                       var result = new TextDecoder("utf-8").decode(r.value); //Decodes the buffer array into a string
                           console.log(JSON.parse(result)) //the result you want
                   })
            })

지금이 2020년인데 업데이트가 있나요? 😃

2020년이고 아직 업데이트가 없음을 확인할 수 있습니다.
fetch()에는 mode: 'no-cors' 모드가 있습니다. 왜 axios에는 비슷한 것이 없습니까?

나는 시도했다

'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept'

그리고 그 헤더 중 어느 것도 작동하지 않았습니다. true 및 false 상태 모두에서 withCredentials 를 시도했지만 작동하지 않았습니다.

가져오기를 사용하면 작동합니다.

CORS 정책을 처리하고 싶지 않고 여전히 axios를 사용하려면 어떻게 해야 합니까?
편집: 게다가 이 문제가 왜 종료되었나요? 우리는 분명히 여전히 이것에 문제가 있습니다.

요청 헤더가 아닌 응답 헤더에 'Access-Control-Allow-Origin': 'YOUR_IP:YOUR_PORT' 를 정의해야 합니다.

2020년이고 아직 업데이트가 없음을 확인할 수 있습니다.
fetch()에는 mode: 'no-cors' 모드가 있습니다. 왜 axios에는 비슷한 것이 없습니까?

나는 시도했다

'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept'

그리고 그 헤더 중 어느 것도 작동하지 않았습니다. true 및 false 상태 모두에서 withCredentials 를 시도했지만 작동하지 않았습니다.

가져오기를 사용하면 작동합니다.

CORS 정책을 처리하고 싶지 않고 여전히 axios를 사용하려면 어떻게 해야 합니까?
편집: 게다가 이 문제가 왜 종료되었나요? 우리는 분명히 여전히 이것에 문제가 있습니다.

axios에는 문제가 없으므로 문제가 종료되었습니다. 그냥 의자에 앉아서 MDN의 기사를 읽으십시오: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

南辕北辙，徒劳无功

감사합니다. 도움이 되었습니다! 불편을 드려 죄송합니다!

내 장치 모바일 핫스팟에있을 때 axios에서이 오류가 발생했습니다. 그러다가 커피숍에서 와이파이를 사용할 때 CORB를 받지 못했다.

Wikipedia API를 사용해 보았지만 동일한 문제가 발생했습니다.
URL에 origin=* 를 추가하면 해결되었습니다.

const endpoint = `https://en.wikipedia.org/w/api.php?action=query&origin=*&list=search&srsearch=${searchTerm}&format=json`;

axios를 사용하지 않고 $ajax 및 $get을 사용하여 외부 URL에서 GET을 시도했지만 이전 jquery에 문제가 없었습니다. 확실히 버그입니다.

지금이 2021년인데 업데이트가 있나요? 😃

axios(0.18.0) 및 chrome(75.0.3770.100)에서 zapier 웹훅을 공격하는 동안 유사한 "Access-Control-Allow-Headers" 관련 문제가 발생했습니다.

내 요청은 다음과 같습니다.

axios.post("https://hooks.zapier.com/hooks/catch/xxx/xxxx", { email });

지원되지 않는 헤더에 대한 오류가 수신됩니다.

CORS 정책에 의해 차단됨: 요청 헤더 필드 content-type은 실행 전 응답의 Access-Control-Allow-Headers에서 허용되지 않습니다.

이 페이지를 읽은 후 내 이해는 다음과 같습니다.

• 1. Zapier는 최소한 "content-type"에 대해 Access-Control-Request-Headers를 지원하도록 서버 응답을 구성해야 합니다.
• 1. 비행 전 OPT 동안 "content-type" 헤더 검사를 어떻게든 제외하도록 요청을 구성해야 합니다.

옵션 2를 달성하기 위한 제안 사항이 있습니까? Access-Control-Request-Headers에 대한 Zapier의

편집 : 나는 이것이 axios와 거의 관련이 없다고 확신하지만 Zapier의 끝에서 지원이 좋지 않습니다. URL 매개변수가 있는 GET으로 전환한 후 요청이 작동하는 것 같습니다.

FAQ에서 콘텐츠 유형 매개변수가 필요하지 않다고 언급하면
그냥 ol을 시도 할 수 있습니다
Var xhr = new XMLHTTPRequest() 및 axios 없이 그런 식으로 시도하십시오.

게시물이 클라이언트 또는 서버의 웹훅에 있습니까?

2019년 6월 25일 화요일 오후 3시 27분 Pete Schmitz [email protected]이 다음과 같이 작성했습니다.

유사한 "Access-Control-Allow-Headers" 관련 문제가 발생합니다.
axios(0.18.0) 및 chrome에서 zapier 웹훅을 공격하는 동안
(75.0.3770.100).

내 요청은 다음과 같습니다.

axios.post("https://hooks.zapier.com/hooks/catch/xxx/xxxx", { 이메일 });

지원되지 않는 헤더에 대한 오류가 수신됩니다.

CORS 정책에 의해 차단됨: 요청 헤더 필드 콘텐츠 유형이 허용되지 않습니다.
비행 전 응답에서 Access-Control-Allow-Headers에 의해

[이미지: 이미지]
https://user-images.githubusercontent.com/3190970/60138000-9ccdda80-975d-11e9-8f6d-e47bffe91f1.png

이 페이지를 읽은 후 내 이해는 다음과 같습니다.

-
1. Zapier는 지원을 위해 서버 응답을 구성해야 합니다.
최소한 "content-type"에 대한 Access-Control-Request-Headers
-
1. 내 요청을 어떻게든 제외하도록 구성해야 합니다.
비행 전 OPT 동안 "content-type" 헤더 확인.

옵션 2를 달성하기 위한 제안 사항이 있습니까? Zapier의 일반적인 문제
액세스 제어 요청 헤더 정보
https://zapier.com/help/common-problems-webhooks/#posting-json-from-web-browser-access-control-allow-headers-in-preflight-response-error
요청의 "콘텐츠 유형을 사용자 정의하지 마십시오"를 제안합니다. 그러나 나는
내 요청에 헤더 옵션이나 기본 헤더가 없습니다.
axios로 구성되었으므로 이것이 axios의 끝에서 암시적이라고 가정할 수만 있습니까?

—
당신이 댓글을 달았기 때문에 이것을 받는 것입니다.
이 이메일에 직접 답장하고 GitHub에서 확인
https://github.com/axios/axios/issues/853?email_source=notifications&email_token=AHVHGUIDC6DW3YPEKZ2HHZTP4KLWHA5CNFSM4DIVKOX2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63
또는 스레드 음소거
https://github.com/notifications/unsubscribe-auth/AHVHGUKX32PVCFPCZGRURD3P4KLWHANCNFSM4DIVKOXQ
.

이것에 대한 소식이 있습니까? 나는 거의 같은 배에 있습니다.

@imranimu 문제는 사용 중인 브라우저와 요청하는 서버의 조합입니다. 브라우저가 CORS 검사를 무시하도록 하는 API를 노출하지 않는 한 axios가 이에 대해 할 수 있는 일은 없습니다.

몇 가지 옵션이 있습니다.

요청하는 서버를 제어하는 ​​경우 다음 헤더를 사용하여 모든 OPTIONS 요청에 응답하도록 허용합니다.

Access-Control-Allow-Origin: https://www.mywebsite.com <<REPLACE WITH YOUR SITE - USE COMMA IF MORE THAN ONE>>
Access-Control-Allow-Methods: GET,PUT,POST,DELETE,OPTIONS
Access-Control-Allow-Headers: Access-Control-Allow-Origin

express를 사용하면 미들웨어 체인의 다른 경로 앞에 배치되는 다음과 같이 보일 수 있습니다.

app.options('/*', (req, res, next) => {
    res.header('Access-Control-Allow-Origin', 'https://www.mywebsite.com');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
    res.header('Access-Control-Allow-Headers', 'Access-Control-Allow-Origin');
    res.send(HttpStatusCode.OK);
});

또한 응답에 Access-Control-Allow-Origin: https://www.mywebsite.com' <<replace with your website or list of sites>> 헤더를 추가해야 합니다.

app.get('/my-cors-friendly-route', async (req, res, next) => {
   const data = await this.http.get('https://www.someothersite.com');
   res.append('Access-Control-Allow-Origin', 'https://www.mywebsite.com');
   res.json(data)
});

간단히 말해서 브라우저는 다른 출처(도메인)에서 리소스를 요청할 때를 알고 있으므로 실행 전 검사(GET, POST 등이 아닌 OPTIONS 요청 메서드 유형 사용)를 보내 서버가 괜찮다고 말하는지 확인합니다. 요청을 받기 위해. 이는 API를 사용하는 타사 웹사이트의 가능성을 줄이기 위한 기본적인 브라우저 보안 조치입니다. 이는 사용자가 원하지 않을 수 있습니다. 위의 코드는 기본적으로 특정 웹사이트가 API를 사용하는 것은 괜찮다고 말합니다. 모든 웹사이트에서 사용할 수 있는 경우 Access-Control-Origin: * 합니다.

또는 요청하는 서버를 제어하지 않는 경우 페이지를 제공하는 서버의 경로를 노출하여 요청을 생성(프록시)합니다. 이는 노출된 경로가 애플리케이션과 동일한 출처(도메인)를 가지므로 CORS 정책이 적용되지 않고 경로를 노출한 서버가 브라우저가 아니므로 CORS 오류가 수신되지 않기 때문에 작동합니다.

@Aitchy13 연결하려는 API 서버에 Access-Control-Origin: * 있고 콘솔에서 이 문제와 같은 오류를 표시합니다.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at ‘https://<my_api_host>/Data/Login/’. (Reason: Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’).

또한 추가하려면 ...

res.header('Access-Control-Allow-Headers', 'Access-Control-Allow-Origin');

... 하지만 Access-Control-Allow-Origin 요청이 아닌 응답에만 해당되지 않습니까?

Access-Control-Allow-Origin : * ... 매우 이상한 경우 지원되지 않습니다.

다음은 향후 가능한 솔루션을 지원하는 데 도움이 되는 몇 가지 참조용 API 응답 헤더입니다.

( 이것은 CORS 로 인해 거부되는 실제 요청 전에 OPTIONS 메소드 요청에서 벗어났습니다.)
응답 헤더

HTTP/1.1 204 No Content
Date: Fri, 28 Jun 2022 04:08:58 GMT
Server: Apache
X-DNS-Prefetch-Control: off
X-Frame-Options: SAMEORIGIN
Strict-Transport-Security: max-age=15552000; includeSubDomains
X-Download-Options: noopen
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
Surrogate-Control: no-store
Cache-Control: no-store, no-cache, must-revalidate, proxy-revalidate
Pragma: no-cache
Expires: 0

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET,HEAD,PUT,PATCH,POST,DELETE
Access-Control-Allow-Headers: api-key,content-type

Vary: Access-Control-Request-Headers
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive

아니면 내가 뭔가 잘못 알고 있습니까? 이 문제로 노트북을 반으로 쪼개려고 했습니다.

나는 같은 문제가 있었고 몇 가지 시도 후에 몇 가지 솔루션을 테스트했지만 아무 것도 작동하지 않았습니다. package.json에서 프록시를 설정한 후에만 가능합니다.
추가:
"프록시": "api 주소"
그것은 cors를 우회 할 것입니다.

@IkarosFeitosa 구성 프록시 구성을 게시할 수 있습니까?

@zacharytyhacz 서버가 Access-Control-Allow-Origin: * 응답할 때 브라우저 자격 증명을 보낼 수 없습니다.

어느 하나:

1. * 를 특정 웹사이트 주소로 변경합니다.
2. 사용 중인 axios 요청 함수의 config/options 매개변수에서 ...withCredentials: false 를 설정합니다.
3. 사용 중인 axios 요청 함수의 config/options 매개변수에 있는 프록시 속성을 유효한 프록시로 설정합니다(아래 예).

proxy: {
    host: '127.0.0.1',
    port: 9000,
    auth: {
      username: 'mikeymike',
      password: 'rapunz3l'
    }

어떤 진전이 있습니까? resposne 헤더를 설정하도록 웹 서버를 구성했지만 작동하지 않는 것 같습니다.

이 오류 팁을 혼동합니다.

CORS는 웹 브라우저 제한이어야 하며 서버 반환 허용이 필요합니다. 이미 이 cors를 허용하지만 브라우저에서 No 'Access-Control-Allow-Origin' header is present on the requested resource 라고 말했습니다.

fetch api를 사용하여 서버 cors 구성을 시도했는데 잘 작동합니다.

express 와 함께 하는 경우 . 해당 게시물 이 도움이 될 수 있습니다.

예를 들어 허용되는 cors와 함께 일부 경로만 원하는 경우:
/home/fridge - 다른 출발지에서 허용되지 않음
/home/toilet - 다른 출발지에서 허용되어야 합니다.

다음 구현을 시도 할 수 있습니다 (저에게 효과적이었습니다)

route/home.js에서

const express = require('express')
const router  = express.Router()

router.options("/toilet", function(req, res, next){
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With');
  res.send(200);
});

당신이 명시 적으로 nodejs를 사용하지 않는 경우 -에 대한 인터넷 검색을 시도 OPTIONS 방법 요청

익스프레스에서 테스트: 4.16.3

아니오, :) 개발할 때 문제입니다.(저희는 http를 사용합니다)
서버에 출시할 때(https 사용)
그것은 일어나지 않았다.
따라서 추가 기능을 설치하십시오. https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=ko

app.use(함수(요청, 해상도, 다음) {
res.header('접근-제어-허용-원본', '*');
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
다음();
});

그것으로 내 인생이 해결되었습니다!!

제안해 주셔서 감사합니다. 프록시를 통해 요청을 라우팅하도록 코드를 업데이트했습니다.

axios.get('https://a.4cdn.org/a/threads.json', {
  headers: {
    'Access-Control-Allow-Origin': '*',
  },
  proxy: {
    host: '104.236.174.88',
    port: 3128
  }
  }).then(function (response) {
      console.log('response is : ' + response.data);
  }).catch(function (error) {
      if (error.response) {
        console.log(error.response.headers);
      } 
      else if (error.request) {
        console.log(error.request);
      } 
      else {
        console.log(error.message);
      }
  console.log(error.config);
});

그러나 여전히 이 오류가 발생합니다.

교차 출처 요청 차단됨: 동일한 출처 정책은 https://a.4cdn.org/a/threads.json 에서 원격 리소스 읽기를 허용하지 않습니다 https://boards.4chan.org '와 일치하지 않음).

Stack Overflow에 대한 다양한 포럼과 질문을 검색했는데 이에 대한 해결책을 찾지 못한 것 같습니다. 누군가 통찰력을 제공할 수 있다면 감사하겠습니다.

안녕하세요 여러분, axios가 호출되기 전에 이것을 시도하십시오.

headers.set('Content-Type', 'application/json')

이것은 나의 해결책이었다

const key = 'sdmhfkhskdfhkshdkfhsdhfksl';
    const locationUrl = `https://api.fjdsghfjsdghfjgshdjfg`;
    axios.defaults.headers.common['x-api-key'] = key;
    const myresult = await axios.get(locationUrl, { crossdomain: true }).then((result) => {
        return result.data;
    });

이 CORS 문제를 해결하는 방법에 대한 비디오를 만들 것입니다. 내 YouTube 동영상에 대한 링크로 이 댓글을 업데이트하겠습니다.

편집하다:
https://youtu.be/hxyp_LkKDdk

지금이 2021년인데 업데이트가 있나요? 😃

그래 난 내 취향에 너무 빠져있어 난 정말 그 해를 확인해야했어 😆

fetch 를 사용하여 서버의 cors가 먼저 작동하는지 테스트하십시오.

그리고...

axios 는 내 koa-server 요청할 수 있지만 iris 직접 요청할 수는 없으며 둘 다 인기 있는 cors-middleware를 준비합니다.

1358

이 문제에 대한 공식적인 해결책이 없는 이유는 무엇입니까? 나는 이 전체 스레드를 읽고 아무도 표준 방식으로 실제로 해결하지 못하는 보편적인 문제처럼 보이는 것에 당황했습니다.

이 문제에 대한 공식적인 해결책이 없는 이유는 무엇입니까? 나는 이 전체 스레드를 읽고 아무도 표준 방식으로 실제로 해결하지 못하는 보편적인 문제처럼 보이는 것에 당황했습니다.

전체 CORS 문제는 Axios도 아니고 JavaScript 자체도 아닙니다. 대부분 또는 모든 브라우저에 내장된 보안 기능입니다. 이를 '해킹'하는 방법이 있지만 올바른 헤더로 응답하는 것은 서버에 달려 있습니다.

이 문제에 대한 공식적인 해결책이 없는 이유는 무엇입니까? 나는 이 전체 스레드를 읽고 아무도 표준 방식으로 실제로 해결하지 못하는 보편적인 문제처럼 보이는 것에 당황했습니다.

전체 CORS 문제는 Axios도 아니고 JavaScript 자체도 아닙니다. 대부분 또는 모든 브라우저에 내장된 보안 기능입니다. 이를 '해킹'하는 방법이 있지만 올바른 헤더로 응답하는 것은 서버에 달려 있습니다.

따라서 해당 응답을 고려할 때 CORS 문제에 대한 수정 사항을 구현하는 가장 "성공적인" 방법은 무엇입니까?

좋아, 이틀의 연구 끝에 마침내 그것을 얻었습니다.

엄밀히 말하면 이것은 axios 문제가 아닙니다. 실제로 이것은 문제로 간주되어서도 안됩니다. axios는 이상하고 성가신 CORS 표준에 따라 작동하도록 설계되었으므로 CORS header ‘Access-Control-Allow-Origin’ missing 메시지가 발생할 것으로 예상되며 tar는 axios의 올바른 작동입니다. 앞서 말했듯이 4chan API의 예에서 문제는 axios가 아니라 CORS 표준을 따르지 않는 4chan API 자체입니다.

어떤 사람들은 모든 헤더 유효성 검사를 피하기 위해 프록시를 사용하는 오래된 트릭을 제안했습니다. 다음은 Negar Jamalifard의 블로그에서 트릭을 수행하는 방법을 설명합니다. https://medium.com/js-dojo/how-to-deal-with-cors-error-on-vue-cli-3-d78c024ce8d3 그런데 , 이것이 나쁜 습관으로 간주될 수 있는지 잘 모르겠습니다.

제 경우에는 axios를 깨달을 때까지 이틀 동안 내 로컬 호스트에서 asp net core api에 연결하려고 시도했는데 내 요청을 보내기 전에 내 서버가 OPTIONS 메서드로 sendign인 "프리플라이트 요청"을 자동으로 보냈습니다. 처리할 준비가 되어 있지 않습니다. 누군가가 너무 모호한 메시지를 표시하기 위해 크롬과 파이어 폭스를 비난하는 사람이 있다면.

어떤 사람들은 모든 헤더 유효성 검사를 피하기 위해 프록시를 사용하는 오래된 트릭을 제안했습니다. 다음은 Negar Jamalifard의 블로그에서 트릭을 수행하는 방법을 설명합니다. https://medium.com/js-dojo/how-to-deal-with-cors-error-on-vue-cli-3-d78c024ce8d3 그런데 , 이것이 나쁜 습관으로 간주될 수 있는지 잘 모르겠습니다.

그렇다면 프록시만 이러한 호출에 가장 적합한 경우입니까? 정말 죄송합니다.

그렇다면 프록시만 이러한 호출에 가장 적합한 경우입니까? 정말 죄송합니다.

글쎄... 당신은 또한 당신이 소비하려는 API를 만든 친구와 이야기하고 수정을 요청할 수 있습니다.

문제를 해결했습니다.
axios의 경우: url= " http://localhost :8080" method='post'
내 Django 서버 응답:
uesrItem = {'사용자': 'xxx'}
응답 = JsonResponse(userItem)
응답["접근-제어-허용-원본"] = " http://localhost :8080"
응답["액세스 제어 허용 자격 증명"] = '참'
response["액세스 제어 허용 방법"] = "게시물, 옵션"

문제는 axios가 아니라 요청하는 API입니다!

예를 들어 Flask에서 API를 코딩했으며 GET 메서드는 다음과 같습니다.

@app.route('/api/autores', methods=['GET'])
def get_users():
    drivers_json = []
    for user in user_dao.list_users():
        drivers_json.append(user.to_json())
    return make_response(jsonify(drivers_json), 201)

그러나 API 응답에 헤더를 추가하면 문제가 해결되었습니다.

@app.route('/api/autores', methods=['GET'])
def get_users():
    drivers_json = []
    for user in user_dao.list_users():
        drivers_json.append(user.to_json())
    response = jsonify(drivers_json)
    response.headers.add('Access-Control-Allow-Origin', '*')
    return response

그런 다음 내 axios 응답을 기록하고 다음을 얻습니다.

{data: Array(4), status: 200, statusText: "OK", headers: {…}, config: {…}, …}

나는 당신이 모두 어떤 API를 사용하고 있는지 모르지만 Flask에서 해결되었습니다!

제 경우에는 axios에 아무런 문제가 없었습니다. 방금 API를 만든 사람에게 CORS 서버 측을 활성화하도록 요청했습니다.

이 시도

delete axios.defaults.headers.common["X-Requested-With"];

나는 https://github.com/Rob--W/cors-anywhere 해결 방법을 사용했고 잘 작동하지만 prod에서는 API를 만든 사람에게 내 도메인에 대해 cors를 활성화하도록 요청할 것입니다.

CORS는 브라우저와 대상 서버 사이에 있는 브라우저 제한 이기 때문에 axios에서 직접 CORS를 해결할 수 있다고 생각하지 않습니다.

다음 중 하나를 수행할 수 있습니다.

1. 대상 서버 의 응답 헤더에 Access-Control-Allow-Origin 를 포함 합니다 .
2. 원래 서버를 요청할 것이므로 axios 요청에 호스트 이름을 포함하지 마십시오. 그런 다음 원래 서버에서 대상 서버에 대해 원하는 모든 작업을 수행할 수 있습니다.

자세한 예제 코드 스니펫을 언급하십시오.
그는 도움이 될 것입니다.

내 지역에서 같은 문제가 발생했습니다.
백엔드에 cors를 추가하고 해결했습니다. :)

이것은 axios 의 문제가 아닙니다. 이것은 백엔드의 문제입니다. 장고를 사용하고 있습니다. 그리고 이 두 가지를 추가하면 문제가 해결됩니다.

CORS 미들웨어 추가

MIDDLEWARE = [
...
'corsheaders.middleware.CorsMiddleware',
...
]

그리고 CORS를 허용합니다.
(모두에게 CORS 허용)

CORS_ORIGIN_ALLOW_ALL = True

(모든 출처를 허용하므로 약간 안전하지 않습니다. CSRF 공격에 취약합니다.)
따라서 생산을 위해 특정 원산지만 허용

CORS_ORIGIN_ALLOW_ALL = False

CORS_ORIGIN_WHITELIST = (
    '<YOUR_DOMAIN>[:PORT]',
)

예:+1:

CORS_ORIGIN_ALLOW_ALL = False

CORS_ORIGIN_WHITELIST = (
    '127.0.0.1:8000',
)

안녕하세요 여러분,
언급했듯이 이 문제는 교차 출처 요청에 대한 브라우저 보호입니다. 다음 지침에 따라 해결했습니다. https://support.google.com/chrome/thread/11089651?hl=ko

여전히 어려움을 겪고 있는 사람들을 위해:
지금쯤이면 이것이 Axios의 문제가 아니며 서버에서 헤더를 설정하지 않아 브라우저가 CORS를 차단하고 있다는 것을 이해하셨기를 바랍니다. 이것을 이해했지만 여전히 헤더를 설정하지 않는 자체 서버에 문제가 있는 경우 역방향 프록시를 사용할 때 실제 웹 서버 에서 헤더 NGINX 에서 설정하는 방법은

여전히 어려움을 겪고 있는 사람들을 위해:
지금쯤이면 이것이 Axios의 문제가 아니며 서버에서 헤더를 설정하지 않아 브라우저가 CORS를 차단하고 있다는 것을 이해하셨기를 바랍니다. 이것을 이해했지만 여전히 헤더를 설정하지 않는 자체 서버에 문제가 있는 경우 역방향 프록시를 사용할 때 실제 웹 서버 에서 헤더 NGINX 에서 설정하는 방법은

나는 3시간 동안 고군분투했고 클라이언트 측에서는 아무것도 변경되지 않았으며 마침내 서버에 다음 항목을 추가했습니다.

egg-cors 설치(에그 프로젝트 전용)

// ./config/config.default.js

config.cors = {
    origin: ["http://localhost:8080"],
    allowedHeaders: [
      "Content-Type",
      "Authorization",
      "Access-Control-Allow-Methods",
      "Access-Control-Request-Headers"
    ],
    credentials: true,
    enablePreflight: true
  };

그게 다야

const board = this.props.routeParams.tag;
axios.get('https://cors-anywhere.herokuapp.com/' + 'https://a.4cdn.org/' + board + '/threads.json', config)
.then(function (response) {
console.log(response.data);
});

fetch 를 사용하여 서버의 cors가 먼저 작동하는지 테스트하십시오.

그리고...

axios 는 내 koa-server 요청할 수 있지만 iris 직접 요청할 수는 없으며 둘 다 인기 있는 cors-middleware를 준비합니다.

1358

이것은 나를 위해 일했고 이유를 배워야합니다.

나는 Tornado 및 Vuejs로 작업하고 있었고 axios는 문제가 아니었으며 백엔드에 다음이 추가되었습니다.

# Tornado
class ClassName(tornado.web.RequestHandler):
    def set_default_headers(self):
        self.set_header("Content-Type", "application/json")
        self.set_header("Access-Control-Allow-Origin", "*")
        self.set_header("Access-Control-Allow-Headers", "content-type")
        self.set_header(
            'Access-Control-Allow-Methods',
            'POST, GET, OPTIONS, PATCH, PUT'
        )

@robertjchristian
작동합니다
Verrrrrrrrrrrry 감사합니다.

나는 같은 문제가있다
내 코드
액시오스({
방법: "얻다",
URL: "http://localhost:4000/사용자",
})
.then(응답 => {
console.log(응답);
})
.catch(오류 => {
console.log(오류)
});
}
이 오류 발생
원본 ' http://localhost :3000'의 ' http://localhost :4000/users'에 있는 XMLHttpRequest에 대한 액세스가 CORS 정책에 의해 차단되었습니다. 실행 전 요청에 대한 응답이 액세스 제어 검사를 통과하지 못했습니다. '액세스 제어' 없음 -Allow-Origin' 헤더가 요청된 리소스에 있습니다.

누구든지 내가해야 할 일에 대한 단계별 솔루션을 줄 수 있습니까?

@albertpinto 우선

@albertpinto 는 이 메가 스레드에서 가능한 모든 솔루션을 살펴봅니다. 클라이언트 측/프론트 엔드 문제가 아니라 실제로 서버(localhost:4000)입니다. 서버는 원본을 허용하기 위해 CORS 헤더로 응답해야 합니다.

예를 들어 서버는 다음과 같은 헤더로 응답해야 합니다.

Access-Control-Allow-Origin:  *
Access-Control-Allow-Headers: Content-Type

나는 이것을 다음과 같이 해결했다.

1. cors npm 설치 : npm install cors (내 경우에는 나머지 노드 서버에 http://localhost:4000)

이것은 또한 귀하의 끝점에 적용됩니다.
var cors = 필요('cors')
var 익스프레스 = 필요('익스프레스')
var cors = 필요('cors')
var 앱 = 익스프레스()
app.use(cors())

모든 제안에 감사드립니다!

// CORS의 경우 express js를 사용하는 경우 npm을 통해 cors 패키지를 사용하면 됩니다.

app.use(
    cors({
        credentials: true,
        origin: [
            'http://localhost:8080',
            'http://your-production-website.com'
        ]
    }),
)

cURL은 CORS 규칙을 적용하지 않습니다. 이러한 규칙은 보안을 위해 브라우저에 의해 시행됩니다.

관련 헤더를 추가했다고 언급할 때 해당 헤더를 요청에 추가했다고 가정합니다. 실제로 헤더는 서버의 응답 헤더에 있어야 하며, 이는 다른 웹사이트에서 리소스에 직접 액세스할 수 있음을 나타냅니다.

참고로 CORS - 교차 출처 리소스 공유. API가 지원하지 않기 때문에 두 가지 옵션이 있습니다.

1. 웹페이지와 동일한 도메인의 프록시 서버를 사용하여 4chan의 API에 액세스하거나,
2. 다른 도메인의 프록시 서버를 사용하되 필요한 헤더를 포함하도록 응답을 수정하십시오.

이 문제를 "문제 없음"으로 종료하도록 투표하고 싶습니다.

@sunnykgupta
동일한 논리, 동일한 본문이지만 원격 백엔드 엔드포인트에 대한 각도 http 게시 요청은 CORS 블록 오류를 수신하지 않습니다.

Go 서버를 실행 중인 경우 Gorilla 를 사용하는 것이 좋습니다.

headersOk := handlers.AllowedHeaders([]string{"X-Requested-With", "Content-Type"})
originsOk := handlers.AllowedOrigins([]string{"*"})
methodsOk := handlers.AllowedMethods([]string{"GET", "HEAD", "POST", "PUT", "OPTIONS"})

err := http.ListenAndServe("localhost:8081", handlers.CORS(originsOk, headersOk, methodsOk)(r))

나는 이것을 다음과 같이 해결했다.

1. package.json 바로 옆에 있는 프로젝트 루트에 다음을 포함하는 vue.config.js 파일을 만듭니다.

module.exports = {
    devServer:{
        proxy: {
            '/apiv1': {
                target: 'https://fuping.site/',
                changeOrigin: true,
                pathRewrite: {
                    '^/apiv1': ''
                }
            },
        },
    }
}

2. 다음과 같이 http 요청을 합니다.

this.$axios({
          method:'get',
          url:'apiv1/about/',

        }).then(function(response){
          console.log(response.data)
        }).catch(error=>{
          console.log(error)
        })

axios.get('https://a.4cdn.org/a/threads.json', {
헤더: {
'액세스-제어-허용-원본': '*',
'Access-Control-Allow-Headers': '콘텐츠 유형, 권한 부여',
},
프록시: {
호스트: '104.236.174.88',
포트: 3128
}
}).then(함수(응답) {
console.log('응답은 ' + response.data);
}).catch(함수(오류) {
if (error.response) {
console.log(error.response.headers);
}
그렇지 않으면 (error.request) {
console.log(오류.요청);
}
또 다른 {
console.log(error.message);
}
console.log(error.config);
});

여러분, 안녕하세요,
나는 이것을 해결하는 데 몇 시간이 걸렸기 때문에 이것을 게시합니다.

우선, CORS는 확실히 클라이언트 측이 아니라 서버 측 문제이지만 다른 앱이 다른 도메인에서 동일한 서버를 사용하여 작동하고 있었기 때문에 제 경우에는 서버 코드가 정확하다고 확신했습니다. 내 사용자 지정 인스턴스에서 axios 를 사용하기 시작했을 때 문제가 시작되었습니다.

우리가 사용할 때 내 경우에는, 그것은 매우 구체적인 문제였다 baseURL 에서 axios 인스턴스를 다음 만들려고 GET 또는 POST 어디서나 전화를, axios 는 baseURL 와 요청 URL 사이에 슬래시 / axios 추가합니다. 이것도 이해가 되지만 숨겨진 문제였습니다. 내 Laravel 서버가 이 문제를 일으키는 후행 슬래시를 제거하기 위해 리디렉션하고 있었습니다.

일반적으로 비행 전 OPTIONS 요청은 리디렉션을 좋아하지 않습니다. 따라서 반드시 확인하고 피하십시오.

나는 이것이 버그가 아니지만 누군가를 도울 수 있기를 바랍니다.