Vue.js는 단일 페이지 애플리케이션(SPA)을 구축하는 데 널리 사용되는 JavaScript 프레임워크입니다. Vue 애플리케이션을 개발할 때 도메인 간 문제가 발생할 수 있습니다. 도메인 간 문제로 인해 브라우저가 다른 출처의 리소스를 로드하지 못하는 경우가 많습니다. 실제로 Vue 애플리케이션을 배포할 때 도메인 간 문제는 여러 측면에서 병목 현상이 발생할 수 있습니다. 이 기사에서는 도메인 간 문제를 해결하는 방법에 중점을 두면서 Vue.js 배포를 소개합니다.
브라우저에서 웹 페이지의 문서 트리에서 스크립트가 실행되면 실행된 스크립트는 문서 트리의 모든 부분에 액세스할 수 있습니다. 그러나 다른 소스의 리소스에 액세스하려고 하면 도메인 간 문제가 발생합니다.
소스는 네트워크의 서버 또는 클라이언트를 말하며 IP 주소, 도메인 이름 또는 포트 번호일 수 있습니다. 브라우저는 소스의 구성 요소를 비교하여 두 URL이 교차 도메인인지 확인함으로써 두 URL이 동일한지 확인합니다.
예를 들어 다음 URL이 있다고 가정해 보겠습니다.
http://www.example.com/page1 https://www.example.com/page2 http://www.example.com:8080/page3
각 URL에는 프로토콜, 호스트 및 포트 번호라는 세 가지 구성 요소가 포함되어 있습니다. 이 예에서 첫 번째와 세 번째 URL의 프로토콜과 호스트는 동일하지만 포트 번호는 다릅니다. 포트 번호가 다르기 때문에 이러한 URL은 다른 소스로 간주됩니다.
JavaScript 스크립트가 다른 소스의 리소스에 액세스하려고 시도하면 브라우저는 동일한 원본 정책에 따라 스크립트 실행을 차단합니다. 브라우저는 이것이 악성 스크립트가 데이터를 훔치는 것을 방지할 것이라고 생각합니다.
예를 들어 Vue.js 애플리케이션 구성 요소의 JavaScript 코드가 다른 소스의 API에 액세스하려고 시도하면 애플리케이션은 브라우저에 교차 출처 요청을 보냅니다. 도메인 간 문제가 해결되지 않으면 브라우저는 애플리케이션이 다른 소스에서 필요한 리소스를 로드하지 못하게 합니다.
Vue.js 애플리케이션의 교차 도메인 문제를 해결하려면 백엔드 API 교차 도메인, 프런트엔드 패키지 정적 리소스 교차 도메인 등 여러 측면을 고려해야 합니다. 그들에게 별도로.
Vue.js 애플리케이션에서 API는 프런트엔드 애플리케이션과 상호 작용해야 합니다. 이러한 API가 다른 도메인에 있는 경우 교차 도메인을 수행해야 합니다. 다음 방법으로 이 문제를 해결할 수 있습니다.
API 서버에서 Access-Control-Allow-Origin 헤더를 설정하여 브라우저에 신뢰할 수 있는 역방향 프록시를 지정합니다. 측면 서버의 주소는 도메인 간 문제를 해결할 수 있습니다.
Access-Control-Allow-Origin HTTP 헤더는 서버가 신뢰하는 도메인 이름을 식별합니다. 이 헤더에 클라이언트에서 요청한 주소가 포함되어 있으면 API 서버는 요청 통과를 허용합니다.
Access-Control-Allow-Origin: http://your-domain.com/
모든 도메인이 API에 액세스하도록 허용하려면 와일드카드를 사용할 수 있습니다.
Access-Control-Allow-Origin: *
이 해결 방법은 간단하지만 매우 제한적이며 대부분의 애플리케이션에 적합하지 않습니다.
역방향 프록시를 통과할 수 있는 요청을 더 잘 제어하려면 Nginx와 같은 역방향 프록시 서버를 사용할 수 있습니다. 역방향 프록시 서버는 원격 서버(예: API 서버)에서 데이터를 가져와 클라이언트에 반환하는 데 사용됩니다.
역방향 프록시를 사용하면 API 서버가 인터넷에 노출되지 않습니다. 대신 클라이언트는 역방향 프록시에 요청을 보내고 여기에서 데이터를 가져옵니다. 역방향 프록시 서버는 요청 파이프라인을 통과하는 요청을 제어합니다.
예를 들어 Vue.js 애플리케이션의 특정 API의 경우 다음 Nginx 서버 구성을 설정할 수 있습니다.
location /api/ {
proxy_pass http://your-api-server.com/;
add_header 'Access-Control-Allow-Origin' 'http://your-domain.com/';
}위 설정은 /api/* 경로에 대한 모든 요청이 API 서버 상위로 전달됩니다. 도메인 이름이 your-domain.com인 사용자로부터 요청이 전송되면 역방향 프록시 서버는 요청 통과를 허용합니다. 이 도메인의 요청만 허용됩니다. 다른 도메인 이름은 거부됩니다. /api/*路径的请求将转发到API服务器上。当从域名为your-domain.com的用户发送的请求时，反向代理服务器将允许请求通过。只有来自这个域名的请求才会被允许。其他域名将被拒绝。
Vue.js应用程序在生产环境中会被打包为静态文件，并且会在应用程序所在的服务器上进行部署。如果你的前端应用和API部署在不同的服务器上，遇到这种情况时，我们需要做如下处理：
打包好的前端静态代码，如果没有设置publicPath，它会通过相对路径的形式引用相关资源。相对路径的导入方式会使用'./'、'../'等表示导入资源的路径标识符，而这些标识符表示的路径仅仅是相对于代码文件的。
在打包后的静态资源中，你会发现资源路径都以相对路径的方式被访问。如果你把打包后的代码直接拷贝到其他的服务器上进行访问，你会发现访问会出现问题。
为了解决这个问题，需要在打包静态文件的时候添加一个publicPath，将所有的路径改变为绝对路径。
在部署前，打开 vue.config.js
vue.config.js 파일을 열고 publicPath 주소를 추가하세요. 예: 🎜module.exports = {
publicPath: 'http://cdn.example.com/vue-app'
}정적 리소스와 API 리소스가 모두 CDN 도메인 이름 아래에 있는 경우 Nginx 역방향 프록시를 사용하는 대신 CORS 규칙을 설정해야 합니다. 이 경우 Nginx에는 일반적으로 CDN 가속 계층이 있기 때문입니다.
CDN 콘솔에서 도메인 간 CORS 규칙을 설정하고, Access-Control-Allow-Origin 헤더를 켜고, 프런트 엔드 코드가 정적 리소스에 액세스하도록 허용하고, 도메인 간 리소스 액세스 문제를 해결하세요.
Vue.js 애플리케이션을 개발할 때 도메인 간 문제를 해결하는 것은 중요한 단계입니다. 이 기사에서는 Vue.js의 도메인 간 문제를 해결하는 방법을 자세히 설명합니다. 다양한 시나리오에 대해 다양한 도메인 간 솔루션이 필요합니다. 도메인 간 문제를 이해하고 마스터함으로써 Vue.js 애플리케이션의 성능과 안정성을 효과적으로 향상시킬 수 있습니다.
위 내용은 Vue는 도메인 간 문제를 해결하기 위해 온라인으로 배포합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
