찾다
웹 프론트엔드프런트엔드 Q&Avue는 axios 요청의 프런트엔드 교차 도메인 문제를 어떻게 해결합니까(자세한 예)

이 기사는 vue가 axios 요청의 프런트엔드 크로스 도메인 문제를 해결하는 방법에 대한 관련 지식을 제공합니다. 모든 사람에게 도움이 되기를 바랍니다.

vue는 axios 요청의 프런트엔드 교차 도메인 문제를 어떻게 해결합니까(자세한 예)

일반적인 개발에는 도메인 간 문제에 대한 솔루션이 많이 있습니다. 가장 일반적인 것은 백엔드가 응답 헤더를 수정하는 것입니다. 하지만 프런트 엔드는 역방향 프록시를 통해서도 해결할 수 있습니다. 다음번에 이런 실수가 발생하지 않도록 기록하고 요약해 보세요.

이제 검토하고 해결해 보겠습니다.

1. 크로스 도메인 문제는 왜 발생하나요?

교차 도메인: 브라우저가 한 도메인 이름의 웹페이지에서 다른 도메인 이름으로 리소스를 요청할 때 도메인 이름, 포트 또는 프로토콜이 다른 경우 교차 도메인입니다.

프런트엔드와 백엔드 분리 모드에서는 프런트엔드와 백엔드의 도메인 이름이 일치하지 않아 도메인 간 액세스 문제가 발생합니다. 크로스 도메인 문제는 JavaScript의 동일 출처 정책에서 발생합니다. 즉, 프로토콜 + 호스트 이름 + 포트 번호(있는 경우)가 동일한 경우에만 상호 액세스가 허용됩니다. 즉, 자바스크립트는 자신의 도메인에 있는 리소스에만 접근하고 운영할 수 있고, 다른 도메인에 있는 리소스에는 접근하고 운영할 수 없습니다. 도메인 간 문제는 JS 및 ajax에 대한 것입니다. Axios는 Promise를 통해 Ajax 기술을 캡슐화한 것이며, 크로스 도메인 문제도 있습니다.

2. 솔루션

여기에서는 로컬 머신을 사용하여 테스트를 위해 두 개의 다른 포트를 엽니다.

크로스 도메인이 처리되지 않기 전에 보고된 오류

vue는 axios 요청의 프런트엔드 교차 도메인 문제를 어떻게 해결합니까(자세한 예)

요청이 도메인 간에 처리되지 않습니다. 이것은 다음과 같습니다.

 axios.get('http://localhost:8080/getData')
 .then(res => {
   console.log(res)
 })
 .catch(err => {
   console.error(err); 
 })

리버스 프록시

프런트 엔드는 크로스 도메인을 해결하기 위해 리버스 프록시를 수행합니다. 문제. 회로도는 다음과 같습니다:

vue는 axios 요청의 프런트엔드 교차 도메인 문제를 어떻게 해결합니까(자세한 예)

vue 프로젝트의 포트는 8081

vue는 axios 요청의 프런트엔드 교차 도메인 문제를 어떻게 해결합니까(자세한 예)

내 컴퓨터가 포트 8080을 열었고 /getData를 요청하면 json 데이터가 다시 저장됩니다.

프록시 구성

1. vue2.0

config 폴더 아래의 index.js 파일을 수정하고 다음 코드를 ProxyTable에 추가하세요.

   proxyTable: {
      '/apis': {
        target: 'http://localhost:8080/',  //要解决跨域的接口的域名
        secure:false,           //如果是https接口,需要配置这个参数
        changeOrigin: true,  // 如果接口跨域,需要进行这个参数配置
        pathRewrite: {
          '^/apis': ''  // 路径重写
        }
      },
    },

그런 다음 요청의 axios에 이를 작성하세요

 axios.get('apis/getData')
 .then(res => {
   console.log(res)
 })
 .catch(err => {
   console.error(err); 
 })

분석:

target 뒤에 오는 것은 요청해야 하는 URL의 공개 부분입니다. 그런 다음 /apis를 사용하여 이를 프록시하고 마지막으로 일부 경로를 다시 작성하고 요청할 때 프록시의 api를 접두사로 사용합니다.

이 접두사를 사용자 정의할 수 있습니다. ProxyTable은 객체이므로 여러 프록시를 구성할 수 있습니다.

교차 도메인 솔루션

vue는 axios 요청의 프런트엔드 교차 도메인 문제를 어떻게 해결합니까(자세한 예)

2. vue3.0에서

vue-cli3 스캐폴딩이 빌드된 후에는 프로젝트 디렉터리에 vue.config.js 파일이 없으며 이를 생성해야 합니다. 수동으로

새 vue.config .js를 생성하고 다음 정보를 구성하면 해결할 수도 있습니다.

module.exports = {   
    devServer: {
        proxy: {
            '^/api': {
                target: 'http://localhost:8080/',//接口的前缀
                ws:true,//代理websocked
                changeOrigin:true,//虚拟的站点需要更管origin
                pathRewrite:{
                    '^/api':''//重写路径
                }
            }
        }
    }
}

요약:

changeOrigin: true : 프록시를 켭니다. 로컬에 가짜 서버가 생성된 후 요청한 데이터를 보내고 요청한 데이터를 동시에 수신하므로 서버와 서버가 서로 서로 상호 작용합니다.

apis는 실제 인터페이스 접두사의 공개 부분, 즉 프로토콜 + 호스트 이름 + 포트 번호를 프록시하는 인터페이스의 실제 요청 접두사입니다.

