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

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 cannot load http://stackoverflow.com/. Origin http://localhost is not allowed by 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오리진을 허용하지 않았기 때문 입니다.

---

나는 다른 날에 cors와 악몽에 가득 차서 프로그래밍 패러다임을 전환했습니다.

내 웹 응용 프로그램의 경우 im을 개발하고 결국 프로덕션에 배포합니다 (이 경우 Im using) Heroku. Postman모든 http 경로를 테스트 하는 데 사용 하는 http와 같은 서버 측 작업을 수행하기 위해 postman은 cors에서 차단되지 않습니다.

단위 테스트를 수행하고 확인한 후 서버를 Heroku에 배포 한 다음 클라이언트에서 작업합니다. 이 방법으로 클라이언트는 다른 곳에 있고 서버를받지 않는 서버에 요청합니다.

참고 URL : https://stackoverflow.com/questions/10883211/deadly-cors-when-http-localhost-is-the-origin