同源策略,因为浏览器可以打开多个页面,多个不同网站,为了防止不同的网站发请求给我们页面上其他的网站获取我们在其他网站上的信息,浏览器就规定网站只能给同源的网站发请求与响应,而如果公司有两个域名,域名之间需要信息互通,就需要跨域
- 如何进行跨域
- CORS
- JSONP
- 反向代理
CORS:
假设a.com:8888想把GET/data共享给b.com:7777
在a.com:8888的路径为'/data'的上设置response.setHeader(Access-Control-Allow-Origin:http://b.com:7777) //浏览器会认为这两个域名存在着某种关联,就不
会再限制这两个域名的数据共享了
复杂请求(MDN)
假设a.com:8888想把POST/sign_in共享给b.com:7777
1.a.com后端需要响应OPTIONS请求
2.a.com后端需要响应POST请求
需要在a.com:8888的路径为'/data'的上设置 response.setHeader('Access-Control-Allow-Methods', 'POST, GET, OPTIONS')和
response.setHeader('Access-Control-Allow-Headers', 'frank') //更多可以搜索https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS(跨源资源共享)
JSONP:
假设a.com:8888想把信息共享给b.com:7777
在b.com:7777服务器中设置 let '随机的名字'=Math.random().toString().substring(2)
在b.com:7777设置一个全局属性为window.'属性的名字',让'属性的名字'='随机的名字',在b.com:7777内部提前设置response.write('随机的名字'({}))。利用<script>不能被同源策略特性,在b.com:7777的服务器中通过<script>请求a.com:8888的信息,把变量'随机的名字'传给a.com:8888( script.src="a.com:8888/路径?='随机的名字'" + '随机的名字' )
,将a.com:8888下载到本地,通过window.'属性的名字'得到想要的数据,最后script.onload = ()=>{Reflect.deleteProperty(window,'随机的属性')}减少内存的占用。但是使用<script>只能以get的方式获取
反向代理:
在用户上开的代理叫正向代理,在服务器上开的代理叫反向代理。假设a.com:8888想把GET/data共享给b.com:7777,b.com:7777的后端建立一个与a.com:8888一样的路径,在b.com:7777的Nginx配置location/data{proxy_pass http://a.com:8888;}后端的域名帮前端请求信息,然后前端访问自己的后端拿到信息