0
点赞
收藏
分享

微信扫一扫

四种跨域解决方案

爱上流星雨 06-11 19:00 阅读 2
java跨域

文章目录

1.引出跨域

1.基本介绍

image-20240515085751169

2.具体演示
1.启动之前学习过的springboot-furn项目

image-20240515090423854

2.浏览器直接访问 localhost:8081/furns 可以显示信息

image-20240515090504976

3.启动前端项目,取消请求拦截器,这样设置,就会出现跨域

image-20240515092219659

image-20240515092248401

4.跨域原因
  • 当前端项目请求到后端,会返回跨域请求拦截
  • 原因是浏览器默认执行同源策略,会禁止读取localhost:8081的资源

2.跨域问题介绍

1.是什么?

image-20240515093221398

2.同源策略

image-20240515093525190

3.跨域流程

1.简单请求和非简单请求
1.简单请求

image-20240515094205791

2.非简单请求(不满足简单请求的就是非简单请求)
2.简单请求-跨域流程

image-20240515094529863

3.非简单请求-跨域流程

image-20240515094802953

4.非简单请求演示
1.这里的添加就是非简单请求

image-20240515095045529

2.测试请求,预检请求失败,不会发送真实请求

image-20240515095205895

4.跨域解决方案

1.Nginx反向代理

image-20240515095549092

image-20240515095608460

2.配置服务器允许跨域

image-20240515100001936

image-20240515100018589

image-20240515095916927

3.前端启用代理,配置同源

image-20240515102905203

5.跨域实操

1.全局CORS配置
1.后端编写配置类 CorsConfig.java
package com.sun.furn.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

/**
 * Description: 全局跨域配置
 *
 * @Author sun
 * @Create 2024/5/15 10:42
 * @Version 1.0
 */
// 全局跨域配置
@Configuration
public class CorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        // 创建跨域配置,添加 CORS 配置信息
        final CorsConfiguration corsConfiguration = new CorsConfiguration();
        // 跨域请求默认不包含 cookie,设置为 true 可以包含 cookie
        corsConfiguration.setAllowCredentials(true);
        // 支持哪些来源的请求跨域, 支持
        corsConfiguration.addAllowedOriginPattern("*");
        // corsConfiguration.addAllowedOrigin("*");
        // 支持哪些头信息
        corsConfiguration.addAllowedHeader("*");
        // 支持哪些方法跨域
        corsConfiguration.addAllowedMethod("*");
        // 添加映射路径
        final UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource
                = new UrlBasedCorsConfigurationSource();
        // /** 是一个正则表达式,表示所有请求 the mapping pattern
        // corsConfiguration 跨域配置
        urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
        // 返回新的 CorsFilter.
        return new CorsFilter(urlBasedCorsConfigurationSource);
    }
}

2.成功解决跨域

image-20240515114309118

3.查看响应头,后端允许跨域

image-20240515114601343

2.添加CORS配置类(只是跟上面的形式不同)
1.后端编写配置类 WebMvcConfig.java
package com.sun.furn.config;

/**
 * Description: 全局跨域配置
 *
 * @Author sun
 * @Create 2024/5/15 11:49
 * @Version 1.0
 */

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport;

@Configuration
public class WebMvcConfig extends WebMvcConfigurationSupport {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 允许跨域访问的路径
                .allowedOriginPatterns("*") // 允许跨域访问的源
                .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE") // 允许请求方法
                .maxAge(3600) // 预检间隔时间
                .allowCredentials(true); // 是否发送cookie
    }
}
2.成功解决跨域

image-20240515115413519

3.使用Filter方法实现
1.后端创建一个过滤器 CorsFilter.java
package com.sun.furn.filter;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * Description: 使用过滤器解决跨域问题
 *
 * @Author sun
 * @Create 2024/5/15 13:25
 * @Version 1.0
 */
@WebFilter(urlPatterns = "*")
public class CorsFilter implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
    }
    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain filterChain) throws IOException, ServletException {
        HttpServletRequest httpRequest = (HttpServletRequest)request;
        HttpServletResponse httpResponse = (HttpServletResponse) response;
        httpResponse.setCharacterEncoding("UTF-8");
        httpResponse.setContentType("application/json; charset=utf-8");
        httpResponse.setHeader("Access-Control-Allow-Origin", "*");
        httpResponse.setHeader("Access-Control-Allow-Credentials", "true");
        httpResponse.setHeader("Access-Control-Allow-Methods", "*");
        httpResponse.setHeader("Access-Control-Allow-Headers", "Content-Type,Authorization");
        httpResponse.setHeader("Access-Control-Expose-Headers", "*");
        filterChain.doFilter(httpRequest, httpResponse);
    }
    @Override
    public void destroy() {
    }
}
2.启动类添加 @ServletComponentScan 注解,扫描servlet组件

image-20240515132812176

3.成功解决跨域

image-20240515133029850

4.Vue项目启用代理
1.在vue.config.js中添加代理
// 跨域配置
module.exports = {
  devServer: {
    port: 9999,  // 本地服务端口
    proxy: { //设置代理,必须填
      '/api': { //设置拦截器 拦截器格式 斜杠+拦截器名字,名字可以自己定
        target: 'http://localhost:8081', //代理的目标地址
        changeOrigin: true, //是否设置同源,输入是的
        pathRewrite: { //路径重写
          '/api': '' //选择忽略拦截器里面的单词
        }
      }
    }
  }
}
2.修改请求以/api的方式发送请求

image-20240515134747244

3.成功解决跨域
  • 这种方式就相当于是本机对携带/api的请求进行代理,请求携带 Sec-Fetch-Site:same-origin 表示允许跨域

image-20240515134846979

6.跨域小结

1.同源策略限制内容

image-20240515135627856

2.请求跨域了,到底发出去没有

image-20240515135817054

3.form表单可以跨域提交的,但是Ajax请求不可以跨域请求

image-20240515135946250

4.推荐跨域处理方式
  • 服务器端解决跨域
  • Nginx动静分离 + 反向代理
举报

相关推荐

0 条评论