跨域/解决跨域方法

news2024/11/22 16:20:45

一、同源策略

同源策略(Same Origin Policy)是一种约定，它是浏览器最核心也是最基本的安全功能。同源策略会阻止一个域的javascrip脚本和另一个域的内容进行交互，是用于隔离潜在恶意文件的关键安全机制；关于这一点我们后面会举例说明。如果缺少了同源策略浏览器的安全使用会受到很大的影响。可以说web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

1、同源的定义
当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。

如下表给出了相对http://www.example.com/dir/page.html的同源检测示例：

URL结果原因
http://www.example.com/dir2/other.html成功协议、域名、端口相同
http://www.example.com/dir/inner/another.html成功协议、域名、端口相同
https://www.example.com/secure.html失败协议不同 ( HTTPS )
http://www.example.com:81/dir/etc.html失败端口不同 ( 81 )
http://news.example.com/dir/other.html失败域名不同

​

同源策略目的就是为了保证用户信息的安全，防止恶意的网站窃取用户数据。如果网页之间不满足“同源”的要求，那么它们之间：

  1. 不能共享Cookie、LocalStorage、IndexDB
  2. 不能获取DOM
  3. AJAX请求不能发送

2、同源策略作用举例
下面举一个例子说明针对接口的请求没有同源策略会怎么样？

cookie大家应该知道，一般用来处理登录等场景，目的是让服务端知道谁发出的这次请求。如果你请求了接口进行登录，服务端验证通过后会在响应头加入Set-Cookie字段，然后下次再发请求的时候，浏览器会自动将cookie附加在HTTP请求的头字段Cookie中，服务端就能知道这个用户已经登录过了。知道这个之后，我们来看场景：

1.某11到了，于是打开了买买买网站www.maimaimai.com，然后登录成功，然后准备一番剁手操作。
2.期间你的好朋友突然给你发了一个你懂得的网站链接www.nidongde.com，一脸yin笑地跟你说：“你懂的”，你毫不犹豫打开了。
3.你饶有兴致地浏览着www.nidongde.com！由于没有同源策略的限制，它向www.maimaimai.com发起了请求！前面我们说过“服务端验证通过后会在响应头加入Set-Cookie字段，然后下次再发请求的时候，浏览器会自动将cookie附加在HTTP请求的头字段Cookie中”，这样一来，这个不法网站就相当于登录了你的账号，可以为所欲为了！如果这不是一个买买买账号，而是你的银行账号，那……
这个过程就是就是CRFS(跨站请求伪造)攻击了！！参见 这里

   显然，同源策略是非常重要的。否则网站站长、广告联盟、流量统计商、xss黑客，随便哪个人都将无障碍的获取私密信息，例如各个网站的Cookie、email的邮件内容、OA页面的内容、QQ空间里设置为隐私的照片等。

3、同源策略的让步
几乎任何时候安全性和便利性都是负相关的，追求安全性的时候肯定会对便利性造成负面影响。同样，同源策略提升了web前端的安全性，但是却牺牲了web扩展上的灵活性。所以，现代浏览器在安全性可可用性之间选择了一个平衡点。即在遵循同源策略的基础上，选择性的为同源策略“开放了后门”。例如img、script、style等变迁都允许跨域引用资源，严格来说这都是不符合同源要求的。只不过这里只是引用这些资源，并不能读取到这些资源的内容。因此浏览器降低了一点点的安全性，缺大大提升了网站布置的灵活性。

二、跨域问题

​ 由于同源策略存在带来的问题就是跨域问题了。

1、跨域访问限制的流程

  1. 同源策略，它是由Netscape提出的一个著名的安全策略。
  2. 所有支持JavaScript 的浏览器都会使用这个策略。
  3. 所谓同源是指，域名，协议，端口相同。
  4. 当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面
  5. 当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，
  6. 即检查是否同源，只有和百度同源的脚本才会被执行。 [1]
  7. 如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。
  8. 同源策略是浏览器的行为，是为了保护本地数据不被JavaScript代码获取回来的数据污染，因此拦截的是客户端发出的请求回来的数据接收，即请求发送了，服务器响应了，但是无法被浏览器接收。
    在这里插入图片描述

