Vue 크로스 도메인 문제의 원인과 해결 방법에 대한 간략한 분석

프런트 엔드 기술의 발전으로 Vue는 사용 용이성, 효율성 및 유연성뿐 아니라 풍부한 지원 생태계 덕분에 많은 개발자가 매우 좋아하는 JavaScript 프레임워크가 되었습니다. 그러나 동시에 프런트엔드 프로젝트의 규모가 점점 커지면서 Vue 프로젝트의 배포 문제가 점차 드러나고 있습니다. 가장 일반적인 문제는 크로스 도메인 문제입니다. 이 기사에서는 Vue 크로스 도메인 문제의 원인, 해결 방법 및 관련 사례를 소개합니다.

1. Vue 도메인 간 문제가 존재하는 이유는 무엇입니까?

Vue 프로젝트에서 크로스 도메인 문제가 발생하는 이유는 브라우저의 동일 출처 정책 때문인데, 이는 프런트 엔드가 크로스 도메인 요청을 직접 시작할 수 없음을 의미합니다. 동일 출처 정책은 기본 보안 정책이지만 배포 중에 Vue 개발자에게 특정 문제를 일으킬 수도 있습니다. 일반적으로 브라우저는 두 URL의 프로토콜(http 또는 https), 도메인 이름 및 포트가 동일한지 확인하여 요청의 출처가 동일한지 여부를 결정합니다.

Vue 프로젝트에서 크로스 도메인 문제의 일반적인 예는 프런트엔드 프로젝트가 AJAX를 통해 백엔드 API를 요청할 때 백엔드 API의 URL이 해당 URL과 동일한 도메인에 있지 않은 경우입니다. 현재 Vue 프로젝트에서는 도메인 간 문제가 발생합니다.

2. Vue 도메인 간 문제를 해결하는 방법은 무엇입니까?

이제 문제가 명확해졌으니 해결 방법을 찾아보겠습니다. 아래에서는 가장 널리 사용되는 세 가지 방법인 크로스 도메인 문제를 해결하는 세 가지 일반적인 방법을 소개합니다.

1. 서버 측에 CORS 설정

서버 측에 CORS를 설정하면 도메인 간 문제를 해결할 수 있습니다. CORS(교차 원본 리소스 공유)는 도메인 간 문제에 대한 서버측 솔루션입니다. 서버는 HTTP 응답에서 Access-Control-Allow-Origin 헤더를 설정하여 어떤 도메인 이름 요청이 허용되는지 브라우저에 알려줍니다. 브라우저는 요청한 도메인 이름이 허용된 액세스 범위 내에 있음을 발견하면 요청 결과를 성공적으로 반환할 수 있습니다.

구체적인 구현 방법은 다음과 같습니다.

백엔드의 응답 헤더에 Access-Control-Allow-Origin 속성을 설정하여 프런트엔드 액세스를 허용합니다.

Access-Control-Allow-Origin: *

위 코드에서 *는 모든 요청 소스를 의미합니다. 허용됩니다.

2. webpack-dev-server의 ProxyTable 속성을 사용하세요

Vue에서는 개발 중 도메인 간 문제를 해결하기 위해 webpack-dev-server를 통해 ProxyTable을 구성할 수 있습니다. ProxyTable은 개발자의 로컬 요청을 서버에 프록시하여 도메인 간 문제를 효과적으로 해결할 수 있습니다.

proxyTable은 다음과 같이 구성됩니다.

dev: {
    proxyTable: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }

위 코드에서 /api는 프록시가 필요한 요청을 나타내고, target은 프록시가 필요한 백엔드 서버 주소를 나타내며,changeOrigin: true는 소스 변경 여부를 나타냅니다. 요청 및 pathRewrite는 요청 경로를 다시 쓰는 데 사용됩니다.

3. JSONP를 사용하여 교차 도메인 문제 해결

