Vue가 온라인일 때 도메인 간 문제를 처리하는 방법

Vue 애플리케이션을 개발할 때 프런트엔드와 백엔드가 분리되고 도메인 간 문제가 발생할 수 있습니다. 일반적으로 로컬에서 개발할 때는 도메인 간 문제가 발생하지 않지만 프로젝트가 온라인 상태가 되면 프런트 엔드와 백엔드가 다른 서버에 배포되면 도메인 간 문제가 발생합니다. 이 기사에서는 이 문제를 더 잘 해결하기 위해 Vue 온라인의 크로스 도메인 문제에 대한 배경과 솔루션에 대해 심층적으로 이해합니다.

교차 도메인이란 무엇인가요?

교차 도메인은 서버의 리소스에 액세스할 때 교차 도메인 요청을 사용하는 것을 의미합니다. 교차 도메인 요청에는 다양한 유형이 있으며, 일반적인 요청에는 리소스에 대한 교차 도메인 액세스, 교차 도메인 쿠키 작성, 교차 도메인 호출 인터페이스 등이 포함됩니다. 브라우저 보안 정책에 따라 도메인 간 요청은 보안 위험을 초래할 수 있으므로 기본적으로 도메인 간 요청이 금지됩니다.

Vue 온라인의 도메인 간 문제 해결

1. 프록시 서버

프록시 서버는 프런트 엔드에서 백그라운드 인터페이스를 요청할 때 인터페이스가 있는 서버로 요청을 전달하고, 프록시의 주소를 사용합니다. 서버를 프런트엔드 코드의 요청 경로로 지정하여 요청이 정상적으로 처리되는지 확인하세요. 프런트엔드는 프록시 서버를 사용하여 요청을 인터페이스로 전달하고, 백엔드 인터페이스의 반환 콘텐츠를 프록시하고, 반환 콘텐츠를 수정하고, 요청 전후에 일부 수정 매개변수나 처리 논리를 추가할 수 있습니다. 대부분의 프록시 서버는 백엔드 직원이 작성하며 프런트엔드 프로젝트에서 호출할 수 있습니다.

Nginx, Alibaba Cloud API Gateway, Apache 등 다양한 유형의 프록시 서버가 있습니다. Vue 프로젝트가 온라인 상태가 되면 프록시 서버를 사용하여 모든 인터페이스의 액세스 경로를 동일한 도메인 이름으로 지정합니다. 예를 들어 모든 인터페이스 요청 경로를 "/api"로 리디렉션하고 "/api"를 요청 경로로 사용합니다. 그런 다음 프록시 서버에서 전달 규칙을 정의하여 "/api"로 시작하는 요청을 백엔드 인터페이스가 있는 서버로 전달하여 도메인 간 문제를 해결합니다.

Vue 프로젝트에서 프록시 서버 구성:

//vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true, //是否跨域
        pathRewrite: {
          '^/api': '/'
        }
      },
    }
  }
}

2.jsonp

JSONP는 JavaScript 및 도메인 간 요청을 위한 솔루션입니다. 클라이언트는 <script> 태그를 동적으로 생성하고 요청된 URL(인터페이스 주소)과 콜백 함수를 매개변수로 추가하여 서버에 요청을 보냅니다. 서버는 요청을 수락한 후 JavaScript 스크립트, 콜백 함수를 반환하고 필요한 데이터를 전달합니다. 마지막으로 클라이언트는 콜백 함수에서 반환된 데이터를 처리합니다. JSONP는 보다 유연한 도메인 간 솔루션이지만 GET 요청만 지원할 수 있고 일반 텍스트 형식의 데이터만 요청할 수 있습니다.

Vue 프로젝트에서 JSONP 사용:

this.$jsonp('http://api.jisuapi.com/weather/query', { //jsonp函数可以使用axios+jsonp的方式实现
    city: '上海',
    appkey: 'your appkey'
  }, (data) => {
    console.log(data)
  })

3.CORS

CORS(Cross-Origin Resource Sharing)는 웹 응용 프로그램 서버가 도메인 간 액세스 제어를 수행할 수 있도록 하는 도메인 간 요청을 위한 공식 솔루션입니다. 서버는 도메인 간 요청을 안전하게 완료합니다. CORS를 사용하려면 백그라운드에서 응답 헤더 정보에 Access-Control-Allow-Origin 필드를 추가하고 '*' 또는 지정된 도메인 이름으로 설정하기만 하면 브라우저가 응답 헤더를 기반으로 처리합니다. 국경 간 해결을 위한 정보. 도메인 요청 문제.

백그라운드에 응답 헤더 정보 추가:

//以Java Web服务为例，增加响应头信息
response.setHeader("Access-Control-Allow-Origin", "*");//允许跨域

4. WebSocket

WebSocket은 도메인 간 요청을 해결하는 데 좋은 역할을 하는 전이중 통신 프로토콜입니다. WebSocket은 HTTP 프로토콜을 통해 핸드셰이크를 수행하고 연결이 생성된 후 클라이언트와 서버 간에 데이터를 양방향으로 전송할 수 있습니다.

Vue 프로젝트에서 WebSocket 사용:

var ws = new WebSocket('ws://localhost:8080');
ws.onopen = function() {
  ws.send('发送消息到服务器');
};
ws.onmessage = function(event) {
  console.log('从服务器接受到 ', event.data);
}

요약

위는 Vue 온라인의 도메인 간 문제를 해결하는 네 가지 방법인 프록시 서버, JSONP, CORS 및 WebSocket입니다. 다양한 시나리오와 다양한 솔루션을 선택하면 Vue가 온라인에 접속할 때 도메인 간 문제를 더 잘 해결하고 프로젝트를 더 원활하게 만드는 데 도움이 됩니다. 위의 방법을 사용할 때는 프로젝트의 원활한 시작을 위해 안전에 주의해야 한다는 점을 기억해야 합니다.

위 내용은 Vue가 온라인일 때 도메인 간 문제를 처리하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!