如上图所示，跨域访问限制的作用流程大致如下：

1、 浏览器发送跨域请求
2、 接收response数据
3、 检查响应头
（1）如果响应头中没有允许跨域访问的配置，则不加载，并报出响应异常
（2）如果响应头中有允许跨域访问的设置，正常加载数据

即，同源策略并不是浏览器不让请求发出去、或者后端拒绝返回数据。实际情况是请求正常发出去了，后端也正常相应了，只不过数据到了浏览器后浏览器不去作用加载而是丢弃了。

三、跨域问题的解决
1、JSONP：以后涉及到在说。
2、CORS(Cross-Origin Resource Sharing)跨域资源共享机制
简称为跨域访问，允许 Web 应用服务器进行跨域访问控制，从而使跨域数据传输得以安全进行。CORS 需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE 浏览器要求版本 IE10 或以上。

    整个 CORS 通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS 通信与同源的 AJAX 通信没有差别，代码完全一样。浏览器一旦发现 AJAX 请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户无感知。

    因此，实现 CORS 通信的关键是服务器。只要服务器实现了 CORS 接口，即可跨源通信。

(1)CORS使用场景

    用户在使用浏览器的情况下会使用到 CORS，因为控制访问权限的是浏览器而非服务器。因此使用其它客户端的时候无需关心任何跨域问题。

    对于我们遇到的问题来说，CORS 的主要应用是实现在浏览器端使用 AJAX 直接访问 COS 的数据或上传、下载数据，而无需通过用户本身的应用服务器中转。

(2)CORS原理：

我们看一眼之前跨域报错的信息：
在这里插入图片描述

浏览器判断后端有没有返回CORS头(Access-Control-Allow-Origin)，发现没有就认为后端不允许跨域，即认为返回的数据不可靠。

所以只要后端能够返回浏览器需要的请求头，即可跨域(相应数据不会被同源策略抛弃)。

上面是表面原理，底层原理比较复杂。

浏览器会将ajax请求分为两类，其处理方案略有差异：简单请求、特殊请求。

简单请求
只要同时满足以下两大条件，就属于简单请求。：

（1) 请求方法是以下三种方法之一：

  • HEAD
  • GET
  • POST

（2）HTTP的头信息不超出以下几种字段：

  • Accept
  • Accept-Language
  • Content-Language
  • Last-Event-ID
  • Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

当浏览器发现发起的ajax请求是简单请求时，会在请求头中携带一个字段：Origin.

刚才说过，CORS需要客户端和服务端同时支持。上面这个小操作，算是客户端的支持行为（IE10以下不行）。
在这里插入图片描述

Origin中会指出当前请求属于哪个域（协议+域名+端口）。服务会根据这个值决定是否允许其跨域。

如果服务器允许跨域，需要在返回的响应头中携带下面信息（算是服务端的支持）：
在这里插入图片描述

  • Access-Control-Allow-Origin：可接受的域，是一个具体域名或者*（代表任意域名）。上图CORS策略配置的允许跨域请求来源是“*”，表示全部域名都允许。
  • Access-Control-Allow-Credentials：是否允许携带cookie，默认情况下，cors不会携带cookie，除非这个值是true

有关cookie：

要想操作cookie，需要满足3个条件：

  • 服务的响应头中需要携带Access-Control-Allow-Credentials并且为true。
  • 浏览器发起ajax需要指定withCredentials 为true
  • 响应头中的Access-Control-Allow-Origin一定不能为*，必须是指定的域名
    这样一来，前后端都支持跨域了，那就跨吧。

注意：

(1)测试截图是根据腾讯云手册的设置实例来的，这里 。

(2)关于web网页的部署，参见 草稿“Linux下的web服务器搭建”。

(3)另外配置web服务器的时候要注意安全组规则的设置；另外可以通过调整COS的跨域策略对比能否成功跨域在请求和相应方面的差异。

SpringBoot解决跨域的5种方式

java解决CORS跨域请求的方式
对于CORS的跨域请求，主要有以下几种方式可供选择：

  • 返回新的CorsFilter

  • 重写 WebMvcConfigurer

  • 使用注解 @CrossOrigin

  • 手动设置响应头 (HttpServletResponse)

  • 自定web filter 实现跨域

