Vue 배포 후 서버 인터페이스에 액세스할 수 없습니다.

Vue 프로젝트 개발에서 때때로 매우 일반적인 문제에 직면합니다. 즉, 프로젝트 배포가 완료된 후 백엔드 서버의 인터페이스에 액세스할 수 없습니다. 이러한 상황은 프론트 엔드 페이지에서 백엔드 데이터를 표시할 수 없게 만들고 프로젝트가 정상적으로 실행되지 못하게 하므로 큰 골칫거리가 될 수 있습니다.

그럼 왜 이런 문제가 발생하는 걸까요? 이 문제를 해결하는 방법? 이 글에서는 이 문제를 해결하는 데 도움이 되도록 여러 측면에서 분석하고 설명하겠습니다.

1. 브라우저 도메인 간 문제

브라우저의 동일 출처 정책으로 인해 일반적으로 다른 소스의 인터페이스를 직접 요청하는 것은 불가능합니다. 예를 들어 Vue 프로젝트가 localhost:8080에서 실행되고 백엔드 서비스 요청이 localhost:3000에 있는 경우 프런트엔드 페이지는 백엔드로 요청을 보낼 수 없습니다.

이 문제를 해결하는 방법은 여러 가지가 있으며, 그 중 하나는 프록시를 사용하는 것입니다. Vue에서는 config/index.js 파일의 devServer.proxy 옵션을 설정하여 프록시를 구성할 수 있습니다. 예제는 다음과 같습니다.

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        ws: true,
        changeOrigin: true
      }
    }
  }
}

이 구성의 의미는 /api로 시작하는 모든 요청을 http로 프록시하는 것입니다. //로컬호스트:3000. 이런 방식으로 프런트엔드 페이지에서 백엔드 인터페이스에 액세스할 수 있습니다.

2. 백엔드 서비스 CORS 문제

브라우저의 동일 출처 정책 외에도 백엔드 서비스 자체에도 CORS(Cross-Origin Resource Sharing) 정책 세트가 있을 수 있습니다. 이로 인해 프런트 엔드 페이지가 백엔드 인터페이스에 액세스하지 못할 수도 있습니다.

이 문제를 해결하기 위해 다음 방법을 사용할 수 있습니다.

(1) 백엔드에 Access-Control-Allow-Origin 헤더를 설정합니다.

백엔드가 모든 소스에 대한 액세스를 허용하는 경우 Access-를 설정할 수 있습니다. 백엔드 -Allow-Origin 헤더에 대한 제어, 예는 다음과 같습니다:

Access-Control-Allow-Origin: *

이 구성의 의미는 모든 소스의 프런트 엔드 페이지가 이 인터페이스에 액세스할 수 있도록 허용하는 것입니다. 물론,

Access-Control-Allow-Origin: http://localhost:8080

와 같이 특정 도메인 이름으로 설정할 수도 있습니다. 이 방법은 매우 간단하지만 모든 소스를 열면 보안 문제가 발생할 수 있으므로 특정 도메인 이름을 사용하는 것이 좋습니다. 프로덕션 환경에서.

(2) jsonp 메서드를 사용하여 Vue에서 요청

백엔드에서 프런트 엔드가 인터페이스를 직접 요청하는 것을 허용하지 않는 경우 jsonp 메서드를 사용하여 도메인 간 요청을 구현할 수 있습니다.

Vue에서는 vue-jsonp 라이브러리를 사용하여 jsonp 요청을 할 수 있습니다. 예:

import Vue from 'vue'
import VueJsonp from 'vue-jsonp'
Vue.use(VueJsonp)

Vue.jsonp('http://example.com/data', {}).then((response) => {
  console.log(response)
})

이 요청은 액세스된 인터페이스 주소에 콜백 매개변수를 자동으로 추가하여 교차 도메인 요청을 실현합니다.

3. 네트워크 문제

마지막으로 네트워크 문제도 고려해야 합니다. 실제로 인터페이스에 정상적으로 액세스할 수 있지만 네트워크 문제로 인해 프런트엔드에서 백엔드 인터페이스에 액세스할 수 없는 경우도 있습니다.

이 경우 네트워크 설정을 확인하거나 도구를 사용하여 네트워크 진단을 수행할 수 있습니다. 예를 들어 Windows에서 ping 명령을 사용하여 네트워크를 진단할 수 있습니다.

ping example.com

네트워크에 문제가 있는 경우 네트워크를 수리하거나 네트워크를 교체하여 문제를 해결할 수 있습니다.

Summary

위는 Vue 프로젝트에 배포 후 백엔드 인터페이스에 접근할 수 없는 문제 및 해결 방법입니다. 각 프로젝트의 상황이 다르기 때문에 구체적인 상황에 따라 디버깅하고 해결해야 한다는 점에 유의해야 합니다. 위의 해결 방법 중 어느 것도 문제를 해결할 수 없는 경우 관련 기술 담당자에게 도움을 요청하는 것이 좋습니다.

위 내용은 Vue 배포 후 서버 인터페이스에 액세스할 수 없습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!