有个朋友在写扇贝插件的时候遇到了跨域问题。

于是我对解决跨域问题的方式进行了一番探讨。

问题

API：查询单词

URL： https://api.shanbay.com/bdc/search/?word={word}

请求方式: GET

参数： {word}, 必须，要查询的单词

报错为

XMLHttpRequest cannot load http://localhost/home/saveCandidate. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 404.

这就是典型的跨域问题。

但是我在浏览器里输入URL是可以进行查询单词的操作的，有什么不同，即下面两个问题

  1. 为什么在浏览器地址栏输入URL不会出现跨域问题。
  2. 不在服务器运行的html是否可以完成一次http请求

经过Google和自己测试

  1. 跨域限制是浏览器行为，不是服务器行为。 浏览器认为地址栏输入时安全的,所以不限制认为是跨域。
  2. 可以，只要服务器配置为所有域都可以进行请求,那么不在服务器运行的HTML就可以完成http请求。

什么是跨域问题

同源策略：

同源指的是域名（或IP），协议，端口都相同，不同源的客户端脚本(javascript、ActionScript)在没明确授权的情况下，不能读写对方的资源。

URL 解释 是否跨域
http://www.morethink.cn 原来的URL
http://www.image.morethink.cn 子域名 跨域(cookie也无法访问)
http://morethink.cn 不加www 跨域
https://www.morethink.cn 更改协议 跨域
http://www.morethink.cn:8080 更改端口号 跨域

原因：

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

设想这样一种情况：A网站是一家银行，用户登录以后，又去浏览其他网站。如果其他网站可以读取A网站的Cookie，会发生什么？

很显然，如果Cookie包含隐私（比如存款总额），这些信息就会泄漏。更可怕的是，Cookie往往用来保存用户的登录状态，如果用户没有退出登录，其他网站就可以冒充用户，为所欲为。因为浏览器同时还规定，提交表单不受同源政策的限制。

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

同源策略限制以下几种行为：

  1. Cookie、LocalStorage 和 IndexDB 无法读取
  2. DOM 和 Js对象无法获得
  3. AJAX 请求不能发送

模拟跨域问题

测试URL为 http://localhost:80/home/allProductions

可以直接在浏览器console中执行

var xhr = new XMLHttpRequest();

xhr.open('GET', 'http://localhost:80/home/allProductions',true);

xhr.send();

xhr.onreadystatechange=function() {

    if(xhr.readyState == 4) {

        if(xhr.status == 200) {

          console.log(JSON.parse(xhr.responseText));

        }

    }

}

在任意网站打开控制台，执行此段代码可以模拟跨域请求。

在知乎控制台打开报错如下

Mixed Content: The page at 'https://www.zhihu.com/question/26376773' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://localhost/home/allProductions'. This request has been blocked; the content must be served over HTTPS.

因为知乎是https，报错与普通的http协议不同。

再澄清一下跨域问题：

  1. 并非浏览器限制了发起跨站请求，而是跨站请求可以正常发起，但是返回结果被浏览器拦截了。最好的例子是CRSF跨站攻击原理，无论是否跨域，请求已经发送到了后端服务器！
  2. 但是，有些浏览器不允许从HTTPS的域跨域访问HTTP，比如Chrome和Firefox，这些浏览器在请求还未发出的时候就会拦截请求，这是一个特例。

在博客园控制台打开报错如下

XMLHttpRequest cannot load http://localhost/home/allProductions. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.cnblogs.com' is therefore not allowed access.

怎么解决跨域问题

解决方案有很多

  1. 通过jsonp跨域
  2. document.domain + iframe跨域
  3. location.hash + iframe
  4. window.name + iframe跨域
  5. postMessage跨域
  6. 跨域资源共享（CORS）
  7. 前端通过Nginx解决跨域问题
  8. nodejs中间件代理跨域
  9. WebSocket协议跨域

这里主要介绍SpringMVC解决跨域问题的方式。

  1. JSONP
  2. CORS
  3. WebSocket

JSONP

可以直接参考Spring MVC 4.1 支持jsonp进行配置你的SpringMVC注解

