解决跨域问题大集合:vue-cli项目 和 java/springboot(6种方式) 两端解决(完美解决)

简介: 这篇文章详细介绍了如何在前端Vue项目和后端Spring Boot项目中通过多种方式解决跨域问题。

导言

一、跨域问题描述

1. 跨域报错信息

Access to XMLHttpRequest at ‘http:// localhost:8087/api/user/list’ from origin ‘http:// localhost:8081’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
在这里插入图片描述

2. 什么是跨域

简单一句话概况:当一个请求 url 的协议、域名、端口三者之间任意一个与当前页面 url 不同即为跨域

还不懂这个概念就找度娘吧,在这个博文里解释概念不是重点哈。

一、vue-cli配置代理

配置proxy来支持跨域,向后台请求登陆和数据,在Vue.config.js 配置文件中配置代理

方法一和方法二配置了也有可能不生效,还是爆跨越错误,请看第三点

1. 方法一

这个方法是有缺点的,只能配置一个。推荐使用方法二

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,                            // 关闭 ESlint
  devServer: {
      proxy: 'http://localhost:8888'
  }
})

2. 方法二

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,                            // 关闭 ESlint
  devServer: {
    // https: true,                             // 开启 https 模式
    proxy: {                                    // 配置服务器代理
      '/api': {                                 // 匹配访问路径中含有 '/api' 的路径
        target: 'http://localhost:8087/api/',   // 测试地址、目标地址
        pathRewrite: {                          // 匹配所有的以/api开头的换成 ''
          '^/api':''                             // 这边如果为空的话,那么发送到后端的请求是没有/api这个前缀的, 所以我在target 后面加上了 /api/
        }, 
        ws: true,                               // 用于支持websocket
        changeOrigin: true,                     // 伪装同源
      }
    }
  }
})

3. 注意的点(很重要)

a、axios 的 baseURL配置

我们在配置axios的全局地址baseURL时,一般是这样配置的:

const http = axios.create({
  baseURL: 'http://localhost:8087/',
})

还有可能不是这样直接配置的,而且先定义的变量,通过其他配置在取这个baseURL,但是这个一定是会配置的,我一般是定义下面的这个变量的,方便管理

// 判断当前的运行环境, 如果是开发,则取开发地址 否则 取生产地址 
let  baseUrl = '/'
if (process.env.NODE_ENV === 'development') {
  baseURL = 'http://localhost:8087/api/';
} else { // production 生产环境
  baseURL = '/';
}

b、解决问题

所以不论是 生产 还是 开发 环境下,我的请求都会发送给我们配置的baseURL而不会走我们的代理!!!

所以我们得修改一下配置,使我们的生产路径在开大环境下才生效

let  baseUrl = '/'
if (process.env.NODE_ENV === 'development') {
  baseURL = '/';
} else { // production 生产环境
  baseURL = '/';
}

const http = axios.create({
  baseURL,
})

这样在开发环境下,我们的 baseURL = "/" , 代理就可以生效了。

注意

二、后端解决跨域问题

借鉴博文SpringBoot解决跨域的5种方式

1. JAVA解决CORS跨域请求的几种方式

对于 CORS的跨域请求,主要有以下几种方式可供选择:

  1. 返回新的CorsFilter(全局跨域)
  2. 重写 WebMvcConfigurer(全局跨域)
  3. 使用注解 @CrossOrigin(局部跨域)
  4. 手动设置响应头 (HttpServletResponse) (局部跨域)
  5. 自定web filter 过滤器 实现跨域 (全局跨域)
  6. 自定义 springboot interceptor 拦截器 实现跨域 (全局跨域)

注意:

  1. CorFilter / WebMvConfigurer / @CrossOrigin 需要 SpringMVC 4.2以上版本才支持,对应springBoot 1.3版本以上
  2. 上面前两种方式属于全局 CORS 配置,后两种属于局部 CORS配置。如果使用了局部跨域是会覆盖全局跨域的规则,所以可以通过 @CrossOrigin 注解来进行细粒度更高的跨域资源控制。
  3. 其实无论哪种方案,最终目的都是修改响应头,向响应头中添加浏览器所要求的数据,进而实现跨域

