web开发中的跨域问题

一.为什么会有跨域问题?

1.浏览器限制

2.跨域

域名,端口,协议任意一个不相同;

3.XHR(XMLHttpRequest)请求

 

满足以上三个条件才会触发跨域,任意一个不满足就不算是跨域;

二.解决跨域问题的方法

针对上边三中种方式,让其不满足上边的条件即可;

1.浏览器解除安全设置,这种方式需要修改客户端的浏览器,另外此种方式也不安全,不方便也不建议这样设置;

2.将后端服务使用相同的域名,端口,协议;将后端的服务暴露在相同的域名,端口,协议下就能解决该问题;

此处有两种方式进行解决,这里涉及到后端服务器的调用流程:

方法1:web server返回特定的http header,告诉浏览器,允许该域名访问;

                     Access-Control-Allow-Methods:对应的方法,如(GET),*允许所有

                     Access-Control-Allow-Origin:对应的协议,域名,端口,如(http://www.wentjiang.com),*允许所有,但是不能使用cookie,使用cookie时,需要写对应的origin

                     Spring应用直接使用@origincors

方法2:在nginx或者apache对后端服务做映射(反向代理),让浏览器直接通过不跨域的域名直接进行访问;

 

3.页面不使用XHR请求;

使用jsonp请求,jsonp是一种非官方的协议,大家约定俗成的调用方式,因为页面可以加载不同源的js代码,所以jsonp就将普通的请求后端的请求改造成请求js的请求,请求服务器的结果为原本请求接口的数据;但这种方式不建议去使用;

jsonp有以下几个弊端,1.服务器需要支持jsonp,需要添加添加callback函数名及修改固定的格式,2.只支持get请求,不能使用其他请求去调用,3.发出的不是XHR请求;

三.跨域问题的常见形式

跨域分为简单跨域和复杂跨域,

简单跨域会直接请求服务器端,并根据服务端返回的头文件进行判断;

复杂跨域浏览器会先向服务器端发出options请求,判断服务器端是否允许跨域,允许之后才进行正常的请求操作;