http://localhost CORS 오리진이 작동하지 않는 이유는 무엇입니까?

http://localhost CORS 오리진이 작동하지 않는 이유는 무엇입니까?

서버(nginx/node.js)에 적절한 헤더를 설정했는데도 이 CORS 문제로 꼼짝 못하고 있습니다.

[ Chrome Network ]페인 -> [ Response Header ]에 표시됩니다.

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/을 로드할 수 없습니다.발신기지 http://localhost는 Access-Control-Allow-Origin에서 허용되지 않습니다.

서버 구성이 아니라 클라이언트 스크립트에 문제가 있는 것 같습니다.

Chrome은 CORS 요청에 대해 localhost를 지원하지 않습니다(2010년에 버그가 열렸고 2014년에 UntFix로 표시됨).

는 ''과 같은 할 수 있습니다.localho.st0.0 한다) (localhost' 127.0.0.1)에서 크롬을 합니다.--disable-web-securityflag('플래그')

@Beau의 답변에 따르면 Chrome은 localhost CORS 요청을 지원하지 않으며 이 방향에는 변화가 없을 것으로 보입니다.

이 문제를 해결하려면 Allow-Control-Allow-Origin: * Chrome Extension을 사용합니다.확장에 의해 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 필터로 localhost URL만 필터링하도록 변경했습니다.

*://localhost:*/*

어떤 확장도 작동하지 않아서 간단한 로컬 프록시를 설치했습니다.https://www.npmjs.com/package/local-cors-proxy 의 경우는, 2 분간의 설정입니다.

(사이트에서)

npm install -g local-cors-proxy

하는 API 엔드 중 가 있는 것은 다음과 같습니다.https://www.yourdomain.ie/movies/list

Proxy ] : [ Start Proxy ] :lcp --proxyUrl https://www.yourdomain.ie

엔드포인트: "Da" "API" :http://localhost:8010/proxy/movies/list

당신의 앱이 프록시를 호출하고, 프록시가 서버를 호출합니다.CORS의 문제는 없습니다.

는, 「」를 설정했을 입니다.-Allow- 「」)OPTIONS&POST는 ''와 함께 할 수 있습니다.POST with 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);
} 
?>

합니다.localhost기원은 문제없습니다.크롬

할 수http://stackoverflow.com '그거'야?Access-Control-Allow-Origin의 리글에에 your your your your your your your your your your를 허용하지 localhost★★★★★★ 。

동의! 문제를 근본적으로 해결하려면 서버 측에서 CORS를 활성화해야 합니다.하지만...

제 경우는 다음과 같습니다.

프런트 엔드(React/Angular/VUE) 코드를 서버 구성에 액세스할 수 없는 클라이언트에서 제공하는 REST API로 로컬로 테스트하고 싶었습니다.

테스트용

위의 모든 단계를 시도했지만 효과가 없었던 후 사용자 데이터 디렉토리를 지정하는 것과 함께 chrome에서 웹 보안 및 사이트 분리 평가판을 비활성화해야 했습니다(이것을 건너뛰려고 시도했지만 작동하지 않았습니다).

Windows 의 경우

cd C:\Program Files\Google\Chrome\Application

웹 보안 및 사이트 격리 평가판 사용 안 함

chrome.exe  --disable-site-isolation-trials --disable-web-security --user-data-dir="PATH_TO_PROJECT_DIRECTORY"

드디어 성공했어!이게 도움이 됐으면 좋겠네요!

빠르고 더러운 Chrome 확장 수정:

Moesif Orign & CORS 체인저

크롬 로컬 호스트은 꼭 .Access-Control-Allow-Origin★★★★★★에localhost.

가장 간단한 해결책이 될 것 같습니다.개발 기계에서 http://myfakedomain.notarealtd와 유사한 가짜 도메인을 호스트 파일에 추가하여 127.0.0.1로 설정했습니다.다음으로 서버의 CORS 설정(이 경우는 S3 버킷)을 변경하여 해당 도메인을 허용합니다.그러면 로컬호스트에서 크롬을 사용할 수 있고 잘 작동합니다.

CORS 설정에서는, 포토가 있는 호스트명 전체를 고려해 주세요.http://myfakedomain.notarealtd:3000

Linux, Mac 및 윈도우즈에서 호스트 파일을 쉽게 수정할 수 있습니다.

Chrome은 로컬 호스트에서 CORS를 사용할 수 있습니다.AWS API 게이트웨이/lambda에서 동작하도록 했습니다.http 요청을 전송할 때 개발자 도구의 네트워크 탭을 표시하면 매우 도움이 됩니다.제 문제는 람다 함수가 비행 전 OPTIONS 요청을 처리하지 않고 POST와 GET만 처리하는 것이었습니다.OPTIONS 요청을 받아들여 API에서 다음 헤더를 반환함으로써 문제를 해결했습니다.

• Access-Control-Allow-Origin: '*' (또는 웹사이트 도메인)
• Access-Control-Allow-Methods: 'POST, GET, OPTIONS'
  • 이제 POST/GET 요청을 보낼 수 있다고 Chrome에게 알리는 비행 전 응답입니다.
• '이러다'
  • 이것이 필요한지 아닌지는 확실하지 않지만, Chrome은 요청에 Content-Type 헤더가 포함될 수 있음을 알립니다.

주의할 점은 브라우저가 두 세트의 헤더를 보낸다는 것입니다.

1. 다음을 포함하는 OPTIONS 헤더
   • access-control-request-method: 'POST'(또는 요구하는 임의의 http 방식)
   • 오리진: 'disp://localhost:3000'(도메인)
   • 참조자: 'http://localhost:3000/' (전체 웹사이트 경로라고 생각합니다)
   • sec-module-mode: 'sec-module'
   • sec-cross-site: '크로스 사이트'

요청 1에 대한 응답이 200 코드이고 응답 헤더에 'access-control-allow-methods': 'POST'(또는 요청에 있는 액세스 제어-request-method가 무엇이든)가 포함되어 있는 경우,

2. 실제 요구(예: 다음을 포함하는 POST 헤더)
   • content-type: '어플리케이션/json'
   • 발신기지: 위와 동일
   • 레퍼러: 위와 동일

헤더가 더 많은데 이게 제일 중요했던 것 같아요.

헤더를 터치하지 않고 서버 측에서 리다이렉트를 하기로 했습니다만, 매우 매력적입니다.

아래 예는 현재 버전의 Angular(현재 9개) 및 웹 팩 DevServer를 사용하는 다른 프레임워크에 대한 것입니다.하지만 같은 원리가 다른 백엔드에도 적용될 것이라고 생각합니다.

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

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

Angular I의 경우 다음과 같이 설정합니다.

$ 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

해결책은 Chrome이 수행하는 블록을 들어 올리는 확장을 설치하는 것입니다. 예를 들어 다음과 같습니다.

Access Control-Allow-Origin: 차단 해제(https://add0n.com/access-control.html?version=0.1.5&type=install)).

언급URL : https://stackoverflow.com/questions/10883211/why-does-my-http-localhost-cors-origin-not-work