No ‘Access-Control-Allow-Origin‘ header is present跨域及解决

 更新时间:2023年02月17日 10:18:10   作者:brucelwl  
这篇文章主要介绍了No ‘Access-Control-Allow-Origin‘ header is present跨域及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

No ‘Access-Control-Allow-Origin‘ header is present

  • 1 浏览器的限制
  • 2 跨域
  • 3 浏览器发送的是 XHR (XMLHttpRequest)请求

当以上三个条件都满足时浏览器会抛出跨域请求异常(记住是浏览器抛出的异常,和服务端没太大关系),在讲跨域请求解决方案前先了解几个问题。

http请求中,哪些是常见的简单请求,哪些是非简单请求

常见的简单请求:请求方法为:GET ,HEAD,POST,请求header里面无自定义头,Content-Type为以下几种:text/plain  multipart/form-data application/x-www-form-urlencoded

常见的非简单请求 :请求方法为:put delete的ajax请求,发送json格式的ajax请求,带自定义头的ajax请求

浏览器在发送跨域请求时候,会有哪些过程

如果是简单请求,浏览器会先发送请求,然后判断服务器返的返回头中是否支持跨域请求,否则抛出跨域异常

如果是非简单请求,浏览器会先发出OPTIONS请求方法的检测命令,判断服务器是否支持跨域请求,如果支持则发送真正的请求,如果不支持则抛出跨域异常,因此一个非简单请求每次会发送两个请求,后面跨域解决方案会讲到缓存OPTIONS预检请求

跨域解决方案

方案1:禁用浏览器跨域校验,即允许跨域访问,(这种方案不可取,不可能让所有的浏览器设置允许跨域访问)

谷歌浏览器禁用跨域校验: 创建一个快捷方式发送到桌面 ,快捷方式--》右键---》属性页面中的目标输入框里追加  --disable-web-security --user-data-dir=C:\Program Files (x86)\Google\Chrome\Application (注意:--user-data-dir的值就是浏览器安装目录。)不一定生效

方案2:采用jsonp方式,需要后台和前台同时改动代码,

1 前台需要设置callback参数,如果使用的是jquery ajax 那么dateType属性设置为jsonp,jquery框架会自动设置参数名为callback的请求参数,也可以通过jsonp属性修改jsonp请求参数名,其他js框架根据具体api使用,

2 后台接收到callback参数后认为是jsonp请求,需要返回jsonp格式,普通json请求返回的content-Type是application/json,而jsonp返回的是application/javascript,同时也证明了jsonp请求服务端返回的是js脚本

3 jsonp请求参数名前后约定需要相同,例如jquery默认使用的是callback

弊端:jsonp 需要前后端都去修改代码,且jsonp是通过动态创建script脚本发送请求,仅支持 GET方法,jsonp发出的请求不是xhr请求,也是能解决跨域的原因

方案3:服务端解决跨域问题

通过编写filter在response对象中添加响应头,告诉浏览器允许跨域访问,* 号代码允许所有的请求域名,所有的请求方法跨域访问

@WebFilter("/*")
public class CORSFilter implements Filter {
 
    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain chain) throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest) servletRequest;
        HttpServletResponse resp = (HttpServletResponse) servletResponse;
 
        // 告诉浏览器允许所有的域访问
        // 注意 * 不能满足带有cookie的访问,Origin 必须是全匹配
        // resp.addHeader("Access-Control-Allow-Origin", "*");
        // 解决办法通过获取Origin请求头来动态设置
        String origin = request.getHeader("Origin");
        if (StringUtils.hasText(origin)) {
            resp.addHeader("Access-Control-Allow-Origin", origin);
        }
        // 允许带有cookie访问
        resp.addHeader("Access-Control-Allow-Credentials", "true");
 
        // 告诉浏览器允许跨域访问的方法
        resp.addHeader("Access-Control-Allow-Methods", "*");
 
        // 告诉浏览器允许带有Content-Type,header1,header2头的请求访问
        // resp.addHeader("Access-Control-Allow-Headers", "Content-Type,header1,header2");
        // 设置支持所有的自定义请求头
        String headers = request.getHeader("Access-Control-Request-Headers");
        if (StringUtils.hasText(headers)) {
            resp.addHeader("Access-Control-Allow-Headers", headers);
        }
 
        // 告诉浏览器缓存OPTIONS预检请求1小时,避免非简单请求每次发送预检请求,提升性能
        resp.addHeader("Access-Control-Max-Age", "3600");
 
        chain.doFilter(request, resp);
    }
}

