文档章节

springboot学习笔记4( restful跨源资源共享,ajax跨域访问)

trntaken
 trntaken
发布于 2017/05/31 20:07
字数 858
阅读 82
收藏 1

    使用springboot restful 做前后端分离,跨域访问是比较头疼的问题。再解决跨域问题之前,先了解一下什么是同源,什么是跨源资源共享。

  同源就是:请求协议一致,请求域名一致,请求端口。在一个浏览器,只能访问同一域名的资源,在当前域名资源中无法访问其他域名资源。例如:

 http://www.test.com(目标地址)   
http://www.test.com:80 (非同源)
http://www.test.com/test(同源)
https://www.test.com(非同源)

 浏览器为了保证其信息安全性,防止恶意网站窃取用户信息,都只提供同源访问。 同源请求给我们开发带来了一定的问题:不能使用ajax请求,dom页面不能访问,cookie不能共享。(参考地址:http://www.ruanyifeng.com/blog/2016/04/cors.html)。为了解决这个问题,w3s提供了CORS( Cross-origin resource sharing  跨域资源共享)规范。详情请参考  http://www.ruanyifeng.com/blog/2016/04/cors.html   ,这里就不作解释了。

    CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。 总的来说,只要服务端实现了CORS接口,跨域请求就没问题。下面介绍一个基于springboot restful的跨域的请求的列子:

首先新建一个index.html.配置好nginx代理(nginx使用会专门做介绍),实现对静态html的访问。在script写入一下代码:

<script th:inline="javascript">
// 发送CORS请求
 //方法1
 var url = 'http://localhost:81/get'; 
 var xhr = new XMLHttpRequest();
  xhr.onload = function(){ alert(xhr.responseText);};
  xhr.open('post', url, true);
  xhr.withCredentials = true;//允许获取cookie
 // xhr.setRequestHeader('Access-Control-Allow-Origin','');//允许访问的域名
  //xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");  
  xhr.send();
 
}
</script>

或者ajax异步请求:

<script th:inline="javascript">

//方法2.ajax
function makeCorsRequest() {
 
var url = 'http://localhost:81/get';
var xhr = new XMLHttpRequest();
 $.ajax({
  // The 'type' property sets the HTTP method.
  // A value of 'PUT' or 'DELETE' will trigger a preflight request.
  type: 'GET',

  // The URL to make the request to.
  url: url,

  // The 'contentType' property sets the 'Content-Type' header.
  // The JQuery default for this property is
  // 'application/x-www-form-urlencoded; charset=UTF-8', which does not trigger
  // a preflight. If you set this value to anything other than
  // application/x-www-form-urlencoded, multipart/form-data, or text/plain,
  // you will trigger a preflight request.
  contentType: 'text/plain',

  xhrFields: {
    // The 'xhrFields' property sets additional fields on the XMLHttpRequest.
    // This can be used to set the 'withCredentials' property.
    // Set the value to 'true' if you'd like to pass cookies to the server.
    // If this is enabled, your server must respond with the header
    // 'Access-Control-Allow-Credentials: true'.
    withCredentials: true
  },

  headers: {
    // Set any custom headers here.
    // If you set any non-simple headers, your server must include these
    // headers in the 'Access-Control-Allow-Headers' response header.
  },

  success: function(data) {
 
    // Here's where you handle a successful response.
  },

  error: function() {
    // Here's where you handle an error response.
    // Note that if the error was due to a CORS issue,
    // this function will still fire, but there won't be any additional
    // information about the error.
  }
});
 
}

</script>

 

springboot对cors有较好的支持,提供了两种使用方法,几乎无需配置即可使用。下面就详情介绍这两种方法:

1.使用注解。在Controller中的处理方法上直接使用注解即可:

        @CrossOrigin(origins = "http://localhost")
	  @GetMapping(value = "/get") 
        public Object listVouchers() {

           return "get";
       }

2.自定义配置。上一节讲到添加拦截器时候,我们定义一个类继承WebMvcConfigurerAdapter,我们只要在里面覆盖父类方法即可:

//cors跨域资源分享。设置·跨域请求的路径
	@Override 
        public void addCorsMappings(CorsRegistry registry) {
           //告诉springboot,只有get访问路径下的,访问源为localhost的才允许跨域访问
		registry.addMapping("/get/**").
             allowedOrigins("http://localhost");

	}

通过访问http://localhost:8080/index.html。即可成功请求到localhost:81/get.

 

(参考地址:https://www.html5rocks.com/en/tutorials/cors/)

 

 

 

 

 

© 著作权归作者所有

trntaken
粉丝 3
博文 26
码字总数 34519
作品 0
深圳
程序员
私信 提问
springboot中通过cors协议解决跨域问题

1、对于前后端分离的项目来说,如果前端项目与后端项目部署在两个不同的域下,那么势必会引起跨域问题的出现。 针对跨域问题,我们可能第一个想到的解决方案就是jsonp,并且以前处理跨域问题...

灌南高手No1
2018/12/26
0
0
Spring Boot学习笔记

多模块开发 [SpringBoot学习]-IDEA创建Gradle多Module结构的SpringBoot项目 RabbitMQ RabbitMQ 安装 linux安装RabbitMQ详细教程 Ubuntu 16.04 RabbitMq 安装与运行(安装篇) ubantu安装...

OSC_fly
2018/07/26
0
0
springboot系列六 cors跨域支持

CORS理解 cors的请求类型 来自 CORS简介(作者 loveis715) 简单请求(Simple Request) 预检请求(Preflighted Request) 带凭证的请求(Requests with Credential) springboot的cors支持 场景 代码...

yimingkeji
2018/11/28
0
0
springBoot 搭建web项目(前后端分离,附项目源代码地址)

概述 该项目包含springBoot-example-ui 和 springBoot-example,分别为前端与后端,前后端分离,利用ajax交互。 前端html 技术: + + + + 该项目git地址:https://github.com/jiangcaijun/sp...

开源小菜鸟2333
2017/11/01
0
0
220.详细整理学习spring boot

1.springboot是什么? 有什么用? 1.1 是什么 一个整合常用第三方框架,简化xml配置,完全采用注解形式,内置tomcat容器,帮助开发者快速实现项目搭建,spring boot 的web组件默认集成的是spr...

Lucky_Me
04/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Kubernetes云供应商架构的未来

首先,我想分享SIG的使命,因为我们用它来指导我们现在和将来的工作。从我们的章程中直接来看,SIG的使命是简化,开发和维护云供应商集成,作为Kubernetes集群的扩展或附加组件。这背后的动机...

Linux就该这么学
15分钟前
0
0
线程池没你想的那么简单

前言 原以为线程池还挺简单的(平时常用,也分析过原理),这次是想自己动手写一个线程池来更加深入的了解它;但在动手写的过程中落地到细节时发现并没想的那么容易。结合源码对比后确实不得...

crossoverJie
23分钟前
13
0
Scientific Linux开发停止 相关设备将迁移至CentOS上

在经历了将近14年的版本更迭之后,这个专注于科学领域的GNU/Linux发行版本不会发布下个重大版本更新--Scientific Linux 8了。 目前维护该发行版本的成员最终决定是时候休息了,今后将不再发布...

linuxCool
27分钟前
0
0
Redux

Redux概念 Redux = Reducer + Flux,数据层框架,将所有数据都存储到store中 Redux的工作流程 Antd的使用 安装npm install antd --save import 'antd/dist/antd.css'import { Input, Butto......

星闪海洋
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部