一般前后端分离的项目都会产生跨域的问题,那么跨域是什么呢?跨域就是协议,域名,端口号中有其中一项不一致就导致跨域。那么我们如何解决跨域问题呢?我这里给大家讲解一下解决跨域的其中一种方式,jsonp的方式。
这里我用到node.js创建的一个服务器 ,模拟后端传数据给前端,代码如下:
var http = require('http'); //发起服务
const url = require('url');
var querystring = require('querystring');
http
.createServer((req, res) => {
if (req.url == '/favicon.ico') {
return;
}
let queryObj = null;
if (req.url == '/index/?call=handleResponse') {
let urlObj = url.parse(req.url);
queryObj = querystring.parse(urlObj.query);
}
res.statusCode = 200;
let data = { id: '11111111111', data: [{ a: 1 }] };
res.end(queryObj.call + '(' + JSON.stringify(data) + ')'); //传递给前端数据
})
.listen(8080, '127.0.0.2', () => {
console.log('Successfully');
console.log('http://127.0.0.2:8080/');
});
代码中使用了
http
、url
和querystring
这几个Node.js内置模块。http
模块用于创建HTTP服务器,url
模块用于解析URL,querystring
模块用于解析查询字符串。然后通过http.createServer()创建HTTP服务器并监听请求
判断请求的URL是否为
/favicon.ico
,如果是则直接返回。然后判断请求的URL是否为/index/?call=handleResponse
,如果是则解析URL中的查询字符串,并将解析结果赋值给queryObj
。res.statusCode = 200;代码将响应的状态码设置为200,并将一个JSON对象转换为字符串后作为响应的内容返回给客户端。其中,
queryObj.call
是从查询字符串中解析出来的call
参数的值,用于构造一个JSONP的响应格式。
前端页面代码是这样写的:
<script>
function jsonp (fnName) {
let script = document.createElement("script")
script.src = "http://127.0.0.2:8080/index/?call=" + fnName;
document.body.insertBefore(script, document.body.firstChild)
}
function handleResponse (response) {
console.log('请求数据', response)
}
jsonp('handleResponse')
</script>
这里定义一个
jsonp
函数,用于发送JSONP请求:然后动态创建一个
<script>
标签,并将请求的URL设置为服务器地址加上call
参数的值。然后将该<script>
标签插入到页面的最前面,从而触发浏览器发送请求那么它是怎么样就获取到数据的呢,通过代码res.end(queryObj.call + '(' + JSON.stringify(data) + ')'); 这里通过node.js返回前端的是一个拼接的方法的调用,当它返回的时候,通过调用handleResponse这个方法接收到参数,从而拿到数据。
当然还有其他一些跨域的解决方案哦:
跨域资源共享(CORS)
nginx代理跨域
等等...........
欢迎一起讨论哦(●ˇ∀ˇ●) 嘿嘿