浏览器跨域请求的若干处理

[TOC]

这里麦客作者我整理时也是带着问题来做的,根据各同行小伙伴的验证下面几种方法应该是大家常用的场景,就问题的二八原则讲,一个问题只要抓住了20%的关键基本就解决了80%.所以这里以重点以20%处作为处理问题的方向,如果想看各配置的细节,麦客作者我认为稍稍查阅下资(bai)料(du)基本就能解决.然后切入正题:

##### 类script跨域处理
这类处理不管是直接原生模拟还是封装好的方法,原理上大部分是模拟script标签的跨域特性,实际操作中以下几种方法:
######直接模拟script请求
```javascript
<script>
	var sc = document.createElement('script');
	sc.src = "http://www.test.com?some_id=111"; //利用src的跨域特性请求数据
	document.body.appendChild(script);
</script>
```
千万不要觉得上面简单就没人用,比较典型的是麦客我居然在百度统计里发现他们就是用的上面这种方法.另外当年我做广告系统时依稀记得追踪广告信标方法也是用这种方式插入的.这也坚定了作者我认为上面这种方法是很实用的想法,所以我认为用这种方法的其中一个重要的使用场景是在你没办法接触到别人后端的情况下才用此种方式.

另外可能有小伙伴要问了,为什么script能做跨域请求呢,这里以麦客作者我当时与某伙伴交流时的内容做参`没有为什么因为<script>就是可以`.某达的小伙伴告诉我说因为`src`可以.

道理我都懂还有什么`iframe`,`img`都可以.可是麦客作为一个喜欢刨根问底的人显然不能这么满足'为什么src可以跨域呢':tw-1f60f:,苦(bai)思(du)冥(yi)想(fan)后麦客作者我得到了这么几个回答:
路人甲:`这是浏览器的规范啊`
路人乙:`理论上说，src表达的是该元素的内容将被整体替换....至于说为什么当初就决定外部样式表用link href来链接，而不是用style src来载入，可能是因为先贤们认为样式表更符合外部链接资源的特征，它更接近附属的资源，而不是内嵌的内容。....当初某个浏览器开发者的一个偶然决定导致...`.

这里要敲黑板:tw-1f64b:`先贤们` `浏览器的规范`各位小伙伴听明白了吧,这两个底层级的单词都搬过来了估计意思是说没人能再往深层解释了,那么又回到我当时的回答上了`因为它就是可以呀!!!`.

回来,那有没有封装好的方法呢:

######JQuery中几种类似的方法
`$.getScript` :
```javascript
$.getScript('http://www.test.com?some_id=111',function(){alert(' 加载成功 ');});
```

`$.getJSON` :

```javascript
$.getJSON('http://www.test.com?some_id=111', function(data){
//处理data数据
});
```
`$.ajax`:
```javascript
var qsData = {'id1':'aaa','id2':'bbb'};
$.ajax({
	async:false,
	url: "https://www.test.com",
	type: "GET",
	dataType: 'jsonp',
	data: qsData,
	timeout: 5000,
	beforeSend: function(){
		console.log('aaa')
	},
	success: function (json) {
		console.log(json);
	},
	complete: function(XMLHttpRequest, textStatus){
	},
	error: function(xhr){
	}
});
```
$.ajax方法是上面两种方法的集大成者,麦客我也在jQuery中也最喜欢,为什么?各位有看过天龙八部,有发现萧峰降龙十八掌里最令人佩服的一点是什么吧,就是不论对手使用什么招式这位萧先生总能一招'降龙十八掌'化险为夷,如果不能就是两招.这里也一样ajax方法能模拟所有jQuery中的异步请求,所以能理解了ajax方法的配置其他里面的知识点都能理解.

#####后台配合
上面虽然简单,但仍然有限制就是只能使用get方式来获取,如果使用POST请求就做不到.浏览器受同源策略限制,所以要做更复杂的请求你需要在后端开发的小伙伴来配合:

以PHP为例:
```php
// 例如: http://www.test.com:8080 是你的源
header('Access-Control-Allow-Origin: http://www.test.com:8080');
```
详细配置可参考:

<a href="https://fetch.spec.whatwg.org/#http-responses" title="http-responses" target="_blank">http-responses</a>

######代理 http-proxy-middleware
这里代表性的如webpack的`proxy`, vue-cli的`proxyTable`配置都用的这个方法(vue-cli也是使用的webpack配置)

在vue-cli的config/index.js中:
```javascript
module.exports = {
	dev: {
		// ....
		proxyTable: {
			'/api': {
				target: 'http://www.test.com/',//设置要代理的源,开发环境指定(协议://ip:端口)
				changeOrigin: true,
				pathRewrite: {
					'^/api': '/'
//这里理解成用'/api'代替target里面的地址，后面组件中我们掉接口时直接用api代替 例如:要访问'http://www.test.com/list/info?id1=aaa&id2=bbb,在请求中写成/api/list/info?id1=aaa&id2=bbb即可
				}
			}
		}
		// ...
	}
}
```
```javascript
axios.get('/api/list/info?id1=aaa&id2=bbb').then(res => {
	console.log(res.data)
})
```
关于<a href="https://github.com/chimurai/http-proxy-middleware#options" target='_blank'>http-proxy-middleware</a>详细配置移步这里.

`注:`这种方法仍然是针对node开发环境是下的配置,如果真服环境使用的是其他容器如Apache,Nginx,IIS那么麦客我建议诸位小伙伴还是老实的和后端小伙伴沟通,移步第二种方法做好 Origin 授权或服务器器代理
######后台配合-代理
这里以 nginx 为例:
`http代理`
```python
server {
    ...
    location /api {
        proxy_pass http://backend;
		# ...
    }
}
```
`socket代理`
```python
http {
	# 默认和链接关闭处理
	map $http_upgrade $connection_upgrade {
		default upgrade;
		''      close;
	}

server {
		# ...
		# 请求以 ws://xxx/chat/yyy 开始 socket 后台接收为  http://backend/yyy
		location /chat/ {
			proxy_pass http://backend;
			proxy_http_version 1.1;
			proxy_set_header Upgrade $http_upgrade;
			proxy_set_header Connection $connection_upgrade;
		}
	}
```
注: nginx socket 代理自从 version 1.3.13,本身socket是不存在跨域的问题,这里记上是因为socket可以用到代理的情况,同时socket代理通常伴随着负载均衡 `upstream` 的设置.感兴趣的同学可自行了解
###END