예를 들어 요청 인터페이스는 localhost:8080/getData입니다. getData만 전달하면 됩니다.

그러면 공개 도메인 이름은 localhost:8080/입니다. 요청 인터페이스의 공개 도메인 이름 localhost:8080/을 api/로 변경하면 됩니다.

프로젝트를 실행하면 볼 수 있습니다. 인터페이스에서 요청한 경로는 다음과 같습니다: localhost:8081/ apis/getData

프록시를 입력한 후 실제 요청 경로는 다음과 같습니다: localhost:8080/getData

[관련 권장 사항: "vue.js tutorial"]

위 내용은 vue는 axios 요청의 프런트엔드 교차 도메인 문제를 어떻게 해결합니까(자세한 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
이 기사는 掘金에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
React의 SEO 친화적 인 특성 : 검색 엔진 가시성 향상React의 SEO 친화적 인 특성 : 검색 엔진 가시성 향상Apr 26, 2025 am 12:27 AM

예, ReactApplicationsCanbeseo 친화적 인 전략적 전략

React의 성능 병목 현상 : 느린 구성 요소 식별 및 최적화React의 성능 병목 현상 : 느린 구성 요소 식별 및 최적화Apr 26, 2025 am 12:25 AM

반응 성능 병목 현상은 주로 비효율적 인 렌더링, 불필요한 재 렌더링 및 구성 요소 내부 중량의 계산으로 인해 발생합니다. 1) ReactDevTools를 사용하여 느린 구성 요소를 찾아서 React.Memo 최적화를 적용하십시오. 2) useeffect를 최적화하여 필요할 때만 실행되도록하십시오. 3) 메모리 처리에는 usememo 및 usecallback을 사용하십시오. 4) 큰 구성 요소를 작은 구성 요소로 분할하십시오. 5) 빅 데이터 목록의 경우 가상 스크롤 기술을 사용하여 렌더링을 최적화하십시오. 이러한 방법을 통해 React Applications의 성능을 크게 향상시킬 수 있습니다.

React의 대안 : 다른 JavaScript UI 라이브러리 및 프레임 워크 탐색React의 대안 : 다른 JavaScript UI 라이브러리 및 프레임 워크 탐색Apr 26, 2025 am 12:24 AM

누군가는 성능 문제, 학습 곡선 또는 다른 UI 개발 방법을 탐색하여 반응 할 대안을 찾을 수 있습니다. 1) vue.js는 소형 및 대규모 응용 프로그램에 적합한 통합 및 가벼운 학습 곡선의 용이성으로 칭찬받습니다. 2) Angular는 Google에 의해 개발되며 강력한 유형 시스템 및 종속성 주입을 통해 대규모 응용 프로그램에 적합합니다. 3) Svelte는 빌드 타임에 효율적인 JavaScript로 컴파일하여 탁월한 성능과 단순성을 제공하지만 생태계는 여전히 성장하고 있습니다. 대안을 선택할 때 프로젝트 요구, 팀 경험 및 프로젝트 규모에 따라 결정해야합니다.

Keys and React의 조정 알고리즘 : 성능 향상Keys and React의 조정 알고리즘 : 성능 향상Apr 26, 2025 am 12:21 AM

keysinReactarespecialattributesSassignedToElementsInArraysforraysfortableIdentity, CrucialThereconciliationAlgorithm WhichupDatesThemonficially

RECT 프로젝트에 필요한 보일러 플레이트 코드 : 설정 오버 헤드 감소RECT 프로젝트에 필요한 보일러 플레이트 코드 : 설정 오버 헤드 감소Apr 26, 2025 am 12:19 AM

ToreDuceseTupoverHeadInReactProjects, usetoolslikecreateActapp (CRA), Next.js, Gatsby, Orstarterkits 및 메인 교도소 E.1) crasimplifiessetupwithinglecommand.2) next.jsandgatsbyoffermorefeaturesbutaLearningCurve.3) StarterKitsProvideCorgeni

usestate () 이해 : 국가 관리에 대한 포괄적 인 안내서usestate () 이해 : 국가 관리에 대한 포괄적 인 안내서Apr 25, 2025 am 12:21 AM

usestate () isareacthookusedtomanagestatefunctionalcomponents.1) itinitializesandupdatesstate, 2) workaledtthetThetThepleFcomponents, 3) canleadto'Stalestate'ifnotusedCorrecrally 및 4) performancanoptimizedUsecandusecaldates.

React 사용의 장점은 무엇입니까?React 사용의 장점은 무엇입니까?Apr 25, 2025 am 12:16 AM

Reactispopularduetoitscomponent 기반 아카데입, 가상, Richcosystem 및 declarativenature.1) 구성 요소 기반 ectureallowsforeusableuipieces, Modularityandmainability 개선 가능성.

React의 디버깅 : 일반적인 문제를 식별하고 해결합니다React의 디버깅 : 일반적인 문제를 식별하고 해결합니다Apr 25, 2025 am 12:09 AM

TodebugreactApplicationseffective, UsetheseStradegies : 1) 주소 propdrillingwithContapiorredux.2) handleaSnchronousOperationswithUsestAndUseefect, abortControllerTopReceConditions.3) 최적화 formanceSeMoAnduseCalbackTooid

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

에디트플러스 중국어 크랙 버전

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

맨티스BT

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

mPDF

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

MinGW - Windows용 미니멀리스트 GNU

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.