科班出身不懂跨域，再次成功被前端鄙视！

针对跨域这个词，相信不少测试同学应该还是比较陌生，特别是非科班出家的测试从业者

笔者为何今天分享该知识点，是因为上周自己的团队内部就因为小程序分享页的功能涉及到跨域的问题导致请求直接404；并且该问题在测试环验证时未覆盖全面，造成了对线上用户的影响

造成事故的原因不单单是在验证前期，涉及到的端以及载体范围未验证到位，以及在提测阶段针对跨域这个事件做了一步域名迁移动作

测试同学对这个不是很了解。但是也没有进一步的与开发同学去确认相关影响面与测试重点。

开发对测试讲到跨域这个词，测试又是懵的一皮，成功又被鄙视了！

这里就针对跨域这个名词做一次小小的分享，本次分享的内容部分整理于网络，如有侵权请联系笔者删除。

熟悉了解可以读1-2节点，深入了解可读3-5章节

1.跨域是什么意思？

首先一个url是由：协议、域名、端口 三部分组成。（一般端口默认80）

如：https://blog.moonlet.cn:80

当一个请求url的协议、域名、端口三者之间的任意一个与当前页面url不同即为跨域

2.跨域产生原因？

出于浏览器的同源策略限制。

同源策略（Same Orgin Policy）是一种约定，它是浏览器核心也最基本的安全功能，它会阻止一个域的js脚本和另外一个域的内容进行交互，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击

所谓同源（即在同一个域）就是两个页面具有相同的协议（protocol）、主机（host）和端口号（port）

• 非同源会出现的限制
• 无法读取非同源网页的cookie、localstorage等
• 无法接触非同源网页的DOM和js对象
• 无法向非同源地址发送Ajax请求

3.nginx反向代理解决跨域（前端常用）

#正向代理：

a-->b访问不了，可以找个中间的服务器c, 先访问c再从c到b,类似曲线救国。

明确访问的目的地，但是用户不知道中间的代理服务器。（忽略中间服务器）

#反向代理：a--> c <--b

a明确访问c代理服务器，但是不知道c的内容从哪里来，c反向从别的地方拿来数据。(忽略的是目标地址)

浏览器可以访问a,而服务器之间不存在跨域问题，浏览器先访问a的服务器c，让c服务器作为代理去访问b服务器,拿到之后再返回数据给a。

例如：nginx是静态服务器，跨域请求放在api下面好管理http://www.baidu.com:80/api/user

可以在nginx下面的config下面的nginx.conf里面配置

从80端口进来的就拦截一下，代理到81端口

server{
location /api {
//拦截一下
proxy_pass  http://www.baidu.com:81;
}
}

4.添加响应头解决跨域

浏览器先询问b,b允许a访问

access-control-allow-origin

access-control-max-age

PHP端修改header：
header('Access-Control-Allow-Origin:*');//允许所有来源访问
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式

5.通过jsonp解决跨域（老方法）

实现原理：通常为了减轻web服务器的负载，我们把js、css、图片等静态资源分离到另一台独立域名的服务器上

在html页面中再通过相应的标签从不同域名下加载静态资源，而被浏览器允许。html中有的标签天然支持跨域，比如但是只支持get请求。

近期精彩好文传送门：从业2年,我被一个女前端鄙视了！ 软件测试 | 服务端接口测试新分享

后期都是针对测试岗位子在实际工作中碰到的问题，进行总结分享，请还未关注小编的同志，点击上方个人号名片，进行关注，谢谢大家的支持，点歌赞与在看，分享一波支持一下！