http : // localhost가 원점 일 때 치명적인 CORS

적절한 헤더로 서버 (nginx / node.js)를 설정했지만이 CORS 문제가 발생합니다.

Chrome 네트워크 창-> 응답 헤더에서 볼 수 있습니다.

Access-Control-Allow-Origin:http://localhost

트릭을 수행해야합니다.

테스트에 사용하는 코드는 다음과 같습니다.

var xhr = new XMLHttpRequest();
xhr.onload = function() {
   console.log('xhr loaded');
};
xhr.open('GET', 'http://stackoverflow.com/');
xhr.send();

나는 얻다

XMLHttpRequest가 http://stackoverflow.com/을 로드 할 수 없습니다 . Origin http : // localhost 는 Access-Control-Allow-Origin에서 허용되지 않습니다.

서버 구성이 아닌 클라이언트 스크립트에 문제가 있다고 생각합니다 ...

Chrome 은 CORS 요청에 대한 로컬 호스트를 지원하지 않습니다 (2010 년에 버그가 발생하여 2014 년에 WontFix로 표시됨).

이 문제를 해결하려면 lvh.me(localhost와 마찬가지로 127.0.0.1을 가리키는) 같은 도메인을 사용 하거나 --disable-web-security플래그로 크롬을 시작하십시오 (테스트 중이라고 가정).

@Beau의 답변에 따라 Chrome은 localhost CORS 요청을 지원하지 않으므로이 방향으로 변경 될 가능성이 없습니다.

내가 사용 허용 - 제어 - - 원산지 허용 : * 크롬 확장 이 문제를 주변에 이동합니다. 확장은 CORS에 필요한 HTTP 헤더를 추가합니다.

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: "GET, PUT, POST, DELETE, HEAD, OPTIONS"
Access-Control-Expose-Headers: <you can add values here>

소스 코드는 Github에서에 게시됩니다 .

확장 프로그램은 기본적으로 모든 URL을 필터링합니다. Dropbox와 같은 일부 웹 사이트가 손상 될 수 있습니다. 다음 URL 필터로 로컬 호스트 URL 만 필터링하도록 변경했습니다.

*://localhost:*/*

실제 문제는 -Allow-모든 요청 ( OPTIONS& POST)에 대해 설정하면 Chrome에서 취소한다는 것입니다. 다음 코드는 POSTChrome을 사용 하여 LocalHost와 함께 작동합니다.

<?php
if (isset($_SERVER['HTTP_ORIGIN'])) {
    //header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
    header("Access-Control-Allow-Origin: *");
    header('Access-Control-Allow-Credentials: true');    
    header("Access-Control-Allow-Methods: GET, POST, OPTIONS"); 
}   
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
        header("Access-Control-Allow-Methods: GET, POST, OPTIONS");         
    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
        header("Access-Control-Allow-Headers:{$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");

    exit(0);
} 
?>

Chrome은 CORS를 localhost원점 에서 요청 합니다. Chrome에서는 문제가되지 않습니다.

로드 할 수없는 이유 http://stackoverflow.com는 Access-Control-Allow-Origin헤더가 localhost오리진을 허용하지 않았기 때문 입니다.

빠르고 더러운 Chrome 확장 프로그램 수정 :

Moesif Orign & CORS 체인저

그러나 Chrome은 localhost의 교차 출처 요청을 지원합니다. 대한 헤더를 추가해야합니다 Access-Control-Allow-Origin위해 localhost.

어떤 확장도 나를 위해 작동하지 않았으므로 간단한 로컬 프록시를 설치했습니다. 제 경우에는 https://www.npmjs.com/package/local-cors-proxy 2 분 설정입니다.

(사이트에서)

npm install -g local-cors-proxy

CORS 문제가있는 API 엔드 포인트 : https://www.yourdomain.ie/movies/list

프록시 시작 : lcp --proxyUrl https://www.yourdomain.ie

그런 다음 클라이언트 코드에서 새로운 API 엔드 포인트 : http://localhost:8010/proxy/movies/list

나를 위해 매력처럼 일했습니다 : 앱이 프록시를 호출하고 누가 서버를 호출하는지. 제로 CORS 문제.

헤더를 만지지 않고 서버 측에서 리디렉션을 결정하고 매력처럼 깨달았습니다.

아래 예제는 현재 버전의 Angular (현재 9) 및 웹팩 DevServer를 사용하는 다른 프레임 워크에 대한 것입니다. 그러나 다른 백엔드에서도 동일한 원칙이 작동한다고 생각합니다.

따라서 proxy.conf.json 파일에서 다음 구성을 사용합니다 .

{
  "/api": {
    "target": "http://localhost:3000",
    "pathRewrite": {"^/api" : ""},
   "secure": false
 }
}

Angular의 경우 해당 구성을 제공합니다.

$ ng serve -o --proxy-config=proxy.conf.json

serve 명령에서 프록시를 사용하는 것을 선호하지만이 구성을 angular.json에 다음 과 같이 넣을 수도 있습니다 .

"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "your-application-name:build",
      "proxyConfig": "src/proxy.conf.json"
    },

또한보십시오:

https://www.techiediaries.com/fix-cors-with-angular-cli-proxy-configuration/

https://webpack.js.org/configuration/dev-server/#devserverproxy