vue 使用 axios 请求出现options 问题。

最新推荐文章于 2025-06-05 09:20:49 发布

qee_wong

最新推荐文章于 2025-06-05 09:20:49 发布

阅读量2.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： axios

本文链接：https://blog.youkuaiyun.com/qee_wong/article/details/89405865

在Vue项目中，使用axios进行API请求时遇到预检请求（OPTIONS）问题。为解决这个问题，需要在axios配置中设置headers，将'Content-Type'设为'application/json'，确保JSON格式的发送。同时，在SpringBoot应用中，需在SecurityConfig的httpSecurity中处理CORS，允许OPTIONS请求，以完成跨域设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue 使用 axios 请求出现options 问题

axios配置

config.headers[‘Content-Type’] = ‘application/json’ ，我们要求json格式发送

import axios from 'axios'
import router from '@/router'
import store from '../store'
import { getToken } from '@/utils/auth'

// 创建axios实例
const service = axios.create({
  baseURL: process.env.BASE_API, // api 的 base_url
  timeout: 900000 // 请求超时时间
})

// request拦截器
service.interceptors.request.use(
  config => {
    if (getToken()) {
      config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
    }
    config.headers['Content-Type'] = 'application/json'
    return config
  },
  error => {
    // Do something with request error
    console.log(error) // for debug
    Promise.reject(error)
  }
)

// response 拦截器
service.interceptors.response.use(
  response => {
    const code = response.status
    if (code < 200 || code > 300)