$.ajax 加了headers报错_Springboot解决Ajax跨域的三种方式

这篇文章不华丽,但比较实用,能解决不少大家实际业务中的问题。大家可以收藏起来,以备用时之需!

1.同源策略 

1.1 含义

  ajax出现请求跨域错误问题,主要原因就是因为浏览器的“同源策略”;1995年,同源政策由 Netscape 公司引入浏览器。目前,所有浏览器都实行这个政策。

最初,它的含义是指,A网页设置的 Cookie,B网页不能打开,除非这两个网页"同源"。所谓"同源"指的是"三个相同"。

  • 协议相同

  • 域名相同

  • 端口相同

  举例来说,http://www.example.com/dir/page.html这个网址,协议是http://,域名是www.example.com,端口是80(默认端口可以省略)。它的同源情况如下:

  • http://www.example.com/dir2/other.html:同源

  • http://example.com/dir/other.html:不同源(域名不同)

  • http://v2.www.example.com/dir/other.html:不同源(域名不同)

  • http://www.example.com:81/dir/other.html:不同源(端口不同)

1.2 目的

  同源策略的目的,是为了保证用户信息的安全,防止恶意的网站窃取数据。

  设想这样一种情况:A网站是一家银行,用户登录以后,又去浏览其他网站。如果其他网站可以读取A网站的 Cookie,会发生什么?很显然,如果 Cookie 包含隐私(比如存款总额),这些信息就会泄漏。更可怕的是,Cookie 往往用来保存用户的登录状态,如果用户没有退出登录,其他网站就可以冒充用户,为所欲为。因为浏览器同时还规定,提交表单不受同源政策的限制。

  由此可见,"同源策略"是必需的,否则 Cookie 可以共享,互联网就毫无安全可言了。

1.3 限制范围

  随着互联网的发展,"同源政策"越来越严格。目前,如果非同源,共有三种行为受到限制。

(1) Cookie、LocalStorage 和 IndexDB 无法读取。

(2) DOM 无法获得。

(3) AJAX 请求不能发送。

2.解决Ajax请求不能发送的问题

  本文只关注Ajax请求跨域问题,想了解更多可以参考:http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html 

  同源政策规定,AJAX请求只能发给同源的网址,否则就报错。

  除了架设服务器代理(浏览器请求同源服务器,再由后者请求外部服务),有三种方法规避这个限制。

  • JSONP

  • WebSocket

  • CORS:(H5中的新特性:Cross-Origin Resource Sharing(跨域资源共享)。通过它,我们的开发者(主要指后端开发者)可以决定资源是否能被跨域访问。cors是一个w3c标准,它允许浏览器(目前ie8以下还不能被支持)像我们不同源的服务器发出xmlHttpRequest请求,我们可以继续使用ajax进行请求访问)

  本文中我们使用第三种方式来解决在Springboot项目中的跨域问题。前端发出Ajax请求访问Springboot(如在http://127.0.0.1:8086web项目中访问http://127.0.0.1:8866)服务时,Ajax跨域请求报错如下:

$.ajax({
            url : "http://127.0.0.1:8866/index",
            type : "GET",
            dataType : "text",
            success : function(msg) {
                $("#box").html(msg);
                alert(msg);
            }
        });

  Access to XMLHttpRequest at 'http://127.0.0.1:8866/' from origin 'http://127.0.0.1:8086' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

5fe44959304971080b2110db15411d6e.png

  在http://127.0.0.1:8866这个服务中,我们有三种解决方式:

2.1注解方式

  在需要跨域的Controller层的类或方法上加上注解:@CrossOrigin。这样就可以指定该controller中所有方法或某个方法处理所有或只来自http://127.0.0.1:8086中的请求。

@Controller
@CrossOrigin//@CrossOrigin(origins = "http://127.0.0.1:8086", maxAge = 3600)
public class ApiController {

    //@CrossOrigin
    @GetMapping(value = "/index")
    public String index(HttpServletRequest request) {
        request.getSession().setMaxInactiveInterval(60*30);

        return "index";
    }
}

2.2 过滤器方式

  修改返回请求头信息:

@Component
public class CorsFilter implements Filter {

    private static final Logger logger = LoggerFactory.getLogger(CorsFilter.class);

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    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, HEAD");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers",
                "access-control-allow-origin, authority, content-type, version-info, X-Requested-With");

        chain.doFilter(req, res);
    }

    @Override
    public void destroy() {

    }

}

