跨域实现方式

Posted 2020-10-17

同源：同协议、端口、域名（三者必须全部相同）

同源策略：浏览器不允许当前页面向非同源站点发送请求（防止用户信息被恶意站点获取的基本措施）

跨域请求：当前站点向某些非同源站点进行请求

 

跨域请求方式：

一、服务器端允许跨域

服务器端设置响应头Access-Control-Allow-Origin: *

可以直接进行请求

二、JSONP(只支持GET请求)

 iframe、img、style、script等元素的src属性拥有可以直接向不同域请求资源的特性

jsonp正是利用script标签从此进行跨域请求

1     <script>
2        function hello(res){
3            console.log(res)
4        }
5     </script>
6     <script src=" https://cnodejs.org/api/v1/topic/5433d5e4e737cbe96dcef312?callback=hello"></script>
// 当前链接不支持JSONP,所以会报错

实现机制：

1.首先，服务器得支持JSON格式，返回的数据是一个由回调函数包裹的数据 hello(data)

2.当前站点需要实现hello方法，在资源请求完成前声明方法

 

三、CORS

需要浏览器和服务器同时支持，需要服务器提供CORS接口，浏览器根据AJAX请求自动添加一些附加的头信息，有时会多出一次附加请求（预检preflight）

 

四、代理跨域

通过同域名下的web服务器创建一个代理，访问不同域的资源