前端网站如何解决跨域问题?宝塔轻松搞定!

一、什么是跨域?

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

这里说明一下,无法跨域是浏览器对于用户安全的考虑,如果自己写个没有同源策略的浏览器,完全不用考虑跨域问题了。就是浏览器的锅。

跨域报错情况

非同源策略

Cookie、LocalStorage 和 IndexDB 无法读取

DOM 和 JS 对象无法获取

Ajax请求发送不出去。

二、跨域的场景介绍

场景当前页面的Url被请求的地址或页面Url是/否跨域
同源http://www.baidu.comhttp://www.baidu.com/login.html否,同源(协议、域名、端口号相同)
协议不同http://www.baidu.comhttps://www.baidu.com是,协议不同(http/https)
子域名不同http://www.baidu.comhttp://map.baidu.com是,子域名不同(www/map)
主域名不同http://www.baidu.comhttp://www.jd.com是,主域名不同(baidu/jd)
端口号不同http://www.baidu.com:8080/http://www.baidu.com:7070是,端口号不同(8080/7070)
ip地址和网址不同http://12.123.12.99:8080/http://www.baidu.com是,主域名不同

首先狭义的同源就是指,域名、协议、端口均为相同。

三、常见的跨域的解决方案有哪些?

  • 通过jsonp跨域
  • document.domain + iframe跨域
  • location.hash + iframe
  • window.name + iframe跨域
  • postMessage跨域
  • 跨域资源共享(CORS)
  • nginx代理跨域(笔者推荐)
  • nodejs中间件代理跨域
  • WebSocket协议跨域

四、代理有那些?

聊到这里,一定要知道代理是啥?

正向代理

我们常说的代理也就是只正向代理,正向代理的过程,它隐藏了真实的请求客户端,服务端不知道真实的客户端是谁,客户端请求的服务都被代理服务器代替来请求,某些科学上网工具扮演的就是典型的正向代理角色。用浏览器访问http://www.google.com时,被残忍的block,于是你可以在国外搭建一台代理服务器,让代理帮我去请求google.com,代理把请求返回的相应结构再返回给我。

正向代理

反向代理

反向代理隐藏了真实的服务端,当我们请求 www.baidu.com 的时候,就像拨打10086一样,背后可能有成千上万台服务器为我们服务,但具体是哪一台,你不知道,也不需要知道,你只需要知道反向代理服务器是谁就好了,www.baidu.com 就是我们的反向代理服务器,反向代理服务器会帮我们把请求转发到真实的服务器那里去。Nginx就是性能非常好的反向代理服务器,用来做负载均衡。

反向代理

简而言之:正向代理隐藏真实客户端,反向代理隐藏真实服务端,一下就懂了!

五、如何解决跨域?

为了解决跨域问题,自己造一个浏览器,屏蔽同源策略,那也是可行的,但那是愚蠢的行为!

笔者这里推荐使用 跨域资源共享(CORS)nginx代理跨域(笔者强烈推荐)

nginx代理解决跨域

1、跨域原理

同源策略是浏览器的安全策略,不是HTTP协议的一部分。服务器端调用HTTP接口只是使用HTTP协议,不会执行JS脚本,不需要同源策略,也就不存在跨越问题。

2、实现思路

通过nginx配置一个代理服务器(域名与domain1相同,端口不同)做跳板机,反向代理访问domain2接口,并且可以顺便修改cookie中domain信息,方便当前域cookie写入,实现跨域操作。

3、宝塔面板中,如何启动反向代理

关于宝塔的优劣我不做过多说明,安装的说明,请看点我跳转

安装宝塔环境好以后,部署自己的后端项目文件到网站版块下,并设置后端接口环境为,Php->7.2的版本环境,见下图:

设置后端接口环境

设置后端接口的局域网络端口地址,见下图:

注册局域网地址

上图中设置局域网端口地址:http://127.0.0.1:6123

设置局域网端口地址,优势在于,不用走外网请求!

接下来,部署自己的前端项目文件到网站版块下,并设置前端站点环境为,纯静态版本环境,见下图:

设置前端站点的环境

设置前端站点的反向代理,见下图:

设置前端站点的反向代理

通过上面轻松的设置,我们现在从外网访问前端站点:https://m.trademark.lilogs.com/,相关的后端接口访问则是如下效果:

请求接口说明

前端站点,加入jump反向代理区域入口,经过nginx服务反向代理解析,访问真实的业务接口地址则是:http://127.0.0.1:6123

总结,反向代理技术思路,见下图:

反向代理思路图

文中部分思路来之网络。本文技术攻略若是对你有帮助,各位老板们,动动你们的手指安排 “ 打赏+分享 ” 把~

转载请标明原处,谢谢。

反向代理宝塔解决跨域跨域
暂无评论

发送评论 编辑评论


				
上一篇
下一篇