Vue의 도메인 간 액세스 문제에 대한 솔루션

프런트 엔드 개발에서는 도메인 간 액세스 문제에 자주 직면합니다. 널리 사용되는 프런트엔드 프레임워크인 Vue는 종종 이 문제에 직면합니다. 이 기사에서는 Vue의 도메인 간 액세스 문제와 해당 솔루션을 소개합니다.

교차 도메인 액세스란 무엇인가요?

간단히 말하면, 교차 도메인 액세스는 한 도메인의 웹 페이지가 다른 도메인의 리소스에 액세스하는 것을 의미합니다. 예를 들어, 도메인 이름 http://www.example.com 아래의 페이지에서 http://www.example2.com 도메인 이름 아래의 리소스를 요청하면 교차 도메인 액세스가 발생합니다.

Vue의 교차 도메인 액세스 문제

Vue를 사용하여 Ajax 요청을 보낼 때 요청된 URL이 현재 페이지의 도메인 이름과 다른 경우 교차 도메인 액세스 문제가 발생합니다. 이 경우 브라우저는 서버에 OPTIONS 요청을 보내 서버가 도메인 간 액세스를 지원하는지 여부를 묻습니다. 서버가 도메인 간 접근을 허용하는 응답 헤더를 반환해야만 Ajax 요청이 정상적으로 완료될 수 있다.

Solution

Vue에서 도메인 간 액세스 문제를 해결하는 방법에는 여러 가지가 있습니다.

1. 프록시 사용

Vue-cli는 프록시를 구성하여 도메인 간 액세스를 해결하는 방법을 제공합니다. config 디렉터리의 index.js 파일에 프록시를 구성하여 도메인 간 액세스를 달성할 수 있습니다.

구체적인 단계는 다음과 같습니다.

index.js 파일의 dev 개체에 ProxyTable 속성을 추가합니다.

proxyTable: {
  // 将所有以/api开头的请求代理到http://localhost:3000上
  '/api': {
    target: 'http://localhost:3000',
    changeOrigin: true,
    pathRewrite: {
      '^/api': ''
    }
  }
}

이 시점에서 /api로 시작하는 URL을 요청하면 http://localhost:3000으로 프록시됩니다. ChangeOrigin 속성은 도메인 간 요청 시 요청 헤더의 원본 필드를 수정해야 함을 나타내기 위해 true로 설정됩니다. pathRewrite 속성은 요청 경로의 /api가 빈 문자열로 대체됨을 나타냅니다.

2.JSONP(GET 요청에만 해당)

JSONP는 페이지에 스크립트 태그를 동적으로 추가하여 도메인 간 요청을 구현하는 방법입니다. Vue에서 JSONP를 사용하면 도메인 간 액세스 문제를 해결할 수 있습니다.

구체적인 단계는 다음과 같습니다.

jsonp 라이브러리 설치

npm install jsonp --save

페이지에서 JSONP 사용

import jsonp from 'jsonp'

jsonp(url, options, (err, data) => {
  if (!err) {
    // 处理数据
  }
})

url은 요청된 URL을 나타내고, 옵션은 요청된 매개변수를 나타내며, 콜백 함수의 데이터(err, data) 반환된 데이터입니다.

3.CORS

CORS는 서버가 도메인 간 액세스 허용 여부를 결정할 수 있도록 W3C에서 개발한 표준입니다. 서버가 CORS를 지원하도록 서버 측에서 일부 구성을 만들 수 있습니다. 구성 방법은 서버마다 다르므로 여기서는 자세히 설명하지 않겠습니다.

CORS를 사용할 때 도메인 간 액세스를 달성하려면 Vue에서 withCredentials 속성을 사용해야 합니다. 구체적인 단계는 다음과 같습니다.

Vue에서 withCredentials 속성을 활성화합니다.

Vue.http.options.credentials = true

withCredentials 속성은 쿠키와 같은 사용자 자격 증명 정보를 전송하기 위해 도메인 간 요청을 허용할지 여부를 나타냅니다.

결론

Vue에서 도메인 간 액세스 문제를 해결하는 방법은 여러 가지가 있지만 각 방법에는 장점과 단점이 있습니다. 프록시 방법을 사용하면 Vue의 도메인 간 액세스 문제를 잘 해결할 수 있습니다. JSONP는 CORS 방법을 사용하는 경우 서버 측에서 일부 구성이 필요합니다. 우리는 실제 상황에 따라 적절한 솔루션을 선택해야 합니다.

위 내용은 Vue의 도메인 간 액세스 문제에 대한 솔루션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!