Vue Router 도메인 간 오류 보고의 원인과 해결 방법에 대해 이야기해 보겠습니다.

Vue 라우터 도메인 간 오류 보고는 매우 일반적인 문제입니다. Vue Router를 사용할 때 도메인을 넘어 다른 웹사이트나 API에 접속하면 크로스 도메인 오류가 발생합니다. 이 글에서는 Vue Router의 크로스 도메인 오류의 원인과 해결 방법을 소개합니다.

1. 도메인 간 이유

브라우저에서 동일 출처 정책은 웹사이트의 JavaScript가 해당 사이트의 리소스에만 액세스하도록 제한하는 보안 메커니즘입니다. 동일 출처 정책은 한 도메인 이름 아래의 페이지에서 Ajax를 사용하여 다른 도메인 이름 아래의 API 인터페이스를 호출하는 것과 같이 스크립트를 통해 다른 도메인의 데이터에 대한 도메인 간 액세스를 허용하지 않습니다. 그렇게 하면 보안 문제가 발생하고 공격자가 도메인 간 스크립팅을 통해 사용자의 중요한 정보를 훔칠 수 있기 때문입니다.

2. vue-router의 도메인 간 오류 보고

Vue 라우터 라우팅은 브라우저 기반이므로 동일 출처 정책에 의해 제한됩니다. Vue 구성 요소에서 Vue 라우터를 사용하여 다른 사이트나 API 인터페이스에 액세스하면 도메인 간 오류가 발생합니다. 오류 메시지는 일반적으로 다음과 같습니다.

원본 'http://localhost:8080'의 'http://xxxxxx'에서 XMLHttpRequest에 대한 액세스가 CORS 정책에 의해 차단되었습니다. 'Access-Control-Allow-Origin' 헤더가 없습니다.

브라우저가 다른 도메인 이름에 대한 요청을 제한하고 다른 사이트에서는 사이트 리소스에 대한 도메인 간 요청을 허용하지 않기 때문에 이 교차 도메인 오류는 CORS 오류를 표시합니다. 로컬 서버를 사용하는 경우 서버가 Vue Router 도메인 간 요청에 필요한 CORS로 구성되지 않았기 때문에 이 문제가 발생할 수 있습니다.

3. 교차 도메인 오류 보고서를 해결하는 방법

1. 백엔드 프록시 사용

백엔드 프록시는 교차 도메인 제한을 우회할 수 있습니다. 서버는 다른 사이트에 요청을 보내고 응답을 받으면 요청과 응답을 완료하고 요청된 리소스와 응답 데이터를 각각 처리합니다. 프런트엔드 코드에서는 백엔드 프록시의 URL로 요청을 보낸 다음 백엔드 프록시에서는 요청을 대상 URL로 보내고 수신된 응답을 프런트엔드에 반환합니다. 다음은 샘플 코드입니다.

// 前端代码
fetch('/api').then(res => {
  console.log(res)
})

// 服务器代理代码
app.get('/api', (req, res) => {
  axios.get('http://othersite.com/api').then(response => {
    res.json(response.data)
  }).catch(error => {
    console.log(error)
  })
})

2. CORS 구성

브라우저를 통해 도메인 간 API 또는 리소스에 직접 액세스하려는 경우 서버의 CORS를 직접 구성할 수 있습니다. 교차 출처 요청을 허용하려면 서버에서 Access-Control-Allow-Origin 헤더를 설정하십시오. 다음은 몇 가지 일반적인 CORS 구성 예입니다.

• Node.js(Express):

  R

  res.header("Access-Control-Allow-Origin", "*")
  res.header("Access-Control-Allow-Headers", "X-Requested-With,Content-Type")
  res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS")
  next()

  E

• APACHE:

  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>

  EE

• nginx:

  add_header 'Access-Control-Allow-Origin' '*';
  add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
  add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization';
  add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';

  E

4, 요약

Vue 라우터 교차 도메인 오류는 다음과 같습니다. 이는 매우 일반적인 문제입니다. Vue.js 프레임워크를 사용하여 개발할 때 이 문제를 깊이 이해하면 백엔드 프록시 및 CORS 구성을 사용하여 CORS 오류를 피할 수 없습니다. 개발 효율성을 향상시킬 뿐만 아니라 코드 품질도 효과적으로 향상시킵니다. 위는 Vue Router와 두 가지 솔루션에서 보고된 도메인 간 오류의 이유입니다.

위 내용은 Vue Router 도메인 간 오류 보고의 원인과 해결 방법에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!