AngularJS가 Access-Control-Allow-Origin 헤더를 검출하지 않음

AngularJS가 Access-Control-Allow-Origin 헤더를 검출하지 않음

로컬 가상 호스트(http://foo.app:8000)에서 앵귤러 앱을 실행하고 있습니다.다음 명령어를 사용하여 다른 로컬 VirtualHost(http://bar.app:8000)에 요구를 하고 있습니다.$http.post.

$http.post('http://bar.app:8000/mobile/reply', reply, {withCredentials: true});

Chrome Developer Tools I의 Network(네트워크) 탭에서 OPTIONS 요청을 볼 수 있으며 응답에는 다음 헤더가 포함됩니다.

Access-Control-Allow-Origin: http://foo.app:8000

다만, POST 요구가 취소되어 다음의 에러가 발생합니다.

요청된 리소스에 'Access-Control-Allow-Origin' 헤더가 없습니다.따라서 오리진 'http://foo.app:8000'은 액세스가 허용되지 않습니다.

경험해 본 사람 있나요?그Access-Control-Allow-OriginOPTIONS 요청 응답에 헤더가 포함되어 있기 때문에 POST가 헤더를 조작하고 있는 이유를 아무리 생각해도 알 수 없습니다.

Access-Control-Allow-Credentials로도 설정되어 있습니다.true.

로컬 개발용 크롬 버그입니다.다른 브라우저를 사용해 보세요.그럼 될 거야.

Chrome을 사용하고자 하는 사람들을 위한 해결 방법이 있습니다.이 확장을 통해 AJAX를 사용하는 모든 사이트를 모든 소스에서 요청할 수 있습니다.'Access-Control-Allow-Origin: *'응답에 대한 헤더입니다.

또는 Chrome 런처에 다음 인수를 추가할 수 있습니다.--disable-web-security이것은 개발 목적으로만 사용하고, 통상의 「웹 서핑」에는 사용하지 않습니다.자세한 내용은 Run Chromium with Flags를 참조하십시오.

마지막으로 첫 번째 단락에서 언급한 확장을 설치하면 CORS를 쉽게 활성화/비활성화할 수 있습니다.

나는 $http 서비스를 사용하여 angularjs에서 실행 중인 병으로 요청을 보내고 있었다.http://localhost:8090/CORS를 적용하지 않으면 요청된 리소스에 'Access-Control-Allow-Origin' 헤더가 없습니다.

from bottle import hook, route, run, request, abort, response

#https://github.com/defnull/bottle/blob/master/docs/recipes.rst#using-the-hooks-plugin

@hook('after_request')
def enable_cors():
    response.headers['Access-Control-Allow-Origin'] = '*'
    response.headers['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS, PUT'
    response.headers['Access-Control-Allow-Headers'] = 'Origin, X-Requested-With, Content-Type, Accept'

저도 똑같은 문제를 겪었어요.저는 OPTIONS 요청은 통과되지만 POST 요청은 "Aborted"로 표시됩니다.이로 인해 브라우저가 POST 요청을 전혀 하지 않았다고 믿게 되었습니다.Chrome은 요청 헤더에 "주의 임시 헤더가 표시됨"과 같은 내용을 표시했지만 응답 헤더는 표시되지 않았습니다.결국 Firefox 디버깅으로 넘어가 보니 서버가 오류로 응답하고 응답에 CORS 헤더가 없습니다.Chrome은 실제로 응답을 수신하고 있었지만 네트워크 뷰에 응답을 표시할 수 없었습니다.

크로스(CROS)는 서버 측에서 해결해야 합니다.

web.xml에서 액세스를 허용하고 필터를 추가하려면 요건에 따라 필터를 만듭니다.

스프링을 사용한 예:

필터 클래스:

@Component
public class SimpleFilter implements Filter {

@Override
public void init(FilterConfig arg0) throws ServletException {}

@Override
public void doFilter(ServletRequest req, ServletResponse resp,
                     FilterChain chain) throws IOException, ServletException {

    HttpServletResponse response=(HttpServletResponse) resp;

    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
    response.setHeader("Access-Control-Max-Age", "3600");
    response.setHeader("Access-Control-Allow-Headers", "x-requested-with");

    chain.doFilter(req, resp);
}

@Override
public void destroy() {}

}

Web.xml:

<filter>
    <filter-name>simpleCORSFilter</filter-name>
    <filter-class>
        com.abc.web.controller.general.SimpleFilter
    </filter-class>
</filter>
<filter-mapping>
    <filter-name>simpleCORSFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

저는 오늘 이 문제에 부딪혔어요.서버의 버그(늘 포인터 예외)로 인해 응답 작성에 실패했지만 HTTP 상태 코드 200이 생성되었습니다.200 상태 코드 때문에 Chrome은 유효한 응답을 기대했습니다.Chrome이 가장 먼저 한 일은 'Access-Control-Allow-Origin' 헤더를 찾는 것이었지만 찾지 못했다.Chrome은 요청을 취소했고 Angular는 나에게 오류를 주었습니다.POST 요청 처리 중 버그가 OPTIONS는 성공하지만 POST는 실패합니다.

즉, 이 에러가 발생했을 경우는, 서버가 POST 요구에 대한 응답으로 헤더를 전혀 반환하지 않았을 가능성이 있습니다.

또한 요청에서 매개 변수가 잘못된 경우에도 발생할 수 있습니다.내 경우 메시지를 보내는 API를 사용하고 있었다.

요청된 리소스에 'Access-Control-Allow-Origin' 헤더가 없습니다.따라서 오리진 'null'은 액세스가 허용되지 않습니다.응답에는 HTTP 상태 코드 401이 할당되어 있습니다.

로그인 요청과 함께 잘못된 사용자 이름 또는 비밀번호를 전송했을 때.

$http를 사용하는 대신.get('abc/xyz/getSomething') $http 사용을 시도합니다.jsonp('abc/xyz/getSomething')

     return{
            getList:function(){
                return $http.jsonp('http://localhost:8080/getNames');
            }
        }

돛에서 이 문제가 발생할 경우 허가 헤더에 Authorization을 포함하도록 cors.js를 설정하십시오.

/***************************************************************************
  *                                                                          *
  * Which headers should be allowed for CORS requests? This is only used in  *
  * response to preflight requests.                                          *
  *                                                                          *
  ***************************************************************************/

  headers: 'Authorization' // this line here

언급URL : https://stackoverflow.com/questions/21102690/angularjs-not-detecting-access-control-allow-origin-header