java基础知识 - SpringBoot - SpringSecurity - jsonp跨域请求

关于jsonp，如下文章写得很好

https://www.cnblogs.com/chiangchou/p/jsonp.html

https://www.imooc.com/article/291931

 

下面说明下常见跨域的几种方案

1. JSONP实现跨域

jsonp的原理就是利用<script>标签没有跨域限制，通过<script>标签src属性，发送带有callback参数的GET请求，服务端将接口返回数据拼凑到callback函数中，返回给浏览器，浏览器解析执行，从而前端拿到callback函数返回的数据。

1）原生JS实现：

// 前端实现方式
 <script>

    var script = document.createElement('script');
    script.type = 'text/javascript';

    // 传参一个回调函数名给后端，方便后端返回时执行这个在前端定义的回调函数
    script.src = 'http://www.domain2.com:8080/login?user=admin&callback=handleCallback';
    document.head.appendChild(script);

    // 回调执行函数
    function handleCallback(res) {
        alert(JSON.stringify(res));
    }
 </script>

//后端实现方式

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    response.setCharacterEncoding("UTF-8");
    response.setContentType("text/html;charset=UTF-8");

    //数据
    List<Student> studentList = getStudentList();


    JSONArray jsonArray = JSONArray.fromObject(studentList);
    String result = jsonArray.toString();

    //前端传过来的回调函数名称
    String callback = request.getParameter("callback");
    //用回调函数名称包裹返回数据，这样，返回数据就作为回调函数的参数传回去了
    result = callback + "(" + result + ")";

    response.getWriter().write(result);
}

 

jsonp的缺点：只能发送get一种请求。

2、跨域资源共享（CORS）

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。
它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

  浏览器将CORS跨域请求分为简单请求和非简单请求。

  只要同时满足一下两个条件，就属于简单请求

一、产生原因

跨域是如何形成的？

当我们请求一个url的 协议、域名、端口三者之间任意一个与当前页面url的协议、域名、端口 不同这种现象我们把它称之为跨域

跨域会导致：

1、无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB

2、无法接触非同源网页的 DOM

3、无法向非同源地址发送 AJAX 请求（可以发送，但浏览器会拒绝接受响应）

导致跨域的根本原因是请求浏览器的同源策略导致的 ，而跨域请求报错的原因是： 浏览器同源策略 && 请求是ajax类型 && 请求确实跨域了。

二、解决办法

1.jsonp

jsonp 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，兼容性好（兼容低版本IE），缺点是只支持get请求，不支持post请求。

原理：在浏览器上 <script>、<img>、<link>、<iframe>等标签都可以加载跨域资源 且不受同源限制，可以用来作为请求，后端接受请求后返回一个回调函数callback，调用前端已经定义好的函数，从而实现跨域请求.

 举个很简单的例子 ： 我们通过img标签的src属性， 请求一个网络地址的图片 ，这就是非同源请求了 ，但是由于浏览器的同源策略只对ajax请求有效所以 我们的请求不会受到影响 。换句话来说 只有ajax请求才会产生跨域问题。

 举个例子：动态创建 script 标签,利用 script 标签的 src 请求没有跨域的限制.

 2.CORS

服务器设置:

 ACCESS-CONTROL-ALLOW-ORIGIN: *

 只要浏览器检测到响应头带上了 CORS，并且允许的源包括了本网站，那么就不会拦截请求响应。

 CORS 是跨域资源分享（Cross-Origin Resource Sharing）的缩写。它是 W3C 标准，属于跨源 AJAX 请求的根本解决方法。

 CORS允许任何类型的请求。在使用CORS来访问数据的时候，客户端不需要更改任何数据访问逻辑。所有的一切工作都是在服务端及浏览器之间自动完成的。前端代码与发送普通Ajax请求没有差异，我们只需在服务端设置即可（后端的活）