JSONP 原理

我虽然请求不了json数据，但是我可以请求一个Content-Type为application/javascript的JavaScript对象，这样就可以避免浏览器的同源策略。

就是当服务器接受到名为jsonp或者callback的参数时，返回Content-Type: application/javascript的结果，从而避免浏览器的同源策略检测。

在控制台中直接进行测试你的jsonp是否配置成功：

function println(data) {

    console.log(data);

}

var url = "http://localhost:80/home/allProductions?&callback=println";

// 创建script标签，设置其属性

var script = document.createElement('script');

script.setAttribute('src', url);

// 把script标签加入head，此时调用开始

document.getElementsByTagName('head')[0].appendChild(script);

使用JQuery测试你的jsonp是否配置成功，因为控制台不能直接加载JQuery，需要自己建立html文件来进行测试：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>

    <script type="text/javascript">

        function println(data) {

            console.log(data);

            console.log('print');

        }

      function jsonp_test() {

            $.ajax({

                type: "get",

                url: "http://localhost:80/home/allProductions",

                dataType: "jsonp",

                jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)

                jsonpCallback: "println", //返回后调用的处理函数

                error: function () { //请求出错的处理

                    alert("请求出错");

                }

            });

        }

    </script>

</head>

<body onload="jsonp_test()">

</body>

</html>

CORS

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。

它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

CORS需要浏览器和服务器同时支持。

  1. 所有浏览器都支持该功能，IE浏览器不能低于IE10。

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

即CORS与普通请求代码一样。

CORS与JSONP相比

  1. JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求。
  2. 使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理。
  3. JSONP主要被老的浏览器支持，它们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS。

@CrossOrigin注解

此注解既可用于方法也可用于类

源码如下：

@CrossOrigin(origins = "http://www.zhihu.com")

@RequestMapping(value = "/allProductions", method = RequestMethod.GET)

public Result getAllOldProductions() {

}

@CrossOrigin注解既可注解在方法上，也可注解在类上。

完成配置之后

XML全局配置

所有跨域请求都可以访问

<mvc:cors>

    <mvc:mapping path="/**" />

</mvc:cors>

更加细粒度的配置：

<mvc:cors>

    <mvc:mapping path="/api/**"

        allowed-origins="http://domain1.com, http://domain2.com"

        allowed-methods="GET, PUT"

        allowed-headers="header1, header2, header3"

        exposed-headers="header1, header2" allow-credentials="false"

        max-age="123" />

    <mvc:mapping path="/resources/**"

        allowed-origins="http://domain1.com" />

</mvc:cors>

WebSocket

WebSocket是一种通信协议，使用ws://（非加密）和wss://（加密）作为协议前缀，在2008年诞生，2011年成为国际标准。所有浏览器都已经支持了。

它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。

该协议不实行同源政策，只要服务器支持，就可以通过它进行跨源通信。

请求头信息：(多了个 origin)

GET /chat HTTP/1.1

Host: server.example.com

Upgrade: websocket

Connection: Upgrade

Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==

Sec-WebSocket-Protocol: chat, superchat

Sec-WebSocket-Version: 13

Origin: http://example.com

响应头：(如果origin在白名单内)

HTTP/1.1 101 Switching Protocols

Upgrade: websocket

Connection: Upgrade

Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=

Sec-WebSocket-Protocol: chat

相比于HTTP/2

HTTP/2只是对HTML、CSS等JS资源的传输方式进行了优化，并没有提供新的JS API，不能用于实时传输消息，也无法推送指定的信息。

参考文档：

  1. 跨域

  2. SpringMVC 跨域解决方法
  3. 前端常见跨域解决方案（全）

