你这是什么垃圾浏览器,这都不能显示(╯‵□′)╯︵┻━┻

Axios 发送请求时携带 Cookies

Author Avatar
猪蹄宝宝 2021-02-26
  • 在其它设备中阅读本文章

前文提到过,Axios 的核心是 XMLHttpRequestXMLHttpRequest 对象在默认情况下并不会发送 Cookies,需要设置 withCredentials: true才行。
但是只有前端设置也是没有用的,涉及跨域的情况下,还需要后端配合。我用的是 Spring,就用 Spring 的配置类演示了。

// ajax 封装插件, 使用 axios
import Vue from 'vue'
import axios from 'axios'
import Config from '@/config'

const config = {
  baseURL: Config.baseURL || process.env.apiUrl || '',
  timeout: 5 * 1000, // 请求超时时间设置
  crossDomain: true,
  withCredentials: true, // Check cross-site Access-Control
  // 定义可获得的http响应状态码
  // return true、设置为null或者undefined,promise将resolved,否则将rejected
  validateStatus(status) {
    return status >= 200 && status < 510
  },
}

// 创建请求实例
const _axios = axios.create(config)

// 其他代码
// ...
@Configuration(proxyBeanMethods = false)
public class WebConfiguration implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                // 跨域域名绝对不能配置为通配符,必须指定具体的域名,且http和https是算两个域名的,如果两个都要支持就都要写
                .allowedOriginPatterns("http://localhost:18080", "你的域名")
                .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*")
                // 允许跨域接受Cookie
                .allowCredentials(true)
                .exposedHeaders(HttpHeaders.CONTENT_DISPOSITION);
    }
}

参考:You Don't Know Axios