Cors跨域解决

室与 等级 1150 0 0
标签: corshttpsJava

一、浏览器跨域问题产生

1、跨源资源共享(CORS)中文文档:

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

2、什么是浏览器跨域问题

指的是浏览器不能执行其他网站的脚本。JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象,即同源策略。就好比我已经登录A网页,A网页上已经存储的cookie信息,B网页不能打开,B网页不能请求A网页的资源,除非这两个网页"同源"。同源意思是两个网页协议相同、域名相同、端口相同。

3、同源策略

同源策略是指:协议相同、域名相同、端口相同都要相同,只要一个不同就会产生跨域问题。 例子: 已有URL:http://www.example.com/hhb/index.html ,与以下URL同源情况: ①、http://www.example.com/hhb/manager.html
同源(同一域名下),可访问 ②、https://www.example.com/hhb/index.html
不同源(协议不同https),不可访问 ③、http://examle.com/hhb/index.html
不同源(域名不同),不可访问 ④、http://www.example.com:81/index.html 不同源(端口号不同),不可访问

同源策略目的

同源策略的目的是为了保证用户信息的安全。防止恶意的网站盗取数据。Web应用程序只能从加载应用程序的同一个域请求HTTP资源,除非响应报文包含了正确CORS响应头。

二、跨域流程

Cors跨域解决

1、示例登录请求(login)

这个我们实现跨域登录请求时,产生了两次login请求!

Cors跨域解决

2、预检请求,OPTIONS

在发送真实请求前,会发送一个预检请求,检查请求的服务器是否允许跨域!

Cors跨域解决

3、服务器响应允许跨域

服务器如果设置了允许跨域,服务器会在预检请求的响应头中添加允许跨域的信息!(这里我服务器已经编写了跨域配置)

Cors跨域解决

跨域信息解释: (1)Access-Control-Allow-Credentials: true 跨域请求默认不包含cookie,设置为true可以包含cookie (2)Access-Control-Allow-Headers: content-type, token 跨域请求暴露的字段 注意:CORS请求时,XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段:Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段,就必须在Access-Control-Expose-Headers里面指定。 (3)Access-Control-Allow-Methods: POST 支持哪些方法跨域 (4)Access-Control-Allow-Origin: http://localhost:8001 支持哪些来源的请求跨域 (5)Access-Control-Max-Age: 表明该响应的有效时间为多少秒。在有效时间内,浏览器无需为同一请求再次发起预检请求。注意,浏览器自身维护了一个最大有效时间,如果该首部字段的值超过了最大有效时间,将不会生效。

4、发送真实请求

这时会发送真实的登录login请求,包含自己的登录的用户密码等信息!

Cors跨域解决

Cors跨域解决

5、响应数据

服务器成功的响应数据,本次跨域成功!

Cors跨域解决

三、跨域解决方法

1、第一种:使用nginx部署为同一域(理念,这里没有具体实现)

例如A请求服务器B,A和B不在同一域下。可以使用nginx反向代理需要请求的服务器B,使A和nginx服务器在同一域下。A直接请求ngnix代理服务器就可以了,由nginx服务器转发到具体的服务器B。

2、第二种:配置当前请求允许跨域(服务器端配置过滤器)

这里创建的是springboot项目,在主启动类同级目录下创建一个config目录,在config目录下编写我们的跨域配置类GuLiCorsConfiguration,对所有的请求进行过滤!

目录截图:

Cors跨域解决

具体代码:

@Configuration
public class GuLiCorsConfiguration {
    @Bean
    public CorsWebFilter corsWebFilter(){
        //springboot自带的跨域过滤器所需要的跨域配置源
        UrlBasedCorsConfigurationSource corsConfigurationSource = new UrlBasedCorsConfigurationSource();

        //跨域配置源需要的具体配置
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        //配置跨域
        corsConfiguration.addAllowedHeader("*");
        //支持哪些方法跨域
        corsConfiguration.addAllowedMethod("*");
        //支持哪些来源的请求跨域
        corsConfiguration.addAllowedOrigin("*");
        //允许携带cookie跨域
        corsConfiguration.setAllowCredentials(true);

        //对所有路径/**执行corsConfiguration配置
        corsConfigurationSource.registerCorsConfiguration("/**",corsConfiguration);

        return new CorsWebFilter(corsConfigurationSource);
    }
}

3、第三种:配置当前请求允许跨域(服务器端配置WebMvcConfigurer)

这里创建的是springboot项目,在主启动类同级目录下创建一个config目录,在config目录下编写我们的跨域配置类CorsConfig,对所有的请求进行跨域映射!

目录结构:

Cors跨域解决

具体代码:

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        // 设置允许跨域的路径
        registry.addMapping("/**")
                // 设置允许跨域请求的域名
            .allowedOrigins("*")
                // 是否允许证书
            .allowCredentials(true)
                // 设置允许的方法
            .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                // 设置允许的header属性
                .allowedHeaders("*")
                // 跨域允许时间
            .maxAge(3600);
    }
}
收藏
评论区

