1,何为跨域?

在理解跨域问题之前,你先要了解同源策略和URL,简单叙述:

1)同源策略

三同:协议相同,域名相同,端口相同;

目的:保证用户信息安全,防止恶意网站窃取数据。同源策略是必须的,否则cookie可以共享。

2)URL

三部分组成:

<传输协议>://<internet主机域名或者IP地址:端口号>/<路径>

协议://域名:端口号/路径

http://www.123.com:8080/index.html

你只需要简单理解:协议,域名,端口号不同即为跨域,同时注意:域名www.123.com 对应域名ip:192.169.1.88 虽然都指向同一服务器,但也属于跨域

2,如何解决跨域问题

很简单,在此提供两种方法:

1)局部配置,在每个controller控制层加上注解@CrossOrigin即可;

2)全局配置,写个配置类,继承WebMvcConfigurerAdapter ,重写addCorsMappings方法即可,代码如下:

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter; @Configuration
public class CorsConfig extends WebMvcConfigurerAdapter { @Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowCredentials(true) //是否允许发送cookie
.allowedMethods("GET", "POST", "DELETE", "PUT")
.maxAge(3600);
} }

到此你基本了解并解决跨域问题,如果你只想知其然而不想知其所以然,到此即可。

3,CORS

跨域资源共享(corss-origin resource sharing):CORS需要浏览器和服务器同时支持。目前所有浏览器都支持该功能,IE浏览器不能低于IE10。

整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。

浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。因此,实现CORS通信的关键是服务器。

只要服务器实现了CORS接口,就可以跨源通信。

CROS常见header:

1)Access-Control-Allow-Origin:http://localhost.com 表示允许http://localhost.com发起跨域请求。

2)Access-Control-Max-Age:3600 表示在3600 秒内不需要再发送预校验请求。

3)Access-Control-Allow-Methods: GET,POST,PUT,DELETE 表示允许跨域请求的方法。

4)Access-Control-Allow-Headers: content-type 表示允许跨域请求包含content-type,还有Authorization, Accept, Range, Origin

多个域名之间用逗号分隔,表示对所示域名提供跨域访问权限。"*"表示允许所有域名的跨域访问。

浅谈跨域问题,CORS跨域资源共享的更多相关文章

  1. 浅谈配置chrome浏览器允许跨域操作的方法

    浅谈配置chrome浏览器允许跨域操作的方法 一:(Lying人生感悟.可忽略) 最近有一天,对着镜子,发现满脸疲惫.脸色蜡黄.头发蓬松.眼神空洞,于是痛诉着说生活的不如意,工作没激情,工资不高,一个 ...

  2. JSONP跨域和CORS跨域

    什么是跨域? 跨域:指的是浏览器不能执行其它网站的脚本,它是由浏览器的同源策略造成的,是浏览器的安全限制! 同源策略 同源策略:域名.协议.端口均相同. 浏览器执行JavaScript脚本时,会检查这 ...

  3. JSONP跨域和CORS跨域的区别

    跨域: 由于浏览器中的javascript的同源策略,同源策略会阻止一个域的JavaScript脚本和另一个域的内容进行交互. 同源:协议,域名,端口,三者有一个不同即为跨域. 解决跨域有以下多种方法 ...

  4. 什么是同源策略,什么是跨域,如何跨域,Jsonp/CORS跨域

    同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响. 可以说Web是构建在同源策略基础之上 ...

  5. ajax跨域通过 Cors跨域资源共享 进行GetPost请求

    using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Ne ...

  6. 配置tomcat允许跨域访问,cors跨域资源共享

    1.导入cors-filter-1.7.jar,java-property-utils-1.9.jar两个jar包 2.在web.xml里配上: <filter> <filter-n ...

  7. 浅谈基于WOPI协议实现跨浏览器的Office在线编辑解决方案

    如今,基于Web版的Office 在线预览与编辑功能已成为一种趋势,而关于该技术的实现却成为了国内大部份公司的技术挑战,挑战主要存在于两方面: 其一:目前国内乃至微软本身,还没有相对较为完善的解决方案 ...

  8. 浅谈 django Models中的跨表

    跨表操作在数据库操作非常常用,虽然其会降低读取数据的性能,但是它能节约数据在硬盘中的占用,优化数据表的结构和各自之间的关系. 在sql中,一般跨表需要用到 join 关键字 select * from ...

  9. 浅谈CSRF(Cross-site request forgery)跨站请求伪造

    本文目录 CSRF是什么 CSRF攻击原理 CSRF攻击防范 CSRF是什么 CSRF(Cross-site request forgery)跨站请求伪造,也被称为“One Click Attack” ...

  10. Web APi之手动实现JSONP或安装配置Cors跨域(七)

    前言 照理来说本节也应该讲Web API原理,目前已经探讨完了比较底层的Web API消息处理管道以及Web Host寄宿管道,接下来应该要触及控制器.Action方法,以及过滤器.模型绑定等等,想想 ...

随机推荐

  1. MYSQL 悲观锁和乐观锁简单介绍及实现

    1:悲观锁 1.1 特点: 每次查询都会进行锁行,怕"其他人"进行数据的修改. 1.2 实现步骤: 步骤1:开启事务test1,并对id=2的记录进行查询,并加锁,如:   步骤2 ...

  2. 翻译:《实用的 Python 编程》02_07_Objects

    目录 | 上一节 (2.6 列表推导式) | 下一节 (3 从程序组织) 2.7 对象 本节介绍有关 Python 内部对象模型的更多详细信息,并讨论一些与内存管理,拷贝和类型检查有关的问题. 赋值 ...

  3. vue监听生命周期

    监听生命周期事件 内部监听声明周期函数 data() { return { monitor: null }; }, mounted() { this.monitor = setInterval(() ...

  4. pyhont+unittest的测试固件

    在执行一条自动化测试用例时需要做一些测试前的准备工作和测试后的清理工作,如:创建数据库链接.启动服务进程.打开文件.打开浏览器.测试环境的清理.关闭数据链接.关闭文件等.如果每执行一条用例都需要编写上 ...

  5. 【HTB系列】 靶机Swagshop的渗透测试详解

    出品|MS08067实验室(www.ms08067.com) 本文作者:是大方子(Ms08067实验室核心成员) 总结与反思 使用vi提权 magento漏洞的利用 magescan 工具的使用 靶机 ...

  6. OpenGL中的坐标系统详细概括:包括Z缓冲

    一: 首先就是关于几个坐标系统的概括: 局部坐标是对象相对于局部原点的坐标,也是物体起始的坐标. 下一步是将局部坐标变换为世界空间坐标,世界空间坐标是处于一个更大的空间范围的.这些坐标相对于世界的全局 ...

  7. 面试常备,字符串三剑客 String、StringBuffer、StringBuilder

    尽人事,听天命.博主东南大学硕士在读,热爱健身和篮球,乐于分享技术相关的所见所得,关注公众号 @ 飞天小牛肉,第一时间获取文章更新,成长的路上我们一起进步 本文已收录于 「CS-Wiki」Gitee ...

  8. 英语单词小程序插件 - EdictPlugin-LTS

    1.插件引入 全局app.json配置 "plugins": { "edict-plugin": { "version": "1. ...

  9. react+lib-flexible适配浏览器宽度配置

    p.p1 { margin: 0; font: 12px "Helvetica Neue" } p.p2 { margin: 0; font: 12px "Helveti ...

  10. C++11正则表达式