SpringMVC解决跨域问题的更多相关文章

  1. [转载]SpringMVC解决跨域问题

    本文转载自  https://www.cnblogs.com/morethink/p/6525216.html SpringMVC解决跨域问题, 感谢作者! 有个朋友在写扇贝插件的时候遇到了跨域问题. ...

  2. SpringMVC解决跨域问题及CROS

    CORS 首先因为最近在做一个前后端分离的项目,分开就意味着可能不在一个域中,所以不可避免的遇到CORS的问题.试过几个方法: Spring MVC 4.2.5以后新增的支持跨域的注解@CrossOr ...

  3. SpringMVC解决跨域的两种方案

    1. 什么是跨域 2. 跨域的应用情景 3. 通过注解的方式允许跨域 4. 通过配置文件的方式允许跨域 1. 什么是跨域 跨域,即跨站HTTP请求(Cross-site HTTP request),指 ...

  4. springMVC解决跨域

    原文:https://www.cnblogs.com/shihaiming/p/9544060.html 介绍:   跨站 HTTP 请求(Cross-site HTTP request)是指发起请求 ...

  5. springmvc 解决跨域CORS

    import java.io.IOException; import javax.servlet.Filter; import javax.servlet.FilterChain; import ja ...

  6. 前端通过Nginx反向代理解决跨域问题

    在前面写的一篇文章SpringMVC 跨域,我们探讨了什么是跨域问题以及SpringMVC怎么解决跨域问题,解决方式主要有如下三种方式: JSONP CORS WebSocket 可是这几种方式都是基 ...

  7. java springmvc 前端 跨域问题

    有个朋友在写扇贝插件的时候遇到了跨域问题.于是我对解决跨域问题的方式进行了一番探讨. 问题 API:查询单词URL: https://api.shanbay.com/bdc/search/?word= ...

  8. 使用SpringMVC的@CrossOrigin注解解决跨域请求问题

    跨域问题,通俗说就是用ajax请求其他站点的接口,浏览器默认是不允许的.同源策略(Same-orgin policy)限制了一个源(orgin)中加载脚本或脚本与来自其他源(orgin)中资源的交互方 ...

  9. springboot解决跨域问题(Cors)

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

随机推荐

  1. 高通msm8909耳机调试

    http://blog.csdn.net/mike8825/article/details/69489865?locationnum=3&fps=1 1.DTS相应修改: DTS相关代码:ke ...

  2. 针对Oracle的审计方案

    主题:针对Oracle的审计方案 数据库环境:Oracle 11g 数据库审计需求: 1.需要对连接数据库的行为进行审计 2.需要对核心表的DML操作进行审计 3.需要迁移审计数据到指定表空间 4.需 ...

  3. npm 简单实用命令

    npm -v    查看版本号 npm get global             返回false表示默认本地安装 true全局安装 npm set global=true     设置默认为全局安 ...

  4. RNN的简单的推导演算公式（BPTT）

    附上y=2x-b拟合的简单的代码. import numpy as np x = np.asarray([2,1,3,5,6]); y = np.zeros((1,5)); learning_rate ...

  5. Nginx+Tomcat实现负载均衡小demo

    一.搭建Tomcat服务 下载安装JDK和Tomcat就不说了,太简单了.由于是win7单机环境测试,启动多个Tomcat服务可以通过在server.xml配置文件中修改端口实现.准备两个Tomcat ...

  6. Java-反射初级知识掌握

    PS:本文就Java基础需要掌握的反射知识做下汇总和分析. Java-reflect:java反射,对应我们研究框架.底层框架起到基本的知识储备. Class类Java的世界类,万事皆对象,所有的类都 ...

  7. Codeforces 777A Shell Game

    A. Shell Game time limit per test:0.5 seconds memory limit per test:256 megabytes input:standard inp ...

  8. 2017 Multi-University Training Contest - Team 9 1001&&HDU 6161 Big binary tree【树形dp+hash】

    Big binary tree Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)T ...

  9. BZOJ 3097: Hash Killer I【构造题，思维题】

    3097: Hash Killer I Time Limit: 5 Sec  Memory Limit: 128 MBSec  Special JudgeSubmit: 963  Solved: 36 ...

  10. 数位dp初探

    我这种蒟蒻就一直不会写数位dp.. 于是开了个坑.. 1833: [ZJOI2010]count 数字计数 这道被KPM大爷说是入门题..嗯似乎找找规律然后减掉0的情况后乱搞就可以了..(但是还是写了 ...