跨域请求的笔记

以前关于跨域请求的理解就止于jsonp请求,在慕课中看了关于跨域的问题,记录一篇笔记,首先记录一下跨域问题产生的原因,get请求跨域请求数据的时候是可以请求到后端的,后端返回数据也是正常的

但是却显示不出来,并不是服务器端不允许跨域,而是浏览器端出于安全考虑而拦截了返回回来的数据,如果启动浏览器时添加参数,使浏览器不拦截返回的数据就可以看到返回数据是正常的(添加启动参数的方法请百度一下,我也没记住,可以在百度上花一分钟就可以找到的东西完全没有必要去刻意的记),浏览器端调试信息找到network查看你的请求信息可以发现就算你是接收不到返回数据的时候返回状态码依然是200,请求类型为xhr,(xmlhttpRequset),如果换成其他的请求类型,返回数据是可以正常接收

跨域问题的原因:浏览器，跨域（域名，端口，协议，任何一个不一致，就会被认为跨域），xmlHttpRequest请求,这三个同时满足时才可能发生跨域安全问题

记录一下jsonp的原理,跨域请求数据的时候浏览器会拦截,但是跨域加载文件的时候浏览器是不会拦截,jsonp跨域的原理就是将跨域请求到的数据转成脚本文件的格式返回,抓包jsonp请求的时候可以发现cllbback参数和另一个随机参数,cllbback为一个约定参数,如果说后台发现了这个参数就默认请求为jsonp跨域请求,就会将返回值封装成文件格式,随机参数为返回值其中的一个key,返回值作为value,在后台需要做处理,因为你返回的是json格式,但是前台以脚本解析就会出现问题,jsonp请求只能发送GET请求,就算你指定位POST还是会默认转换成GET

引入一个概念,简单请求和非简单请求

简单请求:get head post 在请求头中没有自定义头(感兴趣的可以百度一下)

第一种跨域配置

简单请求:在服务器端添加指定的响应头告诉浏览器端允许跨域访问就可以解决,

非简单请求在请求前就会发送预解命令,如果被允许就可以访问如未发现指定头信息的将不被允许获取，可以写拦截器对指定（全部方法进行拦截添加响应头）。如果每次非简单请求都发送两次请求的话会很影响性能，所以，定义非简单请求的响应头的时候是可以设置缓存的，在一定时间内浏览器会在本地缓存中获取响应头而不是访问后台获取

带cookie的跨域必须是完全匹配当期的域，不可以使用*作为通配符

存在的问题，如果想要完全匹配，就只能允许一个域访问，比如，我可以是用localhost和127.0.0.1都是代表本机，但是却只能通过一个，在跨域中请求头中的Origin保存着请求的域可以在filter中取到软后放入Access-control-allow-Origin响应头中这样就可以动态获得请求的域满足所有域的请求

第二种跨域配置,在nginx之类的反向代理服务器中加入配置

这种配置的原理为,浏览器请求和返回数据都是通过nginx,因为工作的原因很久没有接触过nginx了所以配置我就直接粘出来了

在ngix中配置，新建文件夹vhost在conf中加入include vhost/*.config加入指定文件夹下所有的配置文件

在文件夹下创建文件配置信息为

server{

listen 80; // 监听80端口，因为ngix的默认端口为80

server_name b.com; // 在本地的host文件中让b.com指向本机

location /{

proxy_pass http://localhost:8080/; // 指定代理的路径为本地的8080端口

// 增加响应头

add_header Access-Control-Allow-Methods *;// 所有方法

add_header Access-Control-Max_Age 3600; //非简单请求的响应头的缓存时间

add_header Access-Control-Allow-Credentials true;

add_header Access-Control-All-Origin $http_origin;指定域在非复杂请求中可以指定为*

add_header Access-Control-Allow-Headers

$http_access_control_request_headers;// 注意在配置中字母为小写，将杠换成下划线

// 如果是OPTIONS验证请求直接返回200成功码

if($request_method = OPTIONS){

return 200;

}

}

}