CorsConfig 跨域 初认识

简介: CorsConfig 跨域 初认识

CorsConfig 跨域

分析次报错是因为 服务访问的时候被判定为断域,

跨域的打头兵,其实跨域还么有发出去

跨域请求的流程: 浏览器 先会给服务器发送一个 预检请求 ,服务器 返回同意不同意 ,同意的话 浏览器 在发送真实的请求 ,服务再返回响应成功是否

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

跨域代码:

package com.atguigu.gulimall.gateway.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.reactive.CorsConfigurationSource;
import org.springframework.web.cors.reactive.CorsWebFilter;
import org.springframework.web.cors.reactive.UrlBasedCorsConfigurationSource;
import org.springframework.web.server.ServerWebExchange;
@Configuration
public class GulimallCorsConfiguration {
//写跨域相关的代码
    @Bean   //注入到容器中
    public CorsWebFilter corsWebFilter() {
            //CorsConfigurationSource 他的实现是 UrlBasedCorsConfigurationSource
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
           //1.配置跨域 容许那些头跨域
        corsConfiguration.addAllowedHeader("*");
            //2.容许那些请求方式跨域   get/post..
        corsConfiguration.addAllowedMethod("*");
            //3.容许那些请求来源跨域
        corsConfiguration.addAllowedOrigin("*");
             //4.是否容许携带 酷开
        corsConfiguration.setAllowCredentials(true);
        //代表任何路径 全部   corsConfiguration 配置的相关参数
        //registerCorsConfiguration  注册跨域的配置
        source.registerCorsConfiguration("/**",corsConfiguration);
        /*CorsConfigurationSource corsConfigurationSource = new CorsConfigurationSource() {
            @Override
            public CorsConfiguration getCorsConfiguration(ServerWebExchange exchange) {
                return null;
            }
        }
*/
        return new CorsWebFilter(source);
    }
}

理解:

大体意思为 :

Access to XMLHttpRequest at 'http://localhost:88/api/sys/login' 
from origin 'http://localhost:8001' has been blocked by CORS policy:
 Response to preflight request doesn't pass access control check: No
  'Access-Control-Allow-Origin' header is present on the requested 
  resource.
http://localhost:88/api/sys/login  访问到   http://localhost:8001的时候   
请求被堵塞了
"cors"(跨域)      Access-Control-Allow-Origin' 访问 控制 请求 来源 
浏览器为了安全默认拒绝这些跨域的请求
怎么解决: 浏览器会检查头 ,   Access-Control-Allow-Origin 解决跨域的办法 


相关文章
|
JavaScript 前端开发 Java
基于SpringBoot+Vue实现前后端交互功能(详解Vue框架机制)
基于SpringBoot+Vue实现前后端交互功能(详解Vue框架机制)
|
存储 机器学习/深度学习 传感器
langchain 入门指南 - 实现一个多模态 chatbot
langchain 入门指南 - 实现一个多模态 chatbot
486 0
|
JavaScript 前端开发
vue3通过render函数实现一个菜单下拉框
【8月更文挑战第18天】vue3通过render函数实现一个菜单下拉框
412 0
|
Windows
解决Windows 11/10 上的网络打印机错误 0x0000011b
解决Windows 11/10 上的网络打印机错误 0x0000011b
1272 5
axios的get请求传入数组参数
axios的get请求传入数组参数
|
开发框架 前端开发 JavaScript
常见的跨平台开发框架
【10月更文挑战第25天】这些跨平台开发框架各有特点,开发者可以根据项目的具体需求、团队的技术栈和对性能、用户体验的要求等因素来选择合适的框架进行开发。
|
开发框架 Dart Android开发
安卓与iOS的跨平台开发:Flutter框架深度解析
在移动应用开发的海洋中,Flutter作为一艘灵活的帆船,正引领着开发者们驶向跨平台开发的新纪元。本文将揭开Flutter神秘的面纱,从其架构到核心特性,再到实际应用案例,我们将一同探索这个由谷歌打造的开源UI工具包如何让安卓与iOS应用开发变得更加高效而统一。你将看到,借助Flutter,打造精美、高性能的应用不再是难题,而是变成了一场创造性的旅程。
|
XML JSON 前端开发
@RestController和@Controller的区别
【9月更文挑战第18天】@RestController和@Controller的区别
1074 5
|
JavaScript 前端开发
vue实现侧边折叠菜单栏手风琴效果
该文章介绍了如何使用Vue.js实现具有手风琴效果的侧边折叠菜单栏,包括HTML结构设计、CSS样式设置以及JavaScript交互逻辑的编写。
|
前端开发
成功解决:如何使element中输入框颜色改变,以及如何解决使用/deep/ 出现警告信息问题
这篇文章讲述了如何在Element UI中改变输入框的背景颜色,以及如何解决使用深度选择器`/deep/`时出现的警告信息问题。文章提供了使用深度选择器修改背景颜色的CSS代码示例,展示了修改效果,并解释了如何通过在`/deep/`前加`div`或使用`::v-deep`来解决出现的红色波浪线警告问题。
成功解决:如何使element中输入框颜色改变,以及如何解决使用/deep/ 出现警告信息问题