vue에서는 프록시 전달이 사용되지 않습니다.

Vue로 개발할 때 백엔드 API 서버와 상호 작용해야 하는 경우가 많습니다. CORS(Cross-Origin Resource Sharing) 문제를 방지하기 위해 일반적으로 Vue 구성에서 프록시 전달을 사용하여 요청을 전달합니다. 그러나 때로는 프록시를 사용하지 않고 API 서버와 직접 상호 작용해야 하는 경우가 있습니다.

1. 타사 라이브러리 사용

VueCLI의 기본 프록시 구성을 사용하지 않으려면 타사 라이브러리를 사용하여 요청하도록 선택할 수 있습니다. 예를 들어 Axios를 사용하면 요청 시 요청 헤더와 관련 매개변수를 설정하여 API 서버와 직접 상호작용할 수 있습니다.

먼저 Vue 프로젝트에 Axios를 설치해야 합니다.

npm install axios --save

요청을 해야 하는 컴포넌트에서 다음과 같이 Axios를 사용할 수 있습니다.

import axios from 'axios'

axios.get('/api/getUserInfo', {
  headers: {
    'Content-Type': 'application/json'
  }
}).then(res => {
  console.log(res)
})

코드에서는 Axios의 get 메소드를 사용하여 요청을 수행합니다. 요청과 동시에 요청을 설정합니다. 헤더 contentType은 application/json입니다. 이러한 방식으로 API 서버에 대한 요청을 직접 시작하고 데이터를 얻을 수 있습니다.

2. Webpack 플러그인 사용

Webpack 플러그인을 사용하여 프록시를 사용하지 않고 전달된 요청을 구현할 수도 있습니다. 구체적인 구현은 API 서버에 액세스하기 위해 express 및 http-proxy-middleware 플러그인과 협력하여 프록시 서버를 대체할 로컬 서버를 설정하는 것입니다.

먼저 관련 플러그인을 설치해야 합니다.

npm install express http-proxy-middleware --save-dev

프로젝트 루트 디렉터리에 새 server.js 파일을 생성하여 로컬 서버를 시작합니다.

const express = require('express')
const proxy = require('http-proxy-middleware')

const app = express()

app.use('/api', proxy({
  target: 'http://api.server.com',
  changeOrigin: true,
  pathRewrite: {
    '^/api': ''
  }
}))

app.listen(3000, () => {
  console.log('Server is running at localhost:3000')
})

여기에서는 http-proxy-middleware를 사용하여 API를 구현합니다. server Forward를 선택하고 대상 서버를 지정하려면 대상을 설정하세요.

그런 다음 package.json 파일에 스크립트 명령을 추가하여 로컬 서버를 시작합니다.

"scripts": {
  "dev-server": "node server.js"
}

마지막으로 Vue 프로젝트의 axios 구성에서 baseURL을 http://localhost:3000/api로 설정합니다. API 서버에 대한 요청:

import axios from 'axios'

axios.defaults.baseURL = 'http://localhost:3000/api'

axios.get('/getUserInfo').then(res => {
  console.log(res)
})

이 방법으로 http://localhost:3000/api/getUserInfo 주소를 통해 API 서버에 대한 요청을 직접 시작할 수 있습니다.

요약

위는 Proxy Forwarding을 사용하지 않고 Vue를 개발에 활용하는 두 가지 방법입니다. 프록시 전달을 사용하는 것이 CORS를 해결하는 효과적인 방법이지만 어떤 경우에는 API 서버와 직접 상호 작용하는 것이 더 편리합니다. 이 기사가 도움이 되기를 바랍니다.

위 내용은 vue에서는 프록시 전달이 사용되지 않습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!