2.3 继承WebMvcConfigurerAdapter,重写addCorsMappings方法:

@Component
public class WebMvcConfig extends WebMvcConfigurerAdapter {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
        .allowCredentials(true)
        .allowedOrigins("*")
        .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
        .maxAge(3600) 
        .allowedHeaders("*");
    }
}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

高精度惯性传感器如何实现全球自动化愿景?

来源:MEMS如果农场基于丰富的传感器内容来联合利用自动化地面车辆和航空器,那么地面作业将更加有效;如果手术室能够将经典的导引技术供精密制导机械臂使用,那么成功率将得到保障;如果救援行动中能够精准定位施救人员的…

链接服务器 因为它不存在或者您没有所需的权限。处理

有时候,我们会用 Set Identity_Insert Table ON 来处理数据表的某些自增列。如果在本地倒是没什么问题。如果是远程服务器,则会报 找不到对象"XXX" ,因为它不存在或者您没有所需的权限 其实这个跟你的权限无关,即使你链接服务器用…

catia怎么将特征参数化_搭建商城网站怎么将页面简洁化?这三个步骤不能少

随着用户群体的年轻化,消费者的习惯也会开始转变,简洁的风格设计能帮助商家更快的吸引到用户。制作自己的商城系统来进行产品销售是常见的方式之一,商家需要做好自己的网站规划,并向开发商提出相应的要求。那么,今天就…

宇宙是一个图网络?「全球最聪明的人」刚刚为物理基础理论指出了全新道路...

来源:机器学习研究组订阅号图片来源:机器之心「物理学已经很长一段时间没有出现任何显著进展了。探测引力波或许算是一个,」斯蒂芬沃尔夫勒姆表示。「我非常希望在纯技术层面上,我们所做的一切能够使理论物理学重新焕发活力。尽管…

HP Unix vsftp服务配置

HP Unix vsftp 服务配置: /opt/ssh/utils/ssh_chroot_setup.sh 运行脚本,会提示输入要建立的vsftp账号和要限制的家目录, 比如要限制的家目录为/JiaRoot/,则/etc/passwd 里面相应的vsftp账号家目录 /JiaRoot/./; 配置免…

python3字典写入excel_Python玩转Excel(第2期)~这里只有干货

第1期发布之后,反响特别好,很快通过审核,不到2小时推荐量2600多,还是挺高的,说明大家对此版块内容还是感兴趣的,激发了我创作的动力。谢谢大家,今天加班再更新一期。一、如何创建数据的‘’粮仓…

Network Request Failed

在react native项目中,有时候调用接口会出现这样的错误提示:“Network Request Failed”。 一.模拟器上报“Network Request Failed”解决办法,也是官网有提到的: 1. 在Info.plist中添加NSAppTransportSecurity类型Dictionary。 2…

信息通信业(ICT)十大趋势

来源:中国信息通信研究院,原文刊载于《互联网天地》2020年2期2019年12月26日,中国信息通信研究院在北京发布了信息通信业(ICT)十大趋势。这十大趋势是:1、5G时代起航,开辟数字化转型新空间2、信…

小括号教学设计导入_2020年小学教师资格证复习资料之小学课堂教学导入-教师吧...

本节内容为2020年下半年小学教师资格证考试科目二《教育教学知识与能力》小学课堂教学导入考点详解。【考点:小学课堂教学导入】一、课堂教学导入概述(一)教学导入的概念所谓教学导入,是指在上课之初,教师利用几分钟的时间,运用简洁的言语或行为,将学生的注意力吸引…