2. 返回新的CorsFilter(全局跨域)

@Configuration
public class GlobalCorsConfig {

    @Bean
    public CorsFilter corsFilter() {
        //1. 添加 CORS配置信息
        CorsConfiguration config = new CorsConfiguration();
        //放行哪些原始域
        config.addAllowedOrigin("*");
        //是否发送 Cookie
        config.setAllowCredentials(true);
        //放行哪些请求方式
        config.addAllowedMethod("*");
        //放行哪些原始请求头部信息
        config.addAllowedHeader("*");
        //暴露哪些头部信息
        config.addExposedHeader("*");
        //2. 添加映射路径
        UrlBasedCorsConfigurationSource corsConfigurationSource = new UrlBasedCorsConfigurationSource();
        corsConfigurationSource.registerCorsConfiguration("/**",config);
        //3. 返回新的CorsFilter
        return new CorsFilter(corsConfigurationSource);
    }
}

3. 重写 WebMvcConfigurer(全局跨域)

// 案例 一
@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                //是否发送Cookie
                .allowCredentials(true)
                //放行哪些原始域
                .allowedOrigins("*")
                .allowedMethods(new String[]{"GET", "POST", "PUT", "DELETE"})
                .allowedHeaders("*")
                .exposedHeaders("*");
    }
}
// 案例 二 ,同上
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;


@Configuration
public class AccessControlAllowOriginFilter implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry){
        registry.addMapping("/*/**")
                .allowedHeaders("*")
                .allowedMethods("*")
                .maxAge(1800)
                .allowedOrigins("*");
    }
}

4. @CrossOrigin 注解(局部跨域)

在控制器(类上)上使用注解 @CrossOrigin:,表示该类的所有方法允许跨域。

@RestController
@CrossOrigin(origins = "*")
public class HelloController {

    @RequestMapping("/hello")
    public String hello() {
        return "hello world";
    }
}

在方法上使用注解 @CrossOrigin:

  @RequestMapping("/hello")
  @CrossOrigin(origins = "*")
   //@CrossOrigin(value = "http://localhost:8081") //指定具体ip允许跨域
  public String hello() {
        return "hello world";
  }

5. 手动设置响应头 (HttpServletResponse) (局部跨域)

使用 HttpServletResponse 对象添加响应头(Access-Control-Allow-Origin)来授权原始域,这里 Origin的值也可以设置为 “*”,表示全部放行。

@RequestMapping("/index")
public String index(HttpServletResponse response) {

    response.addHeader("Access-Allow-Control-Origin","*");
    return "index";
}

6. 自定web filter 过滤器 实现跨域 (全局跨域)

首先编写一个过滤器,可以起名字为MyCorsFilter.java

package cn.wideth.aop;

import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Component;

@Component
public class MyCorsFilter implements Filter {

  public void doFilter(ServletRequest req, ServletResponse res, 
  FilterChain chain) throws IOException, ServletException {

    HttpServletResponse response = (HttpServletResponse) res;
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
    response.setHeader("Access-Control-Max-Age", "3600");
    response.setHeader("Access-Control-Allow-Headers", "x-requested-with,content-type");
    chain.doFilter(req, res);

  }

  public void init(FilterConfig filterConfig) {}
  public void destroy() {}
}

7. 自定义 springboot interceptor 拦截器 实现跨域 (全局跨域)

先写拦截器MyInterceptor.java的实现类

package com.feng.springboot_interceptor.interceptor;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.util.StringUtils;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class MyInterceptor implements HandlerInterceptor {

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with,content-type");
        return true;
    }

    @Override
    public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {
        System.out.println("MyInterceptor...请求处理之后进行调用,但是在视图被渲染之前(Controller方法调用之后)");
        //HandlerInterceptor.super.postHandle(request, response, handler, modelAndView);
    }

    @Override
    public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {
        System.out.println("MyInterceptor....在整个请求结束之后被调用,也就是在DispatcherServlet 渲染了对 应的视图之后执行(主要是用于进行资源清理工作)");
        //HandlerInterceptor.super.afterCompletion(request, response, handler, ex);
    }
}