相关推荐

Cors跨域解决
一、浏览器跨域问题产生 1、跨源资源共享(CORS)中文文档: https://developer.mozilla.org/zhCN/docs/Web/HTTP/Access_control_CORS 2、什么是浏览器跨域问题 指的是浏览器不能执行其他网站的脚本。JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象,即同源策略。就好比我
KONG网关 — 丰富的插件
![](http://pic.w-blog.cn/0B53EAF3-1445-429B-A3E7-BA451B3DCC55.png) 为什么kong这么火热呢?当然是它拥有强大的插件群来解决我们本来需要重复手动配置或者需要自己实现的内容,kong在1.X版本加强了对于插件的支持,官方提供的插件就是几十个,通过插件可以带来各种场景更加方便使用 比较使用的功
JAVA拦截器,JAVA返回结果跨域问题解决
遇到的问题: ------ 通过拦截器做权限控制,没有权限时返回了json值,结果前端请求时提示跨域了 备注:我的前端站点和后端站点不是一个地址 **报错1:** Access to XMLHttpRequest at 'http://localhost:8089/appcicd/appinfo/getappinfos' from origi
JAVA服务端配置允许跨域请求
CORS是一个W3C标准,全称是”跨域资源共享”(Cross-origin resource sharing)。 它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。 #### 1.加入CROS依赖的包 <dependency> <groupId>com.thetransactionco
PHP开启CORS
CORS 定义 ------- Cross-Origin Resource Sharing(CORS)跨来源资源共享是一份浏览器技术的规范,提供了 Web 服务从不同域传来[沙盒](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fzh.wikipedia.org%2Fwiki%2F%25E
cors跨域之简单请求与预检请求(发送自定义请求头)
### 引子 前后端分离这个问题,对cors的应用不断增多,暴露出的问题也接踵而至。 正所谓虑一千次,不如去做一次。 犹豫一万次,不如实践一次,本篇主要讨论在发送ajax请求,头部带上自定义token验证验证,暴露出的跨域问题。 ### 先说说定义 CORS:跨来源资源共享(CORS)是一份浏览器技术的规范,提供了 Web 服务从不同网域传来沙盒脚
Nginx解决跨域问题(CORS)
前言 == CORS(Cross-Origin Resource Sharing) 跨域资源共享,是一种允许当前域(domain)的资源(比如html/js/web service)被其他域(domain)的脚本请求访问的机制,通常由于同域安全策略(the same-origin security policy)浏览器会禁止这种跨域请求。  如:a.c
ContentType&CORS&Git
ContentType ----------- django内置的ContentType组件就是帮我们做连表操作 如果一个表与其他表有多个外键关系,我们可以通过ContentType来解决这种关联 from django.db import models from django.contrib.contenttypes.models
Spring Boot 解决跨域问题的 3 种方案!
![](https://oscimg.oschina.net/oscnet/bdc93b87-e7d9-485f-812b-bd398ef3aaa9.jpg) 作者 | telami 来源 | telami.cn/2019/springboot-resolve-cors 前后端分离大势所趋,跨域问题更是老生常谈,随便用标题去google或百度一
Spring Cloud Gateway跨域配置
版本:Greenwich.SR2 +  1.官网配置 [https://cloud.spring.io/spring-cloud-static/spring-cloud-gateway/2.2.1.RELEASE/reference/html/#cors-configuration](https://www.oschina.net/action/GoTo
Spring boot 总结之跨域处理cors
背景 == 现在做的很多项目都是前后端分离的,这就引出一个很常见的问题,我们的页面和接口是在不同域名下的,当我们通过ajax访问后端接口的时候就会出现跨域问题,这种问题我们怎么解决呢?一般来说就是cors和jsonp这两种方案。Spring简化了cors的配置,接下来我们来看一下它提供的cors。 WebMvcConfigurer对象 =========
SpringBoot 实现前后端分离的跨域访问(CORS)
社区原文链接:[http://www.spring4all.com/article/177](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fwww.spring4all.com%2Farticle%2F177) > 序言:跨域资源共享向来都是热门的需求,使用CORS可以帮助我们快速实现跨域
SpringBoot解决跨域问题
在开发前后端分离的项目时,常常会碰到跨域请求的问题。这是因为浏览器的安全性限制,不允许Ajax访问协议不同、域名不同、端口号不同的数据接口,否则会出报 No 'Access-Control-Allow-Origin' header is present on the requested resource 错误。 SpringBoot通过设置cors(跨源
SpringBoot解决跨域问题
在开发前后端分离的项目时,常常会碰到跨域请求的问题。这是因为浏览器的安全性限制,不允许Ajax访问协议不同、域名不同、端口号不同的数据接口,否则会出报 No 'Access-Control-Allow-Origin' header is present on the requested resource 错误。 SpringBoot通过设置cors(跨源

热门文章

最新文章