Spring解决Vue Axios跨域访问的问题

发表于 | |

什么叫跨域

概念：只要协议、域名、端口有任何一个不同，都被当作是不同的域。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
URL                      说明       是否允许通信
http://www.a.com/a.js
http://www.a.com/b.js     同一域名下   允许
http://www.a.com/lab/a.js
http://www.a.com/script/b.js 同一域名下不同文件夹 允许
http://www.a.com:8000/a.js
http://www.a.com/b.js     同一域名，不同端口  不允许
http://www.a.com/a.js
https://www.a.com/b.js 同一域名，不同协议 不允许
http://www.a.com/a.js
http://70.32.92.74/b.js 域名和域名对应ip 不允许
http://www.a.com/a.js
http://script.a.com/b.js 主域相同，子域不同 不允许
http://www.a.com/a.js
http://a.com/b.js 同一域名，不同二级域名（同上） 不允许（cookie这种情况下也不允许访问）
http://www.cnblogs.com/a.js
http://www.a.com/b.js 不同域名 不允许

通过jsonp跨域

维基百科的定义是：JSONP（JSON with Padding）是资料格式 JSON 的一种“使用模式”，可以让网页从别的网域要资料。
但是这种方法只支持Get请求，不支持post请求

通过CORS跨域

CORS是一个W3C标准，全称是”跨域资源共享”，它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

首先先看一个场景,一般情况下没有设置跨域访问时，在Vue中定义了方法，触发这个方法时通过axios执行post请求时:

1
2
3
axios.post('http://localhost:8080/user/leoli/123456789/login').then(res => {
                console.log(res);
            });

会报以下错误

这时候可以通过配置cors的方式进行跨域访问，在Spring 4.2版本支持了CORS的方式

  • 配置的方式

    1
    2
    3
    4
    5
    6
    7
    <mvc:cors>
        <mvc:mapping path="/**"
            allowed-origins="*"
            allowed-methods="POST, GET, OPTIONS, DELETE, PUT"
            allowed-headers="Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"
            allow-credentials="true" />
    </mvc:cors>

  • 注解的方式（@CrossOrigin）

    1
    @CrossOrigin(origins = "*", maxAge = 3600)

这时候再跑post请求就成功了