Vue 배포 서버가 도메인 간 문제를 해결하는 방법-프런트엔드 Q&A-php.cn

집

웹 프론트엔드

프런트엔드 Q&A

Vue 배포 서버가 도메인 간 문제를 해결하는 방법

PHPz

May 08, 2023 am 11:23 AM

Vue.js는 웹 애플리케이션 개발에 널리 사용되는 뛰어난 프런트 엔드 개발 프레임워크입니다. 이는 개발자가 현대적이고 효율적인 애플리케이션을 신속하게 구축하는 데 도움이 됩니다. 그러나 실제 개발에서는 특히 Vue.js 애플리케이션을 서버에 배포할 때 도메인 간 문제가 발생할 수 있습니다. 이 문서에서는 Vue.js 애플리케이션의 도메인 간 문제를 해결하는 방법을 자세히 설명합니다.

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

간단히 말하면 크로스 도메인이란 한 웹사이트의 페이지에서 다른 웹사이트의 리소스를 요청하는 것을 의미합니다. 교차 도메인 문제는 주로 브라우저의 동일 출처 정책으로 인해 발생합니다. 동일 출처 정책은 웹 애플리케이션이 한 소스에서 다른 소스로 로드된 문서나 스크립트에서 개인 정보를 얻는 것을 방지하는 클라이언트측 보안 정책입니다.

교차 도메인이 필요한 이유는 무엇인가요?

실제 개발에서는 여러 도메인에 걸쳐 다른 웹사이트의 API나 리소스에 액세스해야 하는 경우가 많습니다. 예를 들어, 다른 서버에서 데이터를 얻거나 다른 웹사이트의 인터페이스를 호출해야 할 수도 있습니다. 예를 들어 Vue.js 애플리케이션에서는 데이터를 얻기 위해 서버에 AJAX 요청을 보내야 할 수도 있습니다. 서버가 도메인 간 요청을 허용하지 않으면 데이터를 얻을 수 없으며 애플리케이션이 제대로 작동하지 않습니다.

교차 도메인 문제를 해결하는 방법

서버 측에 CORS 헤더 정보 추가

CORS(Cross-Origin Resource Sharing)는 브라우저가 교차 도메인 요청을 서버에 보낼 수 있도록 하는 메커니즘입니다. 도메인 간 요청을 반환하는 서버입니다. CORS는 프런트엔드 애플리케이션의 도메인 간 문제를 해결할 수 있도록 브라우저에서 구현되는 표준입니다.

서버 측에서 CORS 헤더 정보를 추가하는 방법은 매우 간단합니다. 반환된 HTTP 응답에 특정 헤더 정보를 추가하기만 하면 됩니다.

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization

로그인 후 복사

위 헤더 정보의 의미는 다음과 같습니다.

Access-Control-Allow-Origin: 허용되는 도메인 이름을 지정합니다. *는 모든 도메인 이름이 허용되거나 하나 이상의 도메인 이름을 지정할 수 있음을 의미합니다. * 表示允许所有域名，也可以指定一个或多个域名。
Access-Control-Allow-Methods：指定允许的 HTTP 方法。
Access-Control-Allow-Headers：指定允许的 HTTP 头信息。

这种方法的缺点是需要在服务器端添加头信息，如果应用程序需要访问多个不同的服务器或者 API，需要在每个服务器上都进行配置。

使用 JSONP

JSONP 是一种跨域解决方案，它利用了浏览器对跨域访问 <script> 标签的支持。JSONP 的原理是将跨域请求转化为一个 <script> 标签，这个标签的 src 属性指向解决跨域的服务端程序，服务端程序返回一段 JavaScript 代码，这段代码将返回的数据以参数的形式传递给前端页面上的一个函数。

Vue.js 中使用 JSONP 的方法很简单，只需引入一个 JSONP 库，并使用 $jsonp() 方法发送 JSONP 请求即可。具体如下：

import jsonp from 'jsonp';

jsonp('https://api.example.com/data', (err, res) => {
   if (err) {
      console.error(err);
   } else {
      console.log(res);
   }
});

로그인 후 복사

此方法的缺点是 JSONP 只支持 GET 请求，而且只能返回 JSON 格式的数据。

使用反向代理

反向代理是一种服务器端解决跨域请求的方法。它利用了服务器之间的互联和通讯，使用服务器端的程序作为代理，将前端页面中的请求转化为后端程序的请求，从而避免了浏览器端的同源策略限制。

反向代理的实现方法很多，可以使用 Apache、Nginx 等 Web 服务器的反向代理模块，也可以使用 Node.js 中的 express 框架等实现反向代理的功能。

在 Vue.js 中使用反向代理的方法如下：

在 config/index.js 文件中添加如下代码：

module.exports = {
  dev: {
    // ...
    proxyTable: {
      '/api': {
          target: 'http://example.com',
          changeOrigin: true,
          pathRewrite: {
              '^/api': ''
          }
      }
    }
  }
};

로그인 후 복사

上述代码表示，将所有以 /api 开头的请求转发到 http://example.com，并且在请求头中加上 Origin

Access-Control-Allow-Methods: 허용되는 HTTP 메서드를 지정합니다.

Access-Control-Allow-Headers: 허용되는 HTTP 헤더를 지정합니다.

이 방법의 단점은 헤더 정보를 서버 측에 추가해야 한다는 것입니다. 애플리케이션이 여러 다른 서버 또는 API에 액세스해야 하는 경우 각 서버에서 구성해야 합니다.

<script>

src

$jsonp()

config/index.js

/ api

http://example.com

Origin