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

一、什么是跨域？

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

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

跨域报错情况

非同源策略

Cookie、LocalStorage 和 IndexDB 无法读取

DOM 和 JS 对象无法获取

Ajax请求发送不出去。

二、跨域的场景介绍

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

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

• 通过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

总结，反向代理技术思路，见下图：