在微信公众号前端大全上看到一篇文章 - 前端跨域请求原理及实践，跟着里面的方法进行了一些操作，在这里进行总结并加入一些其他内容。
跨域是什么？
大家都知道，只要请求的URL的域名、端口、协议中有一个不一样，就是不同的域。所以跨域就是去请求和你不同的域的资源。简单来说，就像是，你平时用自己家的网线上网，但是最近网速不好，想试试邻居家的100M光纤。但毕竟是邻居家的嘛，你也不是想用就能用的。这种就像是跨域，你去拿不属于你家的资源。虽然是邻居的网，却也不是没方法用。比如你可以和邻居商量，能不能用一根网线，接入他们的网线接口，又比如，你们挨得近，刚好邻居家的路由器又非常强大，可以搜索到他们的信号，那也可以去问问wifi密码，倘若刚好邻居又不愿意借网给你，你也可以去试试破解一下路由器什么的（当然，不推荐哈哈）
允许通信
- （同一域名）
http://www.a.com/a.js
http://www.a.com/b.js - （同一域名不同文件夹）
http://www.a.com/css/a.js
http://www.a.com/js/b.js
不允许通信
- （不同端口）
http://www.a.com:8888.js
http://www.a.com:8889.js - （不同协议）
http://www.a.com.js
https://www.a.com.js - （禁止使用域名对应IP）
http://www.a.com.js
http://88.88.88.172.js - （不同子域 - cookie这种情况下也不允许访问）
http://www.a.com.js
http://js.a.com.js 或者 http://a.com.js - （不同域名）
http://www.b.com.js
http://www.a.com.js
跨域也有很多解决方法
先使用node+express搭建两个node服务器进行测试
node安装地址
安装完毕命令行输入 node -v 能显示版本号即可
express安装教程
npm install express
安装完毕就可以写代码了，监听两个端口，port:3000和port:3001
1、JSONP ( json padding )
AJAX无法跨域请求资源，但是后来人们发现，这个限制对能用src导入的标签并不管用，像<img>、<script>、<iframe>。后来人们通过类似调用脚本的方法，去访问外部资源，外部资源返回一个json的数据包装（例如下文的jsonpCallback('{"name":3000}')），然后通过一个回调函数来接收数据。
JQuery集成的 $.ajax 实现 JSONP 跨域
【Port：3000】
let express = require('express');
let app = express();
app.get('/',(req,res,next)=>{`
res.sendFile(__dirname + '/cross-domain.html')
})
app.get('/data',(req,res,next)=>{
res.json({'name': 3000})
})
app.listen(3000, () => {
console.log('success')
})
【Port：3001】
let express = require('express');
let app = express();
app.get('/',(req,res,next)=>{
res.send('welcome')
})
app.get('/data',(req,res)=>{
var cb = req.query.callback;
// 此处需要进行字符串拼接，否则会出现编译错误。
// parsererror Error: jsonpCallback was not called
var data = cb +'('+ "{'name': 3001}"+')'
console.log(data)
res.send(data)
res.end()
})
app.listen(3001, () => {
console.log('success')
})
【HTML】
<script>
function jsonpCallback(data){
console.log(data.name)
}
$('#btn1').click(function(){
$.ajax({
url: 'http://localhost:3001/data',
type: 'GET',
dataType: 'jsonp',
// jsonp 字段含义为服务器通过什么字段获取回调函数的名称
jsonp: 'callback',
// 声明本地回调函数的名称，jquery 默认随机生成一个函数名称
jsonpCallback: 'jsonpCallback',
success(data){
console.log(data)
}
})
})
</script>
相当于使用url传递了一个参数?callback=jsonpCallback，让node3001服务器接收并返回'jsonpCallback'+'('+'{"name":3000}'+')'去调用jsonpCallback函数。
原生js实现 JSONP 跨域
【Port：3000】
与上文一致
【Port：3001】
与上文一致
【HTML】
<script>
function jsonpCallback(data){
console.log(data.name)
}
</script>
<script src='http://localhost:3001/data?callback=jsonpCallback'></script>
虽然jquery方式看上去式ajax请求，但是实际上只是将原生js的方法进行了封装。jq的method方法也可以更换成'POST'，但是最后在请求时还是使用GET的方式进行请求，系统会进行转换。
JSONP的请求方法就是在script标签中进行，所以只能够使用GET方式请求。如果需要看例子，可以看开头提及的文章，内有POST请求范例。
2、Vue开发过程中遇到的跨域问题
在vue-cli中有个config>index.js文件，dev下设置了proxyTable，给开发者需要跨域时使用。
直接上代码
【Vue - port：8080】
created () {
let xhr = new XMLHttpRequest();
xhr.open('get', 'http://localhost:3001/data');
xhr.send();
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
console.log(xhr.responseText)
}
};
}
【Port：3001】
与上文一致
若此时进行查看，控制台会出现
cross-domain.jpg
打开文件
config>index.js，在proxyTable中加入
proxyTable: {
'/crossdomain': {
target: 'http://localhost:3001/',
changeOrigin: true,
pathRewrite: {
'^/crossdomain': '/'
}
}
}
并修改Vue中代码
xhr.open('get', 'crossdomain/data');
当你将changeOrigin的值设置为true，系统会虚拟一个服务器接收请求，所以需要将请求中的url改为/crossdomain。
3、CORS（corss-origin resource sharing 跨域资源共享）
CORS支持浏览器向跨域服务器发送XMLHttpRequest请求，JSONP只支持GET方法，但是CORS支持POST方式。一旦浏览器发现Ajax的跨域请求，会为其加上请求头。CORS时服务器端操作，前端请求方式不变。
【Port：3000】
与上文一致
【Port：3001】
let express = require('express');
let app = express();
app.get('/',(req,res,next)=>{
res.send('welcome')
})
app.get('/data',(req,res)=>{
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By", ' 3.2.1')
res.header("Content-Type", "application/json;charset=utf-8");
var data = {'name': 3001}
res.json(data)
})
app.listen(3001, () => {
console.log('success')
})
【HTML】
<script>
$('#btn1').click(function(){
$.ajax({
url: 'http://localhost:3001/data',
type: 'GET',
success(data){
console.log(data)
}
})
})
</script>
4、Window.name
5、Window.postMessage
这两个方法可以推荐看这个博客
网友评论