Nuxt 사용axios 도메인 간 문제 해결
도메인 간 해결
Nuxt는 axios를 사용하여 전방 페이지의 크로스 필드 문제를 피하기 위해 @nuxtjs/axios와 @nuxtjs/proxy 두 모듈을 설치해야 합니다.
yarn으로 설치:
yarn add axios @nuxtjs/axios @nuxtjs/proxy
npm를 사용하여 설치:
npm install axios @nuxtjs/axios @nuxtjs/proxy
주의: @nuxtjs/proxy 모듈을 수동으로 등록할 필요는 없지만, 의존 항목에 있는지 확인해야 합니다.
설치가 완료되면nuxt.config.js 파일에 다음 구성을 추가합니다.
module.exports = {
/*
** Nuxt.js modules
*/
modules: ["@nuxtjs/axios"],
/*
** axios proxy
*/
axios: {
proxy: true
},
/*
** proxy
*/
proxy: {
"/api": "http://localhost:3000"
},
/*
** Build configuration
** See https://nuxtjs.org/api/configuration-build/
*/
build: {
vendor: ["axios"]
}
}
여기에서 프록시 설정이 완료되었습니다. 다음 크로스 필드 문제가 해결되었는지 테스트할 수 있습니다.확장axios
nuxt 플러그인을 만들고 전역 설정을 변경합니다. 전역 설정 사용자 정의axios,plugins/디렉터리에 새 axios를 만듭니다.js 파일:
// plugins/axios.js
export default function({ $axios, redirect }) {
$axios.onResponse(res => {
return res.data
})
$axios.onError(error => {
const code = parseInt(error.response && error.response.status);
if (code === 400) {
redirect("/400");
}
});
}
nuxt에 있습니다.config.js에서 axios를 설정합니다.js 플러그인:
module.exports = {
/*
** Plugins to load before mounting the App
** https://nuxtjs.org/guide/plugins
*/
plugins: ["@/plugins/axios"],
}
axios 플러그인 사용하기위의 설정을 통과한 후,axios 플러그인을 사용하면 주의해야 할 것은asyncData 내에서와 asyncData 밖에서의 사용은 다르다는 것이다.
** asyncData에서 사용: **
async asyncData({ $axios }) {
const ip = await $axios.get('http://icanhazip.com')
return { ip }
}
** asyncData 외부에서 사용: **
methods: {
async fetchSomething() {
const ip = await this.$axios.get('http://icanhazip.com')
this.ip = ip
}
}
Nuxt와axios의 통합에 대한 더 많은 소개는 공식 문서를 볼 수 있습니다 Axios 모듈.부록:nuxt는axios의 전역 처리 설정을 사용합니다
npm i axios qs
npm i @nuxtjs/axios @nuxtjs/proxy --save-dev
plugins/axios.jsqs를 사용하여 매개 변수에서 비트 문자열 변환 요청
import qs from "qs";
export default function({ $axios, redirect }) {
$axios.onRequest(config => {
config.data = qs.stringify(config.data, {
allowDots: true //Option allowDots can be used to enable dot notation
});
return config;
});
$axios.onResponse(response => {
return Promise.resolve(response.data);
});
$axios.onError(error => {
return Promise.reject(error);
});
}
nuxt.config.js
plugins: [
{ src: "~plugins/axios.js", ssr: true },
],
//
modules: ["@nuxtjs/axios", "@nuxtjs/proxy"],
axios: {
retry: { retries: 3 },
// debug
debug: process.env._ENV == "production" ? false : true,
//
baseURL:
process.env._ENV == "production"
? "http://localhost:3000/api"
: "http://localhost:3000/api",
withCredentials: true,
},
proxy: {
//
"/api/": {
target: "http://192.168.1.2:10086/v1",
pathRewrite: { "^/api/": "" }
}
}
페이지에서this.$사용axios 요청Nuxt 사용 axios 크로스오버 문제 해결에 관한 이 글은 여기까지 소개합니다. 더 많은 관련 Nuxt 사용 axios 크로스오버 내용은 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Nuxt 구성 Element-UI 필요에 따라 도입Nuxt가create-nuxt-app을 사용하여 프로젝트를 만들 때 Element-UI를 기본 구성 요소 라이브러리로 선택하면 Nuxt가 Element-UI의 필요에 따라 설정을 도입하지 않고 스스로 설정해야 합니다...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.