Vue에서 도메인 간 요청을 만드는 방법은 무엇입니까?

Vue는 최신 웹 애플리케이션을 구축하는 데 널리 사용되는 JavaScript 프레임워크입니다. Vue를 사용하여 애플리케이션을 개발할 때 종종 다른 서버에 있는 다양한 API와 상호 작용해야 하는 경우가 있습니다. 도메인 간 보안 정책 제한으로 인해 Vue 애플리케이션이 하나의 도메인 이름에서 실행 중인 경우 다른 도메인 이름의 API와 직접 통신할 수 없습니다. 이 기사에서는 Vue에서 도메인 간 요청을 수행하는 몇 가지 방법을 소개합니다.

1. 프록시 사용

일반적인 도메인 간 솔루션은 프록시를 사용하는 것입니다. 이 경우 Vue 애플리케이션은 동일한 서버에 HTTP 요청을 하여 브라우저의 동일 출처 정책을 우회합니다. 서버는 요청을 수신하여 실제 API로 전달합니다. 프록시 서버는 API와 동일한 도메인에 있으므로 브라우저는 이에 대한 도메인 간 보안 제한을 발행하지 않습니다. 다음은 프록시 설정 방법의 예입니다.

// vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

위의 예에서는 /api로 시작하는 모든 요청을 https://example.com</code로 프록시합니다. > . 소스를 <code>target의 주소로 설정하려면 changeOrigin을 true로 설정하고, pathRewrite를 설정하면 를 변경합니다. >/ api가 요청에서 제거됩니다. /api开头的请求代理到https://example.com上。changeOrigin设置为true表示将源设置为target的地址，并设置pathRewrite以将/api从请求中删除。

2. JSONP（仅限GET请求）

JSONP是一种旧的跨域解决方案，它使用GET请求在不同的域上动态添加一个<script>标签。通过将callback函数名作为参数传递，服务器可以将JSON数据包裹在回调函数中返回给客户端。由于脚本源不受同源策略的影响，因此浏览器不会限制从不同域返回的脚本。该方法仅适用于GET请求，因为它没有请求主体。

以下是JSONP的示例：

export default {
  getData() {
    return new Promise((resolve, reject) => {
      const script = document.createElement('script');
      const url = 'https://example.com/data?callback=getdata';

      script.src = url;
      document.head.appendChild(script);

      window.getdata = (data) => {
        document.head.removeChild(script);
        delete window.getdata;
        resolve(data);
      }
    });
  }
}

在上面的示例中，我们使用Promise来封装JSONP的请求，创建一个<script>标签并将其添加到document.head中。当服务器返回数据时，将回调函数的名称设置为window.getdata，在回调函数中删除<script>标签，并将数据传递给resolve回调。

3. CORS

跨域资源共享（CORS）是一种现代的跨域解决方案，它允许服务器指定哪些来源（域名）有权限访问API。服务器通过返回特定的响应标头来实现此目的。当浏览器发出跨域请求时，它会在预检请求中请求服务器访问控制响应头来验证是否允许请求。如果API返回此响应头，浏览器将允许跨域请求。

以下是一个CORS的示例：

export default {
  getData() {
    return fetch('https://example.com/data', {
      method: 'GET',
      mode: 'cors',
      headers: {
        'Access-Control-Allow-Origin': '*'
      }
    })
      .then(response => response.json())
      .then(data => data);
  }
}

在上面的示例中，我们使用fetch函数来获取API数据，同时将mode设置为cors，以启用CORS。我们还在请求头中设置了Access-Control-Allow-Origin

2. JSONP(GET 요청만 해당)

JSONP는 GET 요청을 사용하여 다양한 도메인에 <script> 태그를 동적으로 추가하는 오래된 도메인 간 솔루션입니다. 콜백 함수 이름을 매개변수로 전달하면 서버는 콜백 함수에 JSON 데이터를 래핑하여 클라이언트에 반환할 수 있습니다. 스크립트 소스는 동일 출처 정책의 영향을 받지 않으므로 브라우저는 다른 도메인에서 반환되는 스크립트를 제한하지 않습니다. 이 방법은 요청 본문이 없으므로 GET 요청에만 작동합니다.

다음은 JSONP의 예입니다. 🎜rrreee🎜위의 예에서는 Promise를 사용하여 JSONP 요청을 캡슐화하고 <script> 태그를 생성한 후 문서에 추가합니다. .머리. 서버가 데이터를 반환하면 콜백 함수 이름을 window.getdata로 설정하고 콜백 함수에서 <script> 태그를 제거한 후 데이터를 해결 콜백. 🎜🎜3. CORS🎜🎜CORS(교차 원본 리소스 공유)는 서버가 API에 액세스할 수 있는 권한이 있는 원본(도메인 이름)을 지정할 수 있는 최신 도메인 간 솔루션입니다. 서버는 특정 응답 헤더를 반환하여 이를 수행합니다. 브라우저가 원본 간 요청을 할 때 요청이 허용되는지 확인하기 위해 실행 전 요청의 서버 액세스 제어 응답 헤더를 요청합니다. API가 이 응답 헤더를 반환하면 브라우저는 교차 출처 요청을 허용합니다. 🎜🎜다음은 CORS의 예입니다. 🎜rrreee🎜위 예에서는 mode를 로 설정하면서 <code>fetch 함수를 사용하여 API 데이터를 가져옵니다. cors 를 사용하여 CORS를 활성화합니다. 또한 요청 헤더에 Access-Control-Allow-Origin 헤더를 설정하여 모든 원본이 API에 액세스할 수 있도록 허용합니다. CORS가 제대로 작동하려면 서버가 응답에 이 헤더를 반환해야 합니다. 🎜🎜결론🎜🎜Vue의 교차 도메인 요청은 프록시, JSONP 및 CORS와 같은 다양한 방법을 사용할 수 있습니다. 각 방법에는 고유한 장점, 단점 및 적용 가능한 시나리오가 있습니다. 특정 솔루션을 사용하기로 선택할 때는 API 보안, 요청의 복잡성, 응답 속도를 고려하세요. 🎜

위 내용은 Vue에서 도메인 간 요청을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!