同源策略以及跨域解决方案

113 阅读2分钟

两个url的域名、端口和协议全部都是相同的,那它们就是同源。

如果不同源一个url去另一个url就是跨域

如果不跨域的话,ajax访问不到

从a域名向b域名发一个get请求。这个请求能发出去,服务器也能得到请求,并且也会响应。但js拿不到它的response ,原因就是浏览器为了安全起见给限制了

那么如果我们要跨越这个浏览器的限制呢?

如果你是要兼容ie就选用jsonp,不需要兼容就cors

jsonp就是请求一个js文件。这个js文件会执行一个回调,这个回调里面就有我们的布局 。所以就可以以callback当成参数传给后台。那么后台会把这个函数再次返回给我们执行

如果有其他网站要调用我们的jsonp,我们可以判断其他网站请求头的referer

cors解决方案

可以在中间件设置响应头response.setHeader('Access-Control-Allow-Origin','*')

jsonp解决方案

  • 原理:动态创建script标签,通过script标签的src请求没有跨域限制来获取资源
  • 核心原理:如果script标签的src属性的请求,服务器返回的是一个函数调用。则浏览器会执行这个函数

这是浏览器script标签的一个的漏洞(历史遗留问题) jsonp仅支持get请求(因为能用url传参)

1571893763046.png

JSONP与CORS区别

  • CORS:

    • 服务器返回响应头,前端无需任何处理
    • 简单快捷,支持所有请求方式
  • JSONP

    • 浏览器:自定义响应回调函数,使用script标签的src请求

      • 利用浏览器的src属性没有跨域这一限制特点
    • 服务器:接收callback参数,返回函数调用

    • 处理复杂,并且只支持get请求

      • 原因:get请求参数直接在url后面拼接,而post请求参数是放在请求体中