做前端的童鞋必然都会碰到这么一个问题，跨域。这对于不懂这个概念的开发者是个很痛苦的事情，因为你的控制台会报这么一个错误：
image.png
相信大家对于这个报错都不陌生的。那么问题来了，为什么会报这个错误呢？这就要涉及到同源策略了，具体什么是同源策略我不多做解释，自己上网查，这里不做赘述。
在这里我只做简单的概述，怎样才会造成跨域问题: 调用接口的时候，当你调用接口的 域名|协议|端口 和你浏览器的 域名|协议|端口 不一致时，就会造成跨域问题。简单来说，在你在调用接口或者请求资源的时候，同源策略就相当于法律，一旦触犯，就会有警察去制止你的行为。所以，简单来说，我们的目标就是把我们调用接口这件事变得合法。
这里我们先从JS的ajax实现开始阐述
<script type="text/javascript">
function loadXMLDoc() {
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
//readyState==4 表示 请求已完成，且响应已就绪 xmlhttp.status==200 表示服务器响应成功
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
// 返回的信息在 xmlhttp.responseText里面存着呢
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
// 用xmlhttp对象开启一个链接 true->异步 false->同步
xmlhttp.open("GET","接口地址",true);
// 发送请求
xmlhttp.send();
}
</script>
上面代码就用js简单的完成了一个ajax请求了。我们看到有个对象xmlhttp,它是由XMLHttpRequest这个构造函数创建的。我们的所有有关的ajax请求以及相应等信息都包含在这个对象之中。
在不触犯同源策略的情况下，这样做事没问题的。但是一旦触犯的话，又会像最上面的那张图一样。这里，我们的第一个目标，就是干掉这个错误！
方法一：
我们仔细看下这个错误：
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8020' is therefore not allowed access.
大概我们可以看到上面是这么一个意思：请求头中没有 'Access-Control-Allow-Origin'的信息，所以 源'http://127.0.0.1:8020'是不被允许的。啧啧啧，感谢控制台提示到这份上了，我想大家应该明白了，问题出在了哪里。在后台没有设置对应的 'Access-Control-Allow-Origin' 信息，所以请求不被允许。所以，这个时候需要你的后台产生对应的配置信息。请看下面：
Access-Control-Allow-Origin: 允许跨域的url(一般是你浏览器的域名，* 表示所有)
Access-Control-Allow-Credentials: true (是否允许携带cookie，ajax默认是不带cookie信息的，但可配置)
Content-Type: text/html; charset=utf-8 (相应内容数据类型以及编码类型)
OK，当你的后台配置了对应的信息头以后，你的跨域问题应该已经得到了解决。不过对于我们目前的开发节奏来说，大多数采用的是封装好的ajax库去帮助我们更快速的进行ajax请求，我们以jQuery的ajax为例
$.ajax({
// 请求方式 默认是get
type: 'post',
// 地址
url: 'url',
// 对于get请求，这个没必要去设置，因为最后都是queryString的形式进行发送
contentType: 'application/json', // 默认是 application/x-www-form-urlencoded
data: { id: '1' },
// 允许携带cookie信息-这个需要和后台协商，看是否需要 （可选）
// 注意： 服务器端 Access-Control-Allow-Credentials = true 时，参数Access-Control-Allow-Origin 的值不能为 '*' 。
xhrFields: {
withCredentials: true
},
// 假设是跨域请求
crossDomain: true,
dataType: 'json', //默认是json
success: function (res) {
// res返回的code不为 0 的 时候，说明你的请求有问题，这里和我们的主题没太大关系
if (res.code === 0) {
console.log(res)
} else {
console.log(res.message)
}
},
error: function (err) {
console.log('注册有误')
}
})
这里我们再讲下jQ的第二种避免跨域问题的方式-jsonp
$.ajax({
type:"get", //请求方式
async:true, //是否异步
url:"https://d.jd.com/lab/get",
dataType:"jsonp",
crossDomain:true,
success: function(res) {
console.log('success', res);
},
error: function(res) {
console.log('error', res);
}
});
这里我简单概述下啥事jsonp(摘抄子百度) : JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。
它其实是利用了<script>标签没有跨域限制的漏洞去达到请求资源的目的，当然这是要后台进行配合的。这里有一篇不错的文章可以进行参考 : https://www.cnblogs.com/chenweichu/articles/7492460.html
这里其实我们不妨借助工具去实现我们的跨域行为(nginx反向代理)去利用第三方工具帮助我们去发送请求，你可以理解这个第三方工具相当类似于一个后台服务应用，而后台服务之间接口的调用是不存在跨域问题的。
有过vue-cli项目开发经验的童鞋应该知道vue为我们提供了一个开发服务器，这个开发服务器就代理发送了我们的请求，因此避免了跨域的问题。
文章讲到这，希望对你有帮助，有错误的话请指正。
网友评论