Vue에 합류한 이후로 저는 axios 라이브러리를 사용하여 비동기 요청을 해왔습니다. 다음 글에서는 Axios의 쿠키 크로스 도메인 및 관련 구성에 대한 관련 정보를 주로 소개하고 있으며, 샘플 코드를 통해 자세히 소개하고 있으니, 필요하신 분들은 아래에서 참고하시기 바랍니다.
머리말
최근 크로스 도메인, 쿠키 및 양식 업로드 측면에서 몇 가지 사소한 문제에 직면했습니다. 이번 글에서는 주로 axios의 쿠키 크로스 도메인 및 관련 구성에 대한 관련 내용을 소개합니다. 아래에서는 자세히 설명하지 않겠습니다. 자세한 소개를 살펴보겠습니다.
1. 쿠키로 요청 - 중요한 점을 지적하세요.
axios는 기본적으로 쿠키를 보내지 않으므로 withCredentials: true
를 설정하여 해결해야 합니다. 이때 백엔드 설정에 주의해야 합니다: withCredentials: true
来解决。 这个时候需要注意需要后端配合设置:
header信息 Access-Control-Allow-Credentials:true
Access-Control-Allow-Origin不可以为 '*',因为 '*' 会和 Access-Control-Allow-Credentials:true 冲突,需配置指定的地址
如果后端设置 Access-Control-Allow-Origin: '*'
Access-Control-Allow-Credentials:true
Access-Control-Allow-Origin: '*'
인 경우 다음과 같은 오류 메시지가 나타납니다Failed to load http://localhost:8090/category/lists: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:8081' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.백엔드 구성이 필수이며, 그렇지 않으면 오류가 발생합니다. 내 백엔드 예제 붙여넣기:
const express = require('express') const app = express() const cors = require('cors') // 此处我的项目中使用express框架,跨域使用了cors npm插件 app.use(cors{ credentials: true, origin: 'http://localhost:8081', // web前端服务器地址 // origin: '*' // 这样会出错 })성공한 후 요청 2에서 볼 수 있습니다. 내 프런트엔드 프로젝트 코드의 axios 구성 axios 통합 구성은 효율성을 크게 향상시키고 버그를 방지하며 위치를 찾을 수 있습니다. bugs (편리한 캡처 오류 정보)별도의 fetch.js를 만들어서 axios 요청을 캡슐화하여 메소드로 노출합니다
import axios from 'axios' // 创建axios实例 const service = axios.create({ baseURL: process.env.BASE_API, // node环境的不同,对应不同的baseURL timeout: 5000, // 请求的超时时间 //设置默认请求头,使post请求发送的是formdata格式数据// axios的header默认的Content-Type好像是'application/json;charset=UTF-8',我的项目都是用json格式传输,如果需要更改的话,可以用这种方式修改 // headers: { // "Content-Type": "application/x-www-form-urlencoded" // }, withCredentials: true // 允许携带cookie }) // 发送请求前处理request的数据 axios.defaults.transformRequest = [function (data) { let newData = '' for (let k in data) { newData += encodeURIComponent(k) + '=' + encodeURIComponent(data[k]) + '&' } return newData }] // request拦截器 service.interceptors.request.use( config => { // 发送请求之前,要做的业务 return config }, error => { // 错误处理代码 return Promise.reject(error) } ) // response拦截器 service.interceptors.response.use( response => { // 数据响应之后,要做的业务 return response }, error => { return Promise.reject(error) } ) export default service아래와 같이 ajax 요청을 호출해야 하는 경우
import fetch from '@/utils/fetch' fetch({ method: 'get', url: '/users/list' }) .then(res => { cosole.log(res) })위는 제가 모두를 위해 컴파일한 내용입니다 , 앞으로 모든 사람에게 도움이 되길 바랍니다. 관련 기사:
webpack에는 jquery 플러그인에 대한 환경 구성이 있습니다(자세한 튜토리얼)
🎜🎜🎜Bootstrap4 + Vue2에서 페이징 쿼리를 구현하는 방법🎜🎜위 내용은 Axios에서 쿠키 크로스 도메인을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!