使用vue+axios+spring boot前後端分離專案時會出現跨域問題

解決方式:

一: 全域性配置

/**
   * 就是註冊的過程，註冊Cors協議的內容。
   * 如： Cors協議支援哪些請求URL，支援哪些請求型別，請求時處理的超時時長是什麼等。
   */
  @Override
  public void addCorsMappings(CorsRegistry registry) {
    registry
        .addMapping("/**")// 所有的當前站點的請求地址，都支援跨域訪問。
        .allowedMethods("GET","POST","PUT","DELETE") // 當前站點支援的跨域請求型別是什麼。
        .allowCredentials(true) // 是否支援跨域使用者憑證
        .allowedOrigins("*") // 所有的外部域都可跨域訪問。 如果是localhost則很難配置，因為在跨域請求的時候，外部域的解析可能是localhost、127.0.0.1、主機名
        .maxAge(60); // 超時時長設定為1小時。 時間單位是秒。
  }

二: 針對單個介面,使用註解@CrossOrigin

 /**
  * @desc
  * @author guozhongyao
  * @date 2020/03/22 17:05
  */
 @RestController
 @RequestMapping("/user")
 @RequiredArgsConstructor
 @CrossOrigin(origins = "*",maxAge = 3600)
 public class UserController {
   final UserMapper userMapper;
   @GetMapping("/getOne/{id}")
   public User getOne(@PathVariable("id") Integer id) {
     return userMapper.getById(id);
   }
 }

三: 自定義跨域過濾器

1,編寫過濾器

/**
 * @desc 跨域過濾器
 * @author guozhongyao
 * @date 2020/3/30 15:54
 */
class CrosFilter implements Filter {

  @Override
  public void doFilter(ServletRequest request,ServletResponse response,FilterChain chain) throws IOException,ServletException {
    HttpServletResponse res = (HttpServletResponse) response;
    //*號表示對所有請求都允許跨域訪問
    res.addHeader("Access-Control-Allow-Origin","*");
    res.addHeader("Access-Control-Allow-Methods","*");
    chain.doFilter(request,response);
  }
}

2,註冊過濾器

/**
   * @desc 註冊自定義跨域過濾器
   * @author guozhongyao
   * @date 2020/3/30 15:52
   */
  @Bean
  public FilterRegistrationBean registerFilter(){
    FilterRegistrationBean bean = new FilterRegistrationBean();
    bean.addUrlPatterns("/*");
    bean.setFilter(new CrosFilter());
    return bean;
  }

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。