如何解决先后端不一样端口号 跨域问题

2021年09月16日 阅读数:4
这篇文章主要向大家介绍如何解决先后端不一样端口号 跨域问题,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

前端:Vue2.x 项目javascript

后端:SpringBoot前端

报错:浏览器控制台报错403,Access to XMLHttpRequest at 'http://localhost:8080/xxx' from ...java

1. 前端axios请求发送的默认端口要与后端的端口一致

let axiosInstance = axios.create({
  // 发送默认请求到本机的8280端口!!
  baseURL:'http://localhost:8280',
  timeout:3000
});

2. 后端Controller在类上面添加注解@CrossOrigin(origins = "*",maxAge = 3600)

@CrossOrigin(origins = "*",maxAge = 3600) //容许先后端跨域,响应前的缓存持续1小时
public class BankInfoController {
  // Your methods...
}

3. 在后端java包中新建一个包,里面新建一个类MyConfiguration,内容以下

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
@SuppressWarnings("deprecation")
@Configuration
public class MyConfiguration {
  @Bean
  public WebMvcConfigurer corsConfigurer() {
    return new WebMvcConfigurerAdapter() {
      @Override
      public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**");
      }
    };
  }
}