JSONP는 웹 페이지에 스크립트 태그를 동적으로 추가하고 이 스크립트 태그를 사용하여 교차 도메인 인터페이스에 액세스하고 해당 결과를 얻습니다. 프런트엔드는 요청 결과를 캡슐화하여 콜백 함수로 반환하여 도메인 간 요청을 구현합니다. JSONP가 구현되는 방식은 백엔드가 JavaScript 코드 조각을 반환하는 것입니다. 이 코드는 프런트엔드에서 정의한 콜백 함수를 호출하고 데이터를 콜백 함수에 매개변수로 전달합니다. 콜백 데이터.

다음은 JSONP 구현입니다.

백엔드 코드:

app.get('/jsonp', (req, res) => {
    const { data } = req.query;
    const callback = req.query.callback;
    const result = callback + '(' + JSON.stringify({ code: 0, data: data }) + ')';
    res.end(result);
});

프런트엔드 코드:

function jsonp(url, callback) {
    const script = document.createElement('script');
    script.src = `${url}?callback=${callback}`;
    document.body.append(script);
}

jsonp('http://localhost:3000/jsonp', function (res) {
    console.log(res);
});

3. 도메인 간 연습

연습 1: webpack-dev-server를 사용하여 ProxyTable을 설정합니다. 크로스 도메인 문제 해결

우리는 end-Vue 프로젝트에서 webpack-dev-server의 ProxyTable 속성을 통해 크로스 도메인 문제를 해결하는 방법을 설명하기 위해 백엔드 API에 대한 요청을 시작했습니다.

1. webpack-dev-server 및 http-proxy-middleware를 설치합니다.

프로젝트에 webpack-dev-server 및 http-proxy-middleware를 설치합니다.

npm install --save-dev webpack-dev-server http-proxy-middleware

2. webpack 구성 파일에 http-proxy-middleware를 도입합니다

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

3. webpack-dev-server 구성에서 ProxyTable을 사용합니다.

proxyTable: {
    '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
            '^/api': ''
        }
    }
}

위 코드에서는 /api 프록시를 구성하여 로컬에 프록시를 요청합니다. 포트 3000.

4. 프록시 요청 API 사용

Vue 프로젝트 코드에서는 /api를 URL 접두어로만 사용하면 요청이 로컬 3000 포트에 성공적으로 프록시될 수 있습니다.

axios.get('/api/users')

연습 2: CORS를 사용하여 백엔드에서 도메인 간 문제 해결

백엔드에 CORS를 설정하여 도메인 간 문제를 해결할 수 있습니다. 여기서는 node.js의 Express 프레임워크를 예로 들어 소개하겠습니다.

1. express를 설치합니다

프로젝트에 express를 설치합니다.

npm install express

2. server.js 또는 app.js 파일에 CORS를 설정합니다.

app.use((req, res, next) => {
    res.setHeader('Access-Control-Allow-Origin', '*');
    next();
});

위 코드는 CORS를 설정하여 모든 소스의 요청이 성공적으로 반환되도록 합니다.

3. 백엔드 API에서 이전 CORS 설정을 추가합니다.

app.get('/users', (req, res) => {
    const data = [
        { id: 1, name: 'Jack' },
        { id: 2, name: 'Lily' }
    ];
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.json(data);
});

위 코드에서는 서버 응답 헤더에 Access-Control-Allow-Origin 속성을 추가하여 브라우저에 요청할 수 있는 도메인 이름을 알려줍니다.

4. Vue 프로젝트에서 요청 시작

Vue 프로젝트의 Ajax 요청에서는 일반적인 방법으로 요청을 시작하기만 하면 됩니다.

axios.get('/users').then(resp => {
    console.log(resp.data);
});

결론

Vue의 크로스 도메인 문제는 비교적 흔한 문제이지만, 솔루션을 마스터한다면 쉽게 해결할 수 있습니다. 도메인 간 문제의 경우 서버에 CORS를 설정하거나, webpack-dev-server의 ProxyTable 속성을 사용하거나, JSONP를 사용하여 문제를 해결할 수 있습니다. 이 글에서는 연습을 통해 이 세 가지 방법의 구체적인 사용법을 소개하고 독자들이 실제로 더 많은 것을 얻을 수 있기를 바랍니다.

위 내용은 Vue 크로스 도메인 문제의 원인과 해결 방법에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!