vueはaxiosを使ってoptions問題が発生することを要求します.

vueはaxiosを使ってoptions問題が発生することを要求します.

vue axios要求を使用してoptions問題が発生しました.

axios構成

springboot構成

vue axiosを使ってお願いします.options問題があります.
axios設定
config.headers[‘Content-Type]=‘appication/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) {
      // Notification.error({
      //   title: response.message
      // })
      return Promise.reject('error')
    } else {
      return response.data
    }
  },
  error => {
    let code = 0
    try {
      code = error.response.data.status
    } catch (e) {
      if (error.toString().indexOf('timeout')) {
        // Notification.error({
        //   title: '    ',
        //   duration: 2500
        // })
        return Promise.reject(error)
      }
    }
    if (code === 401) {
      。。。。。
    } else if (code === 403) {
      router.push({ path: '/401' })
    } else {
      const errorMsg = error.response.data.message
      if (errorMsg !== undefined) {
        // Notification.error({
        //   title: errorMsg,
        //   duration: 2500
        // })
        console.log(errorMsg)
      }
    }
    return Promise.reject(error)
  }
)
export default service

使い方:

import request from '@/utils/request'

。。。。。。
export function addUser(data) {
  return request({
    url: '/jspapi/addUser/1000006',
    method: 'post',
    data
  })
}

springbootの設定

クロスドメイン:

@Configuration
@EnableWebMvc
public class ConfigurerAdapter implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowCredentials(true)
                .allowedHeaders("*")
                .allowedOrigins("*")
                .allowedMethods("GET","POST","PUT","DELETE");

    }

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/**").addResourceLocations("classpath:/META-INF/resources/").setCachePeriod(0);
    }
}

2.sprigbootのpublic clast SecurityConfig extends WebSecurityConfigrer Adapterのhttp SecurityがOPTIONSを開放して要求する

.antMatchers(HttpMethod.OPTIONS, "/**").anonymous()

。。。
@Configuration
@EnableWebSecurity
@EnableGlobalMethodSecurity(prePostEnabled = true)
public class SecurityConfig extends WebSecurityConfigurerAdapter {

   。。。。。
    @Override
    protected void configure(HttpSecurity httpSecurity) throws Exception {

        httpSecurity

                //    CSRF
                .csrf().disable()

               。。。。
                //     
                .authorizeRequests()
                .antMatchers(
                        HttpMethod.GET,
                        "/*.html",
                        "/**/*.html",
                        "/**/*.css",
                        "/**/*.js",
                        "/**/*.txt",
                        "/**/*.jpg"
                ).permitAll()

                。。。。
                .antMatchers(HttpMethod.OPTIONS, "/**").anonymous()
                //    api  
                .antMatchers("/page").anonymous()
                .antMatchers("/jspapi/**").anonymous()
               // .antMatchers("/api/roles/tree").anonymous()
                //          
                .anyRequest().authenticated();

        httpSecurity
                .addFilterBefore(authenticationTokenFilter, UsernamePasswordAuthenticationFilter.class);
    }
}