跨域解决方案

  |   0 评论   |   0 浏览

跨域解决方案

1.跨域基本介绍

文档https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS

跨域问题是什么?

一句话:跨域指的是浏览器不能执行其他网站的脚本,它是由浏览器的同源策略造成的,是浏览器对 javascript 施加的安全限制。

说明:跨域是浏览器对 javascript 施加的安全限制,而不是服务端的安全限制,也就是说,只要请求满足接口规范,就返回数据

同源策略

  1. 同源策略是一种约定,它是浏览器最核心也最基本的安全功能
  2. 如果缺少了同源策略,浏览器很容易受到 XSS(跨站脚本攻击)、CSFR(跨站请求伪造)等攻
  3. 所谓同源是指 协议、域名、端口 三者都要相同,其中一个不同,就属于非同源,就会
    产生跨域问题
  4. 看一张图

image-20230319160359829

2.跨域流程

2.1 简单请求和非简单请求

简单请求: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS

  • 只要同时满足以下两大条件,就属于简单请求

条件 1:使用下列方法之一:

GET
HEAD
POST

条件 2:Content-Type 的值仅限于下列三者之一:

text/plain(文本文件格式)
multipart/form-data(当表单包含文件上传时, 编码类型需要设置为 multipart/form-data)
application/x-www-form-urlencoded(当表单数据不包含文件上传等复杂数据时,通常使用这种编码类型进行表单提交, 表单数据被编码为键值对的形式)

非简单请求/复杂请求:不符合简单请求条件的请求就是非简单请求/复杂请求

3.跨域解决方案

3.1方式 1-nginx 反向代理

  1. 将前端项目和后端项目统一放在 Nginx 的管理下
  2. Nginx 对外提供统一的访问域名
  3. 当请求达到 Nginx 时,使用 Nginx 的反向代理+动静分离,实现各找各妈的效果

3.2方式 2-配置服务器允许跨域

  • 后端服务返回时,添加响应头
Access-Control-Allow-Origin∶支持哪些来源的请求跨域

Access-Control-Allow-Methods∶支持哪些方法跨域

Access-Control-Allow-Credentials∶ 跨域请求默认不包含 cookie,设置为 true 可以包含cookie

Access-Control-Expose-Headers∶跨域请求暴露的字段
CORS 请求时,XMLHttpRequest 对象的 getResponseHeader(()方法只能拿到 6 个基本字
段∶Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。
如果想拿到其他字段,就必须在 Access-Control-Expose-Headers 里面指定。

Access-Control-Max-Age∶表明该响应的有效时间为多少秒。在有效时间内,浏览器无须为同一请求再次发起预检请求。请注意,浏览器自身维护了一个最大有效时间,如果该首部字段的值超过了最大有效时间,将不会生效。
  • 简单原理示意图/抓包

image-20230319161050818

3.3方式 3-前端使用代理,配置同源(VUE)

  • 在 VUE 项目中启用代理,设置同源 具体配置
module.exports = {
    devServer: {
        port: 10000,  // 启动端口ctrl+alt+l
        proxy: {                    //设置代理,必须填
            '/api': {               //设置拦截器  拦截器格式   斜杠+拦截器名字,名字可以自己定
                target: 'http://localhost:9090',  //代理的目标地址, 就是/api 代替 http://localhost:9090
                changeOrigin: true,                 //是否设置同源,设置的是true, 实现跨域
                pathRewrite: {                      //路径重写
                    '/api': ''                      //选择忽略拦截器里面的单词
                }
            }
        }
    }
}

3.4其它方式(这些解决方式都有一些前提条件)

jsonp

postMessage

websocket

Node 中间件代理(两次跨域)

window.name + iframe

location.hash + iframe

document.domain + iframe

4.跨域实操

4.1 实现跨域方法 1-全局 cors 配置

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;

@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);
    }
}

4.2实现跨域方法 2-添加 cors 配置类(全局跨域)

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);
    }
}

4.3实现跨域方法 3-使用 Filter 方法

@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() {
    }
}
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.web.servlet.ServletComponentScan;

@ServletComponentScan
@MapperScan(basePackages = {"com.llp.furn.mapper"})
@SpringBootApplication
public class Application {
    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }
}

4.4实现跨域方法 4-VUE 项目启用代理,配置同源

module.exports = {
    devServer: {
        port: 10000,  // 启动端口ctrl+alt+l
        proxy: {                    //设置代理,必须填
            '/api': {               //设置拦截器  拦截器格式   斜杠+拦截器名字,名字可以自己定
                target: 'http://localhost:9090',  //代理的目标地址, 就是/api 代替 http://localhost:9090
                changeOrigin: true,                 //是否设置同源,设置的是true, 实现跨域
                pathRewrite: {                      //路径重写
                    '/api': ''                      //选择忽略拦截器里面的单词
                }
            }
        }
    }
}

标题:跨域解决方案
作者:llp
地址:https://llinp.cn/articles/2023/03/19/1679214318490.html