Axios에서 쿠키 크로스 도메인을 구현하는 방법

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: '*'

• header informationAccess-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)
})

위는 제가 모두를 위해 컴파일한 내용입니다 , 앞으로 모든 사람에게 도움이 되길 바랍니다.

관련 기사:

vue2에서 keep-alive를 사용하는 방법

webpack에는 jquery 플러그인에 대한 환경 구성이 있습니다(자세한 튜토리얼)

🎜🎜🎜Bootstrap4 + Vue2에서 페이징 쿼리를 구현하는 방법🎜🎜

위 내용은 Axios에서 쿠키 크로스 도메인을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!