方案4:Spring框架提供了跨域解决方案

spring提供了 @CrossOrigin注解用户解决跨域问题,同时支持全局配置

@Configuration
@EnableWebMvc
public class WebConfig extends WebMvcConfigurerAdapter {
	@Override
	public void addCorsMappings(CorsRegistry registry) {
		registry.addMapping("/api/**")
			.allowedOrigins("http://domain2.com")
			.allowedMethods("PUT", "DELETE")
			.allowedHeaders("header1", "header2", "header3")
			.exposedHeaders("header1", "header2")
			.allowCredentials(false).maxAge(3600);
	}
}

方案5 服务端通过ngnix解决跨域问题 

location /{
            proxy_pass http://localhost:8080/;
           
            #告诉浏览器允许跨域访问的方法
            add_header Access-Control-Allow-Methods *;
            # 告诉浏览器缓存OPTIONS预检请求1小时
            add_header Access-Control-Max-Age 3600;
            #允许带有cookie访问
            add_header Access-Control-Allow-Credentials true;
            #注意 * 不能满足带有cookie的访问,Origin 必须是全匹配,这里通过变量获取
            add_header Access-Control-Allow-Origin $http_origin;
            #设置支持所有的自定义请求头
            add_header Access-Control-Allow-Headers $http_access_control_request_headers;
            #如果预检请求,则返回成功,不需要转发到后端
            if ($request_method = OPTIONS){
                return 200;
            }
        }

方案6 客户端通过nginx隐藏跨域

#转发全部以/api开头的请求到web服务器
   location  /api
   {
        proxy_pass http://127.0.0.1:8080/api;
   }

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Spring观察者模式之事件发布订阅实现和源码详解

    Spring观察者模式之事件发布订阅实现和源码详解

    这篇文章主要介绍了Spring观察者模式之事件发布订阅实现和源码详解,Spring认为发布订阅主题,其实可以理解为事件驱动的编码,先来实现以下Spring容器中的事件发布订阅,需要的朋友可以参考下
    2024-01-01
  • logback日志输出格式设置方式

    logback日志输出格式设置方式

    这篇文章主要介绍了logback日志输出格式设置方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • 解决spring-boot 打成jar包后 启动时指定参数无效的问题

    解决spring-boot 打成jar包后 启动时指定参数无效的问题

    这篇文章主要介绍了解决spring-boot 打成jar包后 启动时指定参数无效的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2021-06-06
  • SpringBoot详细列举常用注解的说明

    SpringBoot详细列举常用注解的说明

    在开发SpringBoot程序的过程中,有可能与其他业务系统进行对接开发,获取封装公共的API接口等等,下面这篇文章主要给大家介绍了关于SpringBoot常见的注解的相关资料,需要的朋友可以参考下
    2022-06-06
  • 详解SpringBoot实现ApplicationEvent事件的监听与发布

    详解SpringBoot实现ApplicationEvent事件的监听与发布

    这篇文章主要为大家详细介绍了SpringBoot如何实现ApplicationEvent事件的监听与发布,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-03-03
  • java递归设置层级菜单的实现

    java递归设置层级菜单的实现

    本文主要介绍了java递归设置层级菜单的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • SpringBoot如何实现定时任务示例详解

    SpringBoot如何实现定时任务示例详解

    使用定时任务完成一些业务逻辑,比如天气接口的数据获取,定时发送短信,邮件。以及商城中每天用户的限额,定时自动收货等等,这篇文章主要给大家介绍了关于SpringBoot如何实现定时任务的相关资料,需要的朋友可以参考下
    2021-10-10
  • 利用javaFX实现移动一个小球的示例代码

    利用javaFX实现移动一个小球的示例代码

    这篇文章主要介绍了利用javaFX实现移动一个小球的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • SpringBoot 使用WebSocket功能(实现步骤)

    SpringBoot 使用WebSocket功能(实现步骤)

    本文通过详细步骤介绍了SpringBoot 使用WebSocket功能,首先需要导入WebSocket坐标,编写WebSocket配置类,用于注册WebSocket的Bean,结合示例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-02-02
  • 图解二叉树的三种遍历方式及java实现代码

    图解二叉树的三种遍历方式及java实现代码

    本篇文章主要介绍了图解二叉树的三种遍历方式及java实现代码,具有一定的参考价值,有兴趣的可以了解一下
    2017-07-07

最新评论