摘要:以前听说过跨域问题,但一直没去总结,听说是面试必问。所以我们一起来试着理解下吧
跨域问题的产生是浏览器的同源机制:
大方向是域名,端口,协议的不同,如下:
不同的域名 (比如在网站 example.com 请求 api.com)-
不同的子域名 (比如在网站 example.com 请求 api.example.com)-
不同的端口 (比如在网站 example.com 请求 example.com:3001)-
不同协议 (比如在网站 https://example.com 请求 http://example.com)
怎么解决跨域问题?
1.利用jsonp:
jsonp和json是不同的概念,jsonp一种非正式传输协议,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据.json是参数。
解决原理:
因为像src,href等通常没有同源的限制,动态创建script标签,利用script标签的src属性可以获取任何域下的js脚本,通过这个特性(也可以说漏洞),服务器端不再返回json格式,而是返回一段调用某个函数的js代码,在src中进行了调用,这样实现了跨域.
2.cors
cors:跨资源共享:
这也是基于跨域本身去解决
通常在服务器端设置:
首先我们要了解下什么是简单请求和非简单请求?(例如content-type:json(非)methods:( GET,HEAD,POST)
非简单请求每次会发出两条请求,自然会影响我们的效率,HTTP协议里面增加了一个响应头可以用来缓存我们的预检命令。(关键词:options完成)
OPTIONS预检未通过,就不会发送请求到服务端
方法:
后台程序没有在响应头里添加res.addHeader(“Access-Control-Allow-Headers”, “Content-Type”)字段
请求头: