Vue 프로젝트 개발에서 도메인 간 요청 처리 경험 공유

프론트엔드 기술의 지속적인 발전과 인기로 인해 Vue는 그 중 하나로서 점점 더 많은 관심과 응용을 받고 있습니다. Vue 프로젝트를 개발할 때 도메인 간 요청 문제가 자주 발생합니다. 프로젝트가 정상적으로 실행되도록 하려면 어떻게 처리해야 할까요? 이 기사에서는 개인적인 경험을 바탕으로 Vue 프로젝트 개발에서 도메인 간 요청 처리 경험을 공유합니다.

먼저 도메인 간 요청이란 무엇인가요? 간단히 말해서, 한 도메인 이름의 웹 페이지는 다른 도메인 이름의 리소스에 액세스할 수 없습니다. 특히, 프런트엔드와 백엔드가 분리된 경우 프런트엔드 애플리케이션(예: Vue 애플리케이션)이 백엔드 API에 대한 요청을 시작하면 둘이 서로 다른 도메인 이름에 속하므로 제한됩니다. 브라우저의 동일 출처 정책에 의해 정상적으로 접속이 불가능합니다. 이때 교차 도메인 요청을 처리하려면 몇 가지 수단을 사용해야 합니다.

1. 프록시 사용

도메인 간 요청을 처리하는 일반적인 방법 중 하나는 프록시를 사용하는 것입니다. 즉, Vue 애플리케이션의 구성 파일에 프록시 서버 주소를 설정하고 먼저 프록시 서버에 대한 요청을 시작한 다음 프록시 서버가 이를 백엔드 API로 전달합니다. 이러한 방식으로 프런트엔드 애플리케이션은 일반적으로 백엔드 API에서 데이터를 요청할 수 있습니다. Vue 프로젝트에서는 vue.config.js에서 다음과 같은 설정을 할 수 있습니다. vue.config.js中进行如下设置：

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

其中，target参数指向后端API的地址，changeOrigin指示是否修改请求头中的Origin属性，pathRewrite用于重写请求路径，将以/api开头的路径替换成以/开头的路径。

二、使用JSONP

JSONP（JSON with Padding）是一种借助<script>标签的GET请求实现跨域请求的方法。具体实现是，在前端应用中创建一个<script>标签，将请求的URL设置为后端API的URL，并在URL中传递一个回调函数名，后端API在返回数据时，将数据包裹在该回调函数名的函数调用中返回，前端应用便可以通过该回调函数名获取数据了。在Vue项目中，可以通过如下方式实现JSONP请求：

export function jsonp (url, data, callback) {
  let script = document.createElement('script')
  let params = ''
  for (let key in data) {
    params += `${key}=${data[key]}&`
  }
  url += '?' + params
  script.src = url + 'callback=' + callback
  document.body.appendChild(script)
  // 移除script标签
  script.onload = function () {
    document.body.removeChild(script)
  }
}

其中，url参数为后端API的地址，data参数为请求参数，callback参数为回调函数名。该方法通过创建一个<script>标签的方式发起GET请求，并将请求结果作为函数调用返回给回调函数。

三、使用CORS

CORS（Cross-Origin Resource Sharing）是一种标准的跨域请求解决方案，主要涉及浏览器和服务器之间的交互。通过在服务器端配置响应头中的Access-Control-Allow-Origin属性，可以允许前端应用跨域访问后端API。在Vue项目中，可以设置XHR请求的withCredentials属性为true，发起CORS请求。具体实现如下：

export function xhr (method, url, data, headers) {
  return new Promise((resolve, reject) => {
    let xhr = new XMLHttpRequest()
    xhr.withCredentials = true
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          resolve(JSON.parse(xhr.responseText))
        } else {
          reject(xhr.statusText)
        }
      }
    }
    xhr.open(method, url, true)
    for (let key in headers) {
      xhr.setRequestHeader(key, headers[key])
    }
    xhr.send(data)
  })
}

其中，method参数为请求方法，url参数为请求地址，data参数为请求参数，headers参数为请求头。该方法通过创建一个XMLHttpRequest对象，设置其withCredentialsrrreee

그 중 target 매개변수는 백엔드 API의 주소를 가리키며, changeOrigin은 요청 헤더의 Origin 속성을 ​​수정할지 여부를 나타냅니다. pathRewrite는 요청 경로를 다시 쓰는 데 사용되며 경로로 대체됩니다. /api로 시작하여 /로 시작하는 경로로 이동합니다.

2. JSONP 사용🎜🎜JSONP(JSON with Padding)는 <script> 태그가 있는 GET 요청을 사용하여 도메인 간 요청을 구현하는 방법입니다. 구체적인 구현은 프런트엔드 애플리케이션에서 <script> 태그를 생성하고, 요청된 URL을 백엔드 API의 URL로 설정하고, URL에 콜백 함수 이름을 전달하는 것입니다. 그리고 백엔드 API가 반환합니다. 데이터를 수신하면 콜백 함수 이름의 함수 호출에 데이터를 래핑하고 반환합니다. 프런트엔드 응용 프로그램은 콜백 함수 이름을 통해 데이터를 얻을 수 있습니다. Vue 프로젝트에서는 JSONP 요청을 다음과 같은 방법으로 구현할 수 있습니다. 🎜rrreee🎜 그 중 url 매개변수는 백엔드 API의 주소인 data 매개변수는 요청 매개변수이고 콜백 매개변수는 콜백 함수의 이름입니다. 이 메소드는 <script> 태그를 생성하여 GET 요청을 시작하고 요청 결과를 함수 호출로 콜백 함수에 반환합니다. 🎜🎜3. CORS 사용🎜🎜CORS(Cross-Origin Resource Sharing)는 주로 브라우저와 서버 간의 상호 작용을 포함하는 표준 교차 도메인 요청 솔루션입니다. 서버측 응답 헤더에 Access-Control-Allow-Origin 속성을 ​​구성하면 프런트엔드 애플리케이션이 도메인 전체에서 백엔드 API에 액세스하도록 허용할 수 있습니다. Vue 프로젝트에서는 XHR 요청의 withCredentials 속성을 ​​true로 설정하여 CORS 요청을 시작할 수 있습니다. 구체적인 구현은 다음과 같습니다. 🎜rrreee🎜 그 중 method 매개변수는 요청 메소드이고, url 매개변수는 요청 주소, data입니다. code> 매개변수는 요청 매개변수이고 headers 매개변수는 요청 헤더입니다. 이 메소드는 XMLHttpRequest 객체를 생성하고, 해당 withCredentials 속성을 ​​true로 설정하고, XHR 요청을 시작하고, 응답이 완료된 후 Promise 결과를 반환합니다. 🎜🎜요약하자면, 프록시, JSONP 및 CORS를 사용하여 도메인 간 요청을 처리함으로써 Vue 프로젝트는 프런트엔드 및 백엔드 데이터와 정상적으로 상호 작용하여 개발 효율성과 사용자 경험을 향상시킬 수 있습니다. 특정 애플리케이션에서는 프로젝트 요구 사항 및 백엔드 API 인터페이스에 따라 적절한 방법을 선택할 수 있습니다. 🎜

위 내용은 Vue 프로젝트 개발에서 도메인 간 요청 처리 경험 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!