Ubuntu 16.04 安装 Matlab2016a

在参考之前网上的一些ubuntu安装Matlab教程后,笔者在自己的笔记本上也尝试安装最新的matlab2016a。但是装了不同的教程都会出现报错,启动画面停止,弹出错误提示: Matlab has encountered an internal problem and needs to be close 笔者完全按照下面的教程安装, linux(x…

RPU4+1视图(转)

41视图模型概况 Kruchten 提出了一个"41"视图模型,从5个不同的视角包括包括逻辑试图、进程视图、物理视图、开发视图、场景视图来描述软件体系结构。每一个视图只关心系统的一个侧面,5个试图结合在一起才能反映系统的软件体系结构的全部…

牛客网数据开发题库_牛客网SQL题库NO.32~40

不要问为什么没有31题,大概被牛客吞掉了吧,哈哈哈哈SQL 32【简单】将employees表的所有员工的last_name和first_name拼接起来作为Name,中间以一个空格区分CREATE TABLE employees ( emp_no int(11) NOT NULL, birth_date date NOT NULL, firs…

VR/AR行业发展至今,它的市场规模如何

来源:AR工业应用全球知名研究咨询公司 Markets and Markets 2017 发布了一份研究报告,报告称:AR 市场规模将从 2016 年的 23.9 亿美金增长到 2023 年的613.9 亿美金。报告显示,诸如医疗保健、零售以及电商这样的行业对 AR头显不断…

初学SpringBoot之三

原教程如是http://blog.csdn.net/lxhjh/article/details/51753852。 记录问题: 1.maven工程导入后,pom.xml文件报错:“failed to read artifact descriptor for org.springframework.boot:.......”。 解决办法:关闭eclipse;删除r…

解决Matlab script脚本文件显示中文乱码的问题

新安装的Matlab由于默认设置可能会导致显示中文乱码的问题,这是由于Matlab 文档编辑器(editor) 的编码导致的,一般默认编码方式为ANSI,为了显示中文,应改为UTF-8方式或其他支持中文的编码方式,这在Matlab中的操作为: slCharacterEncoding(UTF-8) 但是执行这句命令只对…

stm32f103移植到f0_STM32F042替换STM32F103

因为从事汽车CAN总线及多媒体解码盒,常常需要解一些简单的CAN数据,需要的硬件IO不多,仅仅是CANUART,所以最近为了节省成本,也是花了不少心思。直到最近发现了STM32F042,据介绍,这是带CAN的最小封…

为什么很难创造出新的处理器?

出品 | CSDN(ID:CSDNnews)译者 | Arvin,责编 | 郭芮以下为译文:RISC-V处理器指令集体系结构(ISA)的问世和最初的成功重新激发了人们对定制处理器设计的兴趣,但是业界现在正在努力解决…

windows 安装 python3

安装python------------------------------------------------------------ 1,打开连接https://www.python.org/downloads/release/python-361/2,下载安装3,安装之后, (安装目录)4, 把python的安装目录,加入到系统环境变量里面去, 右键我的电…

用Matlab来备份文件夹

用Matlab来备份文件夹 由于各种各的原因,我们需要备份一些文件夹,例如过几天OneDrive的容量将减少,不想升级的用户必须删减内容或者备份内容。但是简单的复制文件夹会造成一些问题,例如导致历史数据丢失、少量的变动也需要复制所有数据。 为了克服这个问题,我用Matlab写…

情绪调节的自适应_如何做好情绪的管理者

积极有效的情绪管理一个人如果能够控制自己的情绪、欲望和恐惧,那他就胜过国王。----约翰米尔顿01情绪概述情绪和情感,人对客观外界事物的态度的主观体验和相应的行为反应,它反映的是主体需要和客观外界事物间的关系。情绪和情感两个词常可通…