详解Web跨域和同源,超全～（8种解决方式）

跨域和同源

---

跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。

1.javascript的同源策略（Same-Origin Policy）

1.1 在同源策略下，浏览器限制的请求：

• Ajax请求发送不出去
• DOM 和 JS 对象无法获取
• Cookie、LocalStorage 和 IndexDB 无法读取

1.2 允许通信的情况：

• 同一来源指的是协议+域名+端口号

协议如：http,ftp https
端口名如：80（http协议的默认端口：80，https:协议的默认端口是8083）

• 同域下的不同文件夹

1.3 不允许的情况：

• 域名和域名对应的IP
  
• 主域相同，子域不同
  

1. 主域：一般是域名后缀，如:baidu.com
   子域：一般是前缀,如:www.
2. 如果是协议和端口造成的跨域问题“前台”是无能为力的

---

2. 跨域问题的解决方案

• 2.1 服务端CORS方法

  CORS——跨域资源共享"（Cross-origin resource sharing）

  以一个例子来说明：

  • 服务器的888端口发送了一个html
    
  • 但是在html里面向8887端口发送了请求【跨域了】
    
  • 浏览器访问localhost：8888，控制台出现报错，cors policy阻止了这个跨域请求，因为没有设置’Access-Control-Allow-Origin这个请求头
    
  • 这个时候其实请求是发出去了的，但是，浏览器看到response头里面没有acar的请求头，知道了这个跨域请求其实是不被允许的，所以就会拦截他，【浏览器跨域限制】