一招制敌！跨域问题终结者：Vue、Axios、Springboot，一网打尽

2023-12-30 12:01:47

彻底解决跨域问题的终极指南

作为前端开发者，跨域问题一直是我们的噩梦，就像一根刺深深扎在心里，让我们抓耳挠腮，一筹莫展。不过，这一切都将成为过去！本文将为您奉上跨域问题的终极解决方案，让您彻底摆脱跨域的困扰。

一、Vue跨域配置

在Vue中，跨域配置主要通过config.js文件来实现。在这个文件中，我们可以通过配置代理，轻松解决跨域问题。

// config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

上面的代码配置了一个代理，将所有以/api开头的请求都转发到localhost:8080端口。这样，当您在项目中发起请求时，实际发送的请求路径就会是http://localhost:8080/api。

二、Axios跨域配置

Axios是一个流行的HTTP请求库，在Vue项目中经常使用。其跨域配置非常简单，只需在创建Axios实例时将withCredentials属性设置为true即可。

// main.js
import axios from 'axios'

const instance = axios.create({
  withCredentials: true
})

这样，使用Axios发起跨域请求时，会自动带上cookie，从而解决跨域问题。

三、SpringBoot跨域配置

SpringBoot是Java开发人员常用的后端框架。其跨域配置也很简单，只需在项目中添加如下配置即可：

// SpringBoot项目中的配置
@Configuration
@EnableWebMvc
public class WebMvcConfig extends WebMvcConfigurerAdapter {

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