注意：

  • CorFilter / WebMvConfigurer / @CrossOrigin 需要 SpringMVC 4.2以上版本才支持，对应springBoot 1.3版本以上。
  • 上面前两种方式属于全局 CORS 配置，后两种属于局部 CORS配置。如果使用了局部跨域是会覆盖全局跨域的规则，所以可以通过 @CrossOrigin 注解来进行细粒度更高的跨域资源控制。
  • 其实无论哪种方案，最终目的都是修改响应头，向响应头中添加浏览器所要求的数据，进而实现跨域。

返回新的CorsFilter(全局跨域)

在任意配置类，返回一个 新的 CorsFIlter Bean ，并添加映射路径和具体的CORS配置路径。

@Configuration
public class GlobalCorsConfig {

    @Bean
    public CorsFilter corsFilter() {
        //1. 添加 CORS配置信息
        CorsConfiguration config = new CorsConfiguration();
        //放行哪些原始域
        config.addAllowedOrigin("*");
        //是否发送 Cookie
        config.setAllowCredentials(true);
        //放行哪些请求方式
        config.addAllowedMethod("*");
        //放行哪些原始请求头部信息
        config.addAllowedHeader("*");
        //暴露哪些头部信息
        config.addExposedHeader("*");
        //2. 添加映射路径
        UrlBasedCorsConfigurationSource corsConfigurationSource = new UrlBasedCorsConfigurationSource();
        corsConfigurationSource.registerCorsConfiguration("/**",config);
        //3. 返回新的CorsFilter
        return new CorsFilter(corsConfigurationSource);
    }
}

重写WebMvcConfigurer(全局跨域)

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                //是否发送Cookie
                .allowCredentials(true)
                //放行哪些原始域
                .allowedOrigins("*")
                .allowedMethods(new String[]{"GET", "POST", "PUT", "DELETE"})
                .allowedHeaders("*")
                .exposedHeaders("*");
    }
}

使用注解 (局部跨域)

在控制器(类上)上使用注解 @CrossOrigin:，表示该类的所有方法允许跨域。

@RestController
@CrossOrigin(origins = "*")
public class HelloController {

    @RequestMapping("/hello")
    public String hello() {
        return "hello world";
    }
}

在方法上使用注解 @CrossOrigin:

  @RequestMapping("/hello")
  @CrossOrigin(origins = "*")
   //@CrossOrigin(value = "http://localhost:8081") //指定具体ip允许跨域
  public String hello() {
        return "hello world";
  }

手动设置响应头(局部跨域)

使用 HttpServletResponse 对象添加响应头(Access-Control-Allow-Origin)来授权原始域，这里 Origin的值也可以设置为 “*”,表示全部放行。

@RequestMapping("/index")
public String index(HttpServletResponse response) {

    response.addHeader("Access-Allow-Control-Origin","*");
    return "index";
}

使用自定义filter实现跨域

首先编写一个过滤器，可以起名字为MyCorsFilter.java

package cn.wideth.aop;

import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Component;

@Component
public class MyCorsFilter implements Filter {

  public void doFilter(ServletRequest req, ServletResponse res, 
  FilterChain chain) throws IOException, ServletException {
  
    HttpServletResponse response = (HttpServletResponse) res;
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
    response.setHeader("Access-Control-Max-Age", "3600");
    response.setHeader("Access-Control-Allow-Headers", "x-requested-with,content-type");
    chain.doFilter(req, res);
    
  }
  
