Vue에서 크로스 도메인을 구현하는 방법

프론트엔드 기술의 지속적인 발전으로 인해 프론트엔드 엔지니어는 웹사이트를 만들 때 Ajax 요청을 통해 데이터를 얻어야 하는 경우가 많습니다. 이 과정에서 도메인 간 문제가 발생하기 쉽습니다. 이 기사에서는 Vue.js가 도메인 간 요청을 구현하는 방법을 소개합니다.

1. JSONP cross-domain

JSONP(JSON with Padding)는 도메인 간 데이터 상호 작용을 위한 솔루션입니다. 페이지에서 크로스 사이트 스크립팅을 로드할 수 있다는 원칙을 사용하여 구현됩니다.

Vue.js에서 JSONP 도메인 간 요청을 구현하려면 일반적으로 두 가지 방법이 있습니다.

1) 스크립트 태그 수동 생성

axios 또는 Vue-resource와 같은 HTTP 라이브러리를 사용하여 스크립트를 수동으로 생성하여 도메인 간 요청 시작 태그가 묻습니다.

import jsonp from 'jsonp';

jsonp(url, null, (err, data) => {
  if (err) {
    console.error(err.message);
  } else {
    console.log(data);
  }
});

2) Vue.js 플러그인 사용 jsonp

Vue.js는 JSONP 교차 도메인 요청을 구현하는 데 사용할 수 있는 jsonp라는 플러그인을 제공합니다.

import Vue from 'vue';
import VueJsonp from 'vue-jsonp';

Vue.use(VueJsonp);

Vue.jsonp(url).then(response => {
  console.log(response);
}).catch(error => {
  console.error(error.message);
});

2. CORS cross-domain

CORS(Cross-Origin Resource Sharing)는 웹사이트 서버가 브라우저에 대한 도메인 간 액세스를 허용하여 JSONP의 일부 보안 문제를 피할 수 있게 해주는 도메인 간 리소스 공유 솔루션입니다. 방법 .

Vue.js에서 CORS 도메인 간 요청을 사용하려면 서버 측에서 관련 설정이 필요합니다. 구체적인 구현 방법은 다음과 같습니다.

1) 응답 헤더에 Access-Control-Allow-Origin 필드를 추가합니다.

서버에서 반환한 응답 헤더에 Access-Control-Allow-Origin 필드를 추가하여 전면-허용을 허용합니다. 특정 도메인 이름의 최종 페이지 요청.

const express = require('express');
const app = express();

app.get('/api/data', (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8080');
  res.json(data);
});

2) Vue.js에서 요청 보내기

Vue.js의 Axios 라이브러리를 통해 도메인 간 요청을 보내고 withCredentials를 true로 설정하세요.

axios.get('http://api.example.com/data', {
  withCredentials: true
}).then(response => {
  console.log(response.data);
}).catch(error => {
  console.error(error.message);
});

요약

위는 Vue.js, JSONP 및 CORS에서 도메인 간 요청을 구현하는 두 가지 방법입니다. 실제 개발에서는 특정 상황에 따라 다양한 방법을 채택할 수 있습니다. 매우 안전하고 추가 서버 구성이 필요하지 않은 경우 JSONP 교차 도메인 솔루션을 사용할 수 있으며, 더 높은 보안과 더 큰 유연성이 필요한 경우 CORS 교차 도메인 솔루션을 사용할 수 있습니다.

위 내용은 Vue에서 크로스 도메인을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!