Comment implémenter les cookies entre domaines dans axios

Depuis que j'ai rejoint Vue, j'utilise la bibliothèque axios pour effectuer des requêtes asynchrones. L'article suivant vous présente principalement les informations pertinentes sur les cookies inter-domaines et la configuration associée dans axios. L'article le présente en détail à travers un exemple de code. Les amis dans le besoin peuvent s'y référer ci-dessous.

Avant-propos

Récemment, j'ai rencontré quelques problèmes mineurs lors du téléchargement entre domaines, cookies et formulaires. Permettez-moi de faire une brève exploration et. résumé. . Cet article présente principalement le contenu pertinent sur les cookies inter-domaines et la configuration associée dans axios. Je ne dirai pas grand-chose ci-dessous, jetons un coup d'œil à l'introduction détaillée.

1. Demande avec cookie - mettre en évidence les points clés

axios n'apporte pas de cookies par défaut lors de l'envoi d'une demande, vous devez le paramétrer il faut withCredentials: truepour le résoudre. À ce stade, vous devez faire attention à la nécessité de paramètres de coordination back-end :

• informations d'en-têteAccess-Control-Allow-Credentials:true

• Accès- Control-Allow-Origin ne peut pas être '*', car '*' entrera en conflit avec Access-Control-Allow-Credentials:true, vous devez configurer l'adresse spécifiée

Si le backend est défini Access-Control-Allow-Origin: '*' , il y aura le message d'erreur suivant

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.

La configuration du backend est indispensable, sinon des erreurs se produiront :

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: '*' // 这样会出错
  })

Après succès, vous. peut voir

2. La configuration Axios de mon code de projet front-end

La configuration unifiée Axios améliorera considérablement l'efficacité et évitera les bugs. , et localisez les bogues (informations pratiques sur les erreurs capturées)

Créez une requête axios de package fetch.js distincte et exposez-la en tant que méthode

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

Comme indiqué ci-dessous, si vous devez appeler un requête ajax

import fetch from '@/utils/fetch'
fetch({
 method: 'get',
 url: '/users/list'
})
 .then(res => {
 cosole.log(res)
})

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Comment utiliser keep-alive dans vue2

Dans webpack, il existe une configuration d'environnement concernant le plug jquery -in (Tutoriel détaillé)

Comment implémenter une requête de pagination dans Bootstrap4 + Vue2

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!