在写WebAppConfig.java,重写 WebMvcConfigurer.java 类,将拦截器注入(我这里写的是对请求的过滤,可以忽略掉)

package com.feng.springboot_interceptor.config;

import com.feng.springboot_interceptor.interceptor.MyInterceptor;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebAppConfig implements WebMvcConfigurer {
    @Value("${open.url}")
    private String openUrl;

    @Bean
    public MyInterceptor getMyInterceptor() {
        return new MyInterceptor();
    }

    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        // 拦截以 /api 开头的请求,但是排除  openUrl:/**/open/**。 即 :匹配这个(/**/open/**)URL的所有请求不拦截
        registry.addInterceptor(getMyInterceptor()).addPathPatterns("/api/**").excludePathPatterns(openUrl);
        // WebMvcConfigurer.super.addInterceptors(registry);
    }
}
相关文章
|
6天前
|
XML Java 测试技术
从零开始学 Maven:简化 Java 项目的构建与管理
Maven 是一个由 Apache 软件基金会开发的项目管理和构建自动化工具。它主要用在 Java 项目中,但也可以用于其他类型的项目。
22 1
从零开始学 Maven:简化 Java 项目的构建与管理
|
1天前
|
安全 Java 应用服务中间件
SpringBoot:CORS是什么?SpringBoot如何解决跨域问题?
CORS是Web开发中常见且重要的机制,SpringBoot通过提供注解、全局配置和过滤器等多种方式来解决跨域问题。选择适合的方式可以帮助开发者轻松处理跨域请求,提高应用的灵活性和安全性。
20 2
|
27天前
|
Java 应用服务中间件
SpringBoot获取项目文件的绝对路径和相对路径
SpringBoot获取项目文件的绝对路径和相对路径
64 1
SpringBoot获取项目文件的绝对路径和相对路径
|
9天前
|
前端开发 安全 JavaScript
SpringBoot 如何解决跨域问题?
本文深入探讨了Spring Boot解决跨域问题的方法,包括全局配置CORS、使用@CrossOrigin注解和自定义过滤器,提供了详细的代码示例和分析,帮助开发者有效应对Web开发中的跨域挑战。
|
16天前
|
Java Android开发
Eclipse 创建 Java 项目
Eclipse 创建 Java 项目
36 4
|
17天前
|
存储 运维 安全
Spring运维之boot项目多环境(yaml 多文件 proerties)及分组管理与开发控制
通过以上措施,可以保证Spring Boot项目的配置管理在专业水准上,并且易于维护和管理,符合搜索引擎收录标准。
31 2
|
22天前
|
分布式计算 关系型数据库 MySQL
SpringBoot项目中mysql字段映射使用JSONObject和JSONArray类型
SpringBoot项目中mysql字段映射使用JSONObject和JSONArray类型 图像处理 光通信 分布式计算 算法语言 信息技术 计算机应用
38 8
|
19天前
|
Java
Java 8 引入的 Streams 功能强大,提供了一种简洁高效的处理数据集合的方式
Java 8 引入的 Streams 功能强大,提供了一种简洁高效的处理数据集合的方式。本文介绍了 Streams 的基本概念和使用方法,包括创建 Streams、中间操作和终端操作,并通过多个案例详细解析了过滤、映射、归并、排序、分组和并行处理等操作,帮助读者更好地理解和掌握这一重要特性。
25 2
|
24天前
|
存储 Java
判断一个元素是否在 Java 中的 Set 集合中
【10月更文挑战第30天】使用`contains()`方法可以方便快捷地判断一个元素是否在Java中的`Set`集合中,但对于自定义对象,需要注意重写`equals()`方法以确保正确的判断结果,同时根据具体的性能需求选择合适的`Set`实现类。
|
19天前
|
安全 Java
Java多线程集合类
本文介绍了Java中线程安全的问题及解决方案。通过示例代码展示了使用`CopyOnWriteArrayList`、`CopyOnWriteArraySet`和`ConcurrentHashMap`来解决多线程环境下集合操作的线程安全问题。这些类通过不同的机制确保了线程安全,提高了并发性能。