同源等于同域。不同源等于跨域。
同源指的是
:两个源的协议、端口号、域名必须一致,如果有一个不一致就是非同源也就是跨域,比如说协议不一样一个http一个https、端口号不一样一个是8080一个是8090还有就是域名不一样,一个是.com一个是.cn。同源策略限制了从同一个源加载的文档或脚本如何与另一个源的资源进行交互。这是浏览器的一个用于隔离潜在恶意文件的重要的安全机制。
同源策略主要限制了三个方面,一个是源a的脚本不能读取和操作源b的dom,一个是不能访问cookie,一个是源a可以给源b发请求,但是无法获取源响应的数据
跨域仅出现在浏览器端,服务器端不存在跨域限制,即使出现了跨域ajax请求也可以正常发出,但相应的数据会被浏览器的校验给卡住,出错报异常。
另外就是linK标签img标签script标签这些标签发出的请求也可能出现跨域但是浏览器对这些不做严格限制,对开发无影响
<!-- 允许加载,但脚本内容必须符合安全规范 -->
<script src="https://other-site.com/script.js"></script>
解决跨域问题的方法
cors解决跨域问题,它的全称是跨域资源共享,主要是用于浏览器校验跨域请求的一套规范。
如果服务器标识拒绝跨域请求,则浏览器校验不通过,如果服务器标识允许跨域请求,则浏览器校验通过。既然要用cors解决跨域问题就得对服务器发回来的报文里面的响应头做出修改。所以说服务器得是自己家的,别家的也改不了。
这个跨域请求又分为简单跨域请求和复杂跨域请求,说一下简单跨域请求就是1.请求方法中为get/head/post这种,2.并且请求头不能随意进行修改,要符合cors的安全规范。3.另外请求头的content-type必须试下三种值,text/plain,multipart/from-data,application/x-www-form-urlencoded。其余的都是复杂请求。
整体思路就是说服务器再给出响应的时候,响应头里面要加上acccess-control-allow-origin字段,来表明允许某个源进行跨域请求,然后浏览器的校验就能直接通过。
复杂的跨域请求处理就比较复杂了,需要在跨域请求发出之前先发送一个预检options请求,如果通过预检,继续发送实际的跨域请求。这个预检的请求头字段包括origin发起请求的源、access-control-request-method实际请求的http方法以及access-control-request-header实际请求中使用的自定义头(如果有的情况下)。然后服务器要先通过预检的请求就得返回如下响应头,比如说access-contorl-allow-orgin允许的源,然后是允许的方法和允许的自定义头。 然后再去处理实际的跨域请求,这和简单请求跨域的处理方式相同。
再一个就是使用jsonp解决跨域问题
jsonp是利用script标签可以进行跨域加载脚本来解决跨域问题的。
基本流程就是1.客户端创建一个script标签,然后将其src属性设置为要进行跨域请求的url,同时再准备一个回调函数,这个回调函数用来处理跨域请求响应回来的数据,并且发送请求时作为参数。2.服务端接收到请求后,将数据封装在回调函数中并返回。3.客户端的回调函数被调用,数据传递成功。
它是一个老办法,现在貌似用的不多,而且只能处理get请求,因为标签发出去的跨域请求都是get请求。
还有一些比如说通过代理服务器解决跨域,若a源和b源不同源,可以中间配置一台代理服务器去转发请求。比如说通过nginx反向代理服务器解决跨域问题,将不同源的请求代理到同一域名下,到nginx服务器这就变成同源的了,然后nginx服务器在进行反向代理进行转发请求,此时就不存在跨域问题了。