axios跨域請求詳解

一、axios跨域請求cookie丟失

當使用axios發起跨域請求時，可能會遇到cookie丟失的問題。

這是因為在跨域請求時，瀏覽器默認會禁止攜帶cookie信息，防止CSRF攻擊。

解決這個問題的方法有兩種：一種是在服務端設置Access-Control-Allow-Credentials為true，表示允許跨域請求攜帶cookie；另一種是在axios請求的withCredentials設置為true，表示允許跨域請求攜帶cookie。

// 服務端代碼
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Credentials', 'true');
  res.header('Access-Control-Allow-Origin', req.headers.origin);
  next();
});

// axios跨域請求
axios.get(url, {
  withCredentials: true
}).then(res => {
  console.log(res);
}).catch(error => {
  console.log(error);
});

二、axios實現跨域請求

axios可以通過設置請求頭，實現跨域請求。

在axios請求時，可以設置請求頭中的”Access-Control-Allow-Origin”，”Access-Control-Allow-Methods”和”Access-Control-Allow-Headers”字段，讓服務端允許跨域請求。

// axios跨域請求
axios.get(url, {
  headers: {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE',
    'Access-Control-Allow-Headers': 'Content-Type, Authorization'
  }
}).then(res => {
  console.log(res);
}).catch(error => {
  console.log(error);
});

三、axios跨域請求設置

除了設置請求頭和withCredentials外，我們還可以通過配置axios的全局設置，來實現跨域請求。具體來說，我們可以通過設置axios.defaults.baseURL和axios.defaults.withCredentials來實現跨域請求。

// 設置axios的全局配置
axios.defaults.baseURL = 'http://example.com';
axios.defaults.withCredentials = true;

// axios跨域請求
axios.get(url).then(res => {
  console.log(res);
}).catch(error => {
  console.log(error);
});

四、vue3 axios跨域請求

在vue3中，我們可以通過安裝vue-axios插件，來進行跨域請求。

首先，在vue項目中安裝vue-axios插件：

npm install axios vue-axios --save

然後，在main.js中進行配置：

import axios from 'axios';
import VueAxios from 'vue-axios';
import Vue from 'vue';

Vue.use(VueAxios, axios);

Vue.axios.defaults.baseURL = '/api';
Vue.axios.defaults.withCredentials = true;

最後，在組件中使用：

const params = {
  name: 'Alice',
  age: 18
};

this.axios.get('/user', {params}).then(res => {
  console.log(res);
}).catch(error => {
  console.log(error);
});

五、axios請求頭允許跨域

有時候我們需要在請求頭中添加一些自定義的字段，此時需要在服務端配置Access-Control-Allow-Headers，允許跨域請求頭中包含自定義字段。

// 服務端代碼
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Token');

// axios請求頭設置
const headers = {
  'Authorization': 'Bearer xxx',
  'Token': 'yyy'
};

axios.get(url, {headers}).then(res => {
  console.log(res);
}).catch(error => {
  console.log(error);
});

六、axios封裝請求

為了方便調用，我們可以把常用的axios請求封裝成一個函數。

// 封裝請求函數
const request = (url, method, data) => {
  const config = {
    method,
    url,
    headers: {'Content-Type': 'application/json'},
    data
  };
  return axios(config);
};

// 使用封裝的請求函數進行請求
const params = {
  name: 'Alice',
  age: 18
};

request('/user', 'get', params).then(res => {
  console.log(res);
}).catch(error => {
  console.log(error);
});

七、axios添加請求頭跨域

我們還可以把跨域請求需要的請求頭，封裝進axios的攔截器中，這樣可以使請求更加方便。

// 添加攔截器
axios.interceptors.request.use(config => {
  config.headers['Content-Type'] = 'application/json';
  config.headers['Authorization'] = 'Bearer xxx';
  return config;
}, error => {
  return Promise.reject(error);
});

// axios請求
axios.get(url).then(res => {
  console.log(res);
}).catch(error => {
  console.log(error);
});

八、axios解決跨域

在使用axios進行跨域請求時，可能會遇到各種各樣的問題，比如請求返回404錯誤，請求超時等等。

解決這些問題的方法有很多種，比如調整請求方式、修改請求頭、增加請求參數等等。

下面是一些常見的解決方案：

1、把跨域請求的域名加入到CORS白名單中；

2、在服務端設置Access-Control-Allow-Origin為請求域名；

3、把請求的數據類型從JSON改成字面量；

4、使用JSONP代替AJAX請求；

5、使用代理服務器，把請求轉發到目標服務器。