So implementieren Sie domänenübergreifende Cookies in Axios

Seit ich Vue beigetreten bin, verwende ich die Axios-Bibliothek, um einige asynchrone Anfragen zu stellen. Der folgende Artikel führt Sie hauptsächlich in die relevanten Informationen zur domänenübergreifenden Cookie-Konfiguration in Axios ein. Freunde in Not können sich dies unten ansehen.

Vorwort

Vor kurzem bin ich auf einige kleinere Probleme beim domänenübergreifenden Hochladen von Cookies und beim Hochladen von Formularen gestoßen Zusammenfassung. . In diesem Artikel werden hauptsächlich relevante Inhalte zum domänenübergreifenden Cookie und der zugehörigen Konfiguration in Axios vorgestellt. Im Folgenden werde ich nicht viel sagen. Werfen wir einen Blick auf die detaillierte Einführung.

1. Anfrage mit Cookie – Markieren Sie die wichtigsten Punkte

Axios bringt beim Senden einer Anfrage standardmäßig keine Cookies mit, die Sie festlegen müssen es auf withCredentials: trueum es zu lösen. Zu diesem Zeitpunkt müssen Sie auf die Notwendigkeit von Back-End-Koordinationseinstellungen achten:

• Header-InformationenAccess-Control-Allow-Credentials:true

• Zugriff- Control-Allow-Origin darf nicht „*“ sein, da „*“ mit Access-Control-Allow-Credentials:true in Konflikt steht. Sie müssen die angegebene Adresse

Wenn das Backend konfiguriert ist gesetzt ist Access-Control-Allow-Origin: '*' , erscheint die folgende Fehlermeldung

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.

Backend-Konfiguration ist unbedingt erforderlich, sonst kommt es zu Fehlern:

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

Nach Erfolg sehen Sie

in der Anfrage 2. Axios-Konfiguration meines Front-End-Projektcodes

Die einheitliche Axios-Konfiguration wird die Effizienz erheblich verbessern, Fehler vermeiden und Fehler lokalisieren (praktisch zum Erfassen von Fehlerinformationen)

Erstellen Sie eine separate fetch.js, um die Axios-Anfrage zu kapseln und als Methode verfügbar zu machen

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

Wie unten gezeigt, wenn Sie eine Ajax-Anfrage aufrufen müssen

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

Das Obige habe ich zusammengestellt. Ich hoffe, es wird in Zukunft für alle hilfreich sein.

Verwandte Artikel:

So verwenden Sie Keep-Alive in Vue2

Im Webpack gibt es eine Umgebungskonfiguration für den JQuery-Plug -in (Ausführliches Tutorial)

So implementieren Sie eine Paging-Abfrage in Bootstrap4 + Vue2

Das obige ist der detaillierte Inhalt vonSo implementieren Sie domänenübergreifende Cookies in Axios. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!