집 > 기사 > 웹 프론트엔드 > Ajax 도메인 간 문제에 대한 두 가지 솔루션

Ajax 도메인 간 문제에 대한 두 가지 솔루션

亚连원래의: 2018-05-24 16:09:501806검색

ajax 자체는 실제로 XMLHttpRequest 객체를 통해 데이터와 상호 작용합니다. 그러나 보안상의 이유로 브라우저는 js 코드가 도메인 간 작업을 수행하는 것을 허용하지 않으며 경고를 발행하므로 ajax 크로스 도메인 문제가 발생합니다.

개요

Ajax 크로스 도메인은 프런트엔드 개발에서 흔히 발생하는 문제입니다. 이 문서에서는 Google 브라우저 Chrome을 클라이언트로 사용하고 Tomcat을 웹 서버로 사용할 때의 해결 방법을 설명합니다.

문제 현상

도메인 간 액세스가 발생하면 ajax는 일반적으로 다음과 유사한 오류를 보고합니다.

XMLHttpRequest가 http://192.168.2.12:8001/oss/api/version/check를 로드할 수 없습니다. Access- Control-Allow-Origin' 헤더가 요청한 리소스에 존재합니다. 따라서 Origin 'http://localhost:8000'은 액세스가 허용되지 않습니다.

해결 방법 1: 브라우저의 교차 도메인 보안 설정을 끄세요. development 테스트할 때

를 사용합니다. Chrome 브라우저를 예로 들어 Chrome 바로가기를 마우스 오른쪽 버튼으로 클릭한 다음 Target 값 뒤에 --disable-web-security를 추가합니다. -- 앞에 공백이 있습니다. 예:

"C:Program Files (x86)GoogleChromeApplicationchrome.exe" --disable-web-security

시작 후 Chrome 브라우저에 "지원되지 않는 명령줄 플래그를 사용하고 있습니다: --disable"이라는 메시지가 표시됩니다. web-security"에서는 안전하지 않다고 하여 테스트로만 제한됩니다.

이렇게 하면 크로스 도메인 오류 없이 바로 테스트가 가능합니다!

해결책 2: 도메인 간 액세스를 지원하도록 웹 서버 구성

다음은 Tomcat을 웹 서버로 사용하기 위한 해결 방법입니다. Java 웹의 WEB-INF 아래에 있는 web.xml 파일에 다음 구성을 추가하면 됩니다. 프로그램.

<!--cors filter-->
  <filter>
    <filter-name>CorsFilter</filter-name>
    <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
  </filter>
  <filter-mapping>
    <filter-name>CorsFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

참고: org.apache.catalina.filters.CorsFilter 아래에는 여러 구성 옵션이 있습니다. 위의 구성이 없으면 시스템의 기본 구성이 사용됩니다. 실제 프로덕션 환경에서는 보안 강화를 위해 필요에 따라 구성을 수행해야 합니다. 예를 들어 cors.allowed.origins는 액세스가 허용되는 소스 주소를 구성합니다. 기본값은 all, 즉 *입니다. 또한 cors.allowed.methods, cors.allowed.headers 등이 있습니다. 구체적인 구성 세부 정보는 이 문서의 참조 자료에서 [1]을 참조하세요.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

Ajax 도메인 간 문제에 대한 두 가지 솔루션

관련 기사