  public void init(FilterConfig filterConfig) {}
  public void destroy() {}
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/101731.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

C语言—指针

C语言—指针

指针用来存放一个内存地址&#xff1b; 指针的类型就是要存放地址的变量的数据类型&#xff1b; #include <stdio.h>int main() {int a 123;char b H;int *pa &a;char *pb &b;printf("%d\n", *pa);printf("%c", *pb); } pa要存放int类…
阅读更多...
评估篇 | 单元测试评估也能复用到集成测试？脚本帮你高效评估

评估篇 | 单元测试评估也能复用到集成测试？脚本帮你高效评估

上次我们分享了单元测试用例的复用&#xff0c;单元测试的用例可以复用到集成测试&#xff0c;那单元测试的评估是否也可以复用到集成测试&#xff1f;答案是可以的。 TPT中提供了多种多样的评估方式&#xff0c;其中的脚本评估使我们复用测试评估成为可能。脚本评估&#xff…
阅读更多...
@EnableCaching如何一键开启缓存

@EnableCaching如何一键开启缓存

EnableCaching如何一键开启缓存手动挡CacheManagerCache使用演示小结自动挡CachingConfigurationSelectorAutoProxyRegistrarProxyCachingConfigurationCacheOperationSourceCacheOperationBeanFactoryCacheOperationSourceAdvisorCacheInterceptor小结手动挡 我们首先来看看S…
阅读更多...
成本、利润分析法在企业管理中的应用

成本、利润分析法在企业管理中的应用

1 、成本、利润分析法的主要内容 成本、利润分析法主要是指&#xff0c;利用数学模型&#xff0c;对关于企业成本、利润的要素分析&#xff0c;然后计算出要素的改变对企业成本、利润的影响&#xff0c;进而对企业决策提出建议的一种方法。在成本、利润分析法中&#xff0c;最主…
阅读更多...
基础IO——文件描述符

基础IO——文件描述符

文章目录1. 文件描述符fd1.1 open返回值2. 理解Linux下一切皆文件3. 文件描述符的分配规则4. 重定向的本质4.1 使用 dup2 系统调用4.2 追加重定向4.3 输入重定向1. 文件描述符fd 1.1 open返回值 我们先来看下面的例子&#xff1a; 运行结果如下&#xff1a; 我们知道open的…
阅读更多...
磺基-CY5 马来酰亚胺 Cyanine5 Maleimide

磺基-CY5 马来酰亚胺 Cyanine5 Maleimide

磺基-CY5 马来酰亚胺 Cyanine5 Maleimide Cyanine5 maleimide是单一活性染料&#xff0c;有选择性的与硫醇基团&#xff08;比如蛋白和多肽的半胱氨酸&#xff09;结合以进行标记。我们使用水溶的Sulfo-Cyanine5 maleimide标记抗体和其他敏感蛋白。Cyanine5是Cy5的类似物&am…
阅读更多...
Pb协议的接口测试

Pb协议的接口测试

Protocol Buffers 是谷歌开源的序列化与反序列化框架。它与语言无关、平台无关、具有可扩展的机制。用于序列化结构化数据&#xff0c;此工具对标 XML &#xff0c;支持自动编码&#xff0c;解码。比 XML 性能好&#xff0c;且数据易于解析。更多有关工具的介绍可参考官网。 P…
阅读更多...
Java8新特性学习

Java8新特性学习

文章目录Lambda表达式为什么使用Lambda表达式Lambda表达式语法语法格式一&#xff1a;无参数&#xff0c;无返回值语法格式二&#xff1a;有一个参数&#xff0c;并且无返回值语法格式三&#xff1a;若只有一个参数&#xff0c;小括号可以省略不写语法格式四&#xff1a;有两个…
阅读更多...
Docker容器数据卷

Docker容器数据卷

是什么 卷就是目录或文件&#xff0c;存在于一个或多个容器中&#xff0c;由docker挂载到容器&#xff0c;但不属于联合文件系统&#xff0c;因此能够绕过Union File System提供一些用于持续存储或共享数据的特性&#xff1a;卷的设计目的就是数据的持久化&#xff0c;完全独立…
阅读更多...
LSTM（Long Short-Term Memory）

LSTM（Long Short-Term Memory）

长短期记忆&#xff08;long short-term memory&#xff0c;LSTM&#xff09;&#xff0c;LSTM 中引入了3个门&#xff0c;即输入门&#xff08;input gate&#xff09;、遗忘门&#xff08;forget gate&#xff09;和输出门&#xff08;output gate&#xff09;&#xff0c;以…
阅读更多...
华为时习知，让企业培训更简单！

华为时习知，让企业培训更简单！

在数字经济的发展过程中&#xff0c;人才始终是不容忽视的关键因素&#xff0c;企业对数字化人才培养的需求也愈加迫切。然而企业培训说起来简单&#xff0c;要做好却绝非易事。企业可能会面临员工分散各地、流动性大、关键岗位人才培训等复杂培训场景问题&#xff0c;无法高效…
阅读更多...
为什么我们说NFT拥有无限潜力？

为什么我们说NFT拥有无限潜力？

欢迎来到Hubbleverse &#x1f30d; 关注我们 关注宇宙新鲜事 &#x1f4cc; 预计阅读时长&#xff1a;8分钟 本文仅代表作者个人观点&#xff0c;不代表平台意见&#xff0c;不构成投资建议。 2021年底&#xff0c;NFT就已经发展得炙手可热了&#xff0c;热门到410亿美元投…
阅读更多...
YOLO-V5 算法和代码解析系列（一）—— 快速开始

YOLO-V5 算法和代码解析系列（一）—— 快速开始

文章目录运行环境配置Demo重新训练 YOLO-V5s运行环境配置 环境配置的官方教程如下&#xff0c;如果一些库安装失败&#xff0c;导致安装中断&#xff0c;可以单独安装一些库&#xff0c;比如 Pytorch&#xff0c;然后再执行下列安装步骤&#xff0c;具体如下&#xff1a; 个人建…
阅读更多...
国内食糖行业数据浅析

国内食糖行业数据浅析

大家好&#xff0c;这里是小安说网控。 食糖行业是国民消费不可或缺的产业之一。2022年9月份国内成品糖产量当期值为40.4万吨&#xff0c;同比增长30.7%&#xff1b;10月份当期值为63.7万吨&#xff0c;同比下滑2%。今年1-10月份&#xff0c;国内成品糖产量累计值为1089.4万吨&…
阅读更多...
艾美捷细胞糖酵解分析试剂盒基本参数和相关研究

艾美捷细胞糖酵解分析试剂盒基本参数和相关研究

艾美捷基于糖酵解细胞的测定试剂盒提供了一种比色法&#xff0c;用于检测培养细胞产生和分泌的糖酵解最终产物L-乳酸。在该测定中&#xff0c;乳酸脱氢酶催化NAD和乳酸之间的反应&#xff0c;产生丙酮酸和NADH。NADH直接将四氮唑盐&#xff08;INT&#xff09;还原为吸收490至5…
阅读更多...
【High 翻天】Higer-order Networks with Battiston Federico （3）

【High 翻天】Higer-order Networks with Battiston Federico （3）

目录模型&#xff08;1&#xff09;Equilibrium modelsBipartite modelsMotifs modelsStochastic set modelsHypergraphs modelsSimplicial complexes models模型的目的是再现、解释和预测系统的结构&#xff0c;最好用涉及系统两个或多个元素的交互来描述。为了考虑其输出的可…
阅读更多...
【1971. 寻找图中是否存在路径】

【1971. 寻找图中是否存在路径】

来源&#xff1a;力扣&#xff08;LeetCode&#xff09; 描述&#xff1a; 有一个具有 n 个顶点的 双向 图&#xff0c;其中每个顶点标记从 0 到 n - 1&#xff08;包含 0 和 n - 1&#xff09;。图中的边用一个二维整数数组 edges 表示&#xff0c;其中 edges[i] [ui, vi] …
阅读更多...
计算机毕设Python+Vue学衡国学堂围棋社管理系统（程序+LW+部署）

计算机毕设Python+Vue学衡国学堂围棋社管理系统（程序+LW+部署）

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
nvidia 使用

nvidia 使用

watch -n 0.5 nvidia-smi ./build/examples/openpose/openpose.bin --video examples/media/video.avi Linux CPU&GPU烤机&#xff08;压力测试&#xff09; 盛夏捷关注IP属地: 青海 0.1342021.04.14 09:50:16字数 152阅读 6,307 GPU-burn工具进行GPU烤机 下载Multi-G…
阅读更多...
基于MATLAB的车牌识别系统设计（Matlab代码实现）

基于MATLAB的车牌识别系统设计（Matlab代码实现）

&#x1f468;‍&#x1f393;个人主页&#xff1a;研学社的博客 &#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023