什么是同源策略,什么是跨域?解决跨域的方式有哪些?

351 阅读4分钟

什么是同源策略

源就是协议、域名和端口号

同源是指"协议+域名+端口"三者相同,有一个不同就不是同源

跨域:当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同,浏览器不能执行其他网站的脚本

注意:localhost和127.0.0.1虽然都指向本机,但也属于跨域

浏览器执行javascript脚本时,会检查这个脚本属于哪个页面,如果不是同源页面,就不会被执行。

跨域限制主要的目的就是为了用户的上网安全

什么是跨域

指的是浏览器不能执行其他网站的脚本,它是由浏览器的同源策略造成的,是浏览器对 javascript 施加的安全限制,防止他人恶意攻击网站

比如一个黑客,他利用 iframe 把真正的银行登录页面嵌到他的页面上,当你使用真实的用户名和密码登录时,如果没有同源限制,他的页面就可以通过 JavaScript 读取到你的表单中输入的内,这样用户名和密码就轻松到手了。

解决跨域的方式

1. JSONP方式解决跨域问题

JSONP之所以能够用来解决跨域方案,主要是因为 script 脚本拥有跨域能力,而JSONP正是利用这一点来实现

JSONP只能是“GET”请求,不能进行较为复杂的POST和其它请求(所以被淘汰了)

2. CORS解决跨域问题

CORS是一个W3C标准,全称是"跨域资源共享",它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。

后端应该配置

3. 代理请求方式解决接口跨域问题

· 前端ajax请求的是本地接口

· 本地接口接收到请求后向实际的接口请求数据,然后再将信息返回给前端

· 一般用node.js即可代理

// 项目中vue.config.js文件中设置
devServer: {
    // 代理请求的服务器
    host: '127.0.0.1',
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    // 跨域
    proxy: {
      // 基准地址/拦截地址
      // 最终路径target+基地址
        target: '请求的目标地址',
        pathRewrite: { '^/api': '/prod-api' },
        changeOrigin: true // 是否允许跨域
    }
    // before: require('./mock/mock-server.js')
  },

4. Websocket(用于跨域,即时通信)

因为这种方式本质没有使用了 HTTP 的响应头, 因此也没有跨域的限制。客户端和服务器之间存在持久的连接,而且双方都可以随时开始发送数据。

5. Nginx反向代理 (运维提供)

Nginx 作为一个基于 C 实现的高性能 Web 服务器,可以通过系列算法解决上述的负载均衡问题。并且由于它具有高并发、高可靠性、高扩展性、开源等特点,成为开发人员常用的反向代理工具。

Nginx 作为一款优秀的反向代理服务器,可以通过不同的负载均衡算法来解决请求量过大情况下的服务器资源分配问题。

反向代理:代理服务器端

多个客户端的所有请求都发到了代理服务器处,再由代理服务器按照一定的规则将请求分发给各个服务器,反向代理隐藏了服务器的信息(提高了安全保障),它代理的是服务器端,代其接收请求。

反向代理进行均衡分工,控制流量,避免出现局部节点负载过大的问题

image.png

负载均衡常用算法

  1.  轮询 (round-robin)

该算法中每个请求按时间顺序逐一分配到不同的服务器处理,因此适用于服务器性能相近的集群情况,其中每个服务器承载相同的负载。

缺点:服务器的性能不同,该算法容易引发资源分配不合理等问题

  1.  加权轮询 修补轮询的问题

在加权轮询中,每个服务器会有各自的 weight, weight值越大意味着该服务器的性能越好,客户端的请求按权值比例分配,当一个请求到达时,优先为其分配权值最大的服务器。

  1. IP 哈希(IP hash)

ip_hash 依据发出请求的客户端 IP 的 hash 值来分配服务器,该算法可以保证同 IP 发出的请求映射到同一服务器,或者具有相同 hash 值的不同 IP 映射到同一服务器。

一定程度上解决了集群部署环境下Session不共享的问题

  1. 最小连接数(Least Connections)

优先选择连接数最少的服务器,在普遍会话较长的情况下推荐使用。