前端-同源与跨域

一、同源策略

两个网站协议名、域名、端口号有一个不同就是非同源，就是跨域。跨域问题就是浏览器的同源策略造成的。

同源是指协议名、域名、端口号 必须完全一致！

http 默认端口号是80，https 默认端口号是443

同源策略的限制

一般来说，同源策略是指对 javascript 脚本的限制，

1. js 脚本不能跨域访问 cookie、localstorage、indexDB
2. js 脚本不能跨域操作 dom
3. 不能跨域发送 ajax 请求

二、跨域问题解决方案

1.JSONP跨域

jsonp的原理就是利用<script>标签没有跨域限制，通过<script>标签src属性，发送带有callback参数的GET请求，服务端将接口返回数据拼凑到callback函数中，返回给浏览器，浏览器解析执行，从而前端拿到callback函数返回的数据。

 jsonp的缺点：只能发送get一种请求。

2.接口代理

• 通过修改nginx服务器配置实现代理转发
• 前端修改，后端不用

   前端请求 a 地址，设置nginx服务，将 a 地址代理到 b 地址。

3.cors技术

CORS :全称cross origin resource share （资源共享）

工作原理： 服务器 在返回响应报文的时候，在响应头中 设置一个允许的header

res.setHeader(‘Access-Control-Allow-Origin’, ‘*’)

CORS :全称cross origin resource share （资源共享）