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、使用代理服务器，把请求转发到目标服务器。