찾다
웹 프론트엔드프런트엔드 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으로 문의하시기 바랍니다. 삭제
Vue常见面试题汇总(附答案解析)Vue常见面试题汇总(附答案解析)Apr 08, 2021 pm 07:54 PM

本篇文章给大家分享一些Vue面试题(附答案解析)。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

5 款适合国内使用的 Vue 移动端 UI 组件库5 款适合国内使用的 Vue 移动端 UI 组件库May 05, 2022 pm 09:11 PM

本篇文章给大家分享5 款适合国内使用的 Vue 移动端 UI 组件库,希望对大家有所帮助!

vue中props可以传递函数吗vue中props可以传递函数吗Jun 16, 2022 am 10:39 AM

vue中props可以传递函数;vue中可以将字符串、数组、数字和对象作为props传递,props主要用于组件的传值,目的为了接收外面传过来的数据,语法为“export default {methods: {myFunction() {// ...}}};”。

手把手带你利用vue3.x绘制流程图手把手带你利用vue3.x绘制流程图Jun 08, 2022 am 11:57 AM

利用vue3.x怎么绘制流程图?下面本篇文章给大家分享基于 vue3.x 的流程图绘制方法,希望对大家有所帮助!

聊聊vue指令中的修饰符,常用事件修饰符总结聊聊vue指令中的修饰符,常用事件修饰符总结May 09, 2022 am 11:07 AM

本篇文章带大家聊聊vue指令中的修饰符,对比一下vue中的指令修饰符和dom事件中的event对象,介绍一下常用的事件修饰符,希望对大家有所帮助!

如何覆盖组件库样式?React和Vue项目的解决方法浅析如何覆盖组件库样式?React和Vue项目的解决方法浅析May 16, 2022 am 11:15 AM

如何覆盖组件库样式?下面本篇文章给大家介绍一下React和Vue项目中优雅地覆盖组件库样式的方法,希望对大家有所帮助!

通过9个Vue3 组件库,看看聊前端的流行趋势!通过9个Vue3 组件库,看看聊前端的流行趋势!May 07, 2022 am 11:31 AM

本篇文章给大家分享9个开源的 Vue3 组件库,通过它们聊聊发现的前端的流行趋势,希望对大家有所帮助!

react与vue的虚拟dom有什么区别react与vue的虚拟dom有什么区别Apr 22, 2022 am 11:11 AM

react与vue的虚拟dom没有区别;react和vue的虚拟dom都是用js对象来模拟真实DOM,用虚拟DOM的diff来最小化更新真实DOM,可以减小不必要的性能损耗,按颗粒度分为不同的类型比较同层级dom节点,进行增、删、移的操作。

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 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

mPDF

mPDF

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

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

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

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

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

VSCode Windows 64비트 다운로드

VSCode Windows 64비트 다운로드

Microsoft에서 출시한 강력한 무료 IDE 편집기