基于nodejs中实现跨域的方法
一般情况下跨域是通过ajax的方式请求数据，通过js在不同的域之间进行数据传输或者通信；
只有通过ajax方式获取请求的时候才会有跨域问题需要解决；
例如在本地模拟两个服务端。 一个服务端去通过ajax去请求另外一个服务端的数据的时候就会产生这个问题；
const express = require('express');
const path = require('path');
const app = express();
//托管静态资源
app.use(express.static(path.join(__dirname,'public')));
//处理请求
app.get('/',(req,res)=>{
res.sendFile(path.join(__dirname,'./跨域ajax.html'));
});
//处理ajax获取数据的路由
app.get('/blog',(req,res)=>{
let blogs = require('./blog.json');
res.json(blogs);
});
app.listen(3000,()=>{
console.log('3000 is on');
})URL的详细格式是
1.协议 http https ftp 还有mongodb 等
2.身份验证 ftp协议中有，http和HTTPS是没有的
3.主机名 包括域名和ip两种形式；
4.端口
5.路径
6.查询字符串
7.哈希值
在jquery的ajax方法的请求url中，如果协议，主机名，端口号有任何一个不同，name就属于跨域；域名和ip也是不等的，例如127.0.0.1和localhost是不等的；
在web开发中，有一个著名安全 策略叫同源策略
使用ajax请求数据的时候，值允许同域的请求，非同域的请求一概拒绝
实现跨域请求一般三种方法。 通过cors jsonp 代理
第一种方式比较局限，需要服务端的代码在我的控制方为之内，
后台提供的api我有权限去操作，只需要在服务端编写代码；浏览器端不需要编写任何代码；
第二张方式是使用jsonp json with packing 将json数据包裹起来，json 作为参数，进行函数调用并且返回；需要有权限编写服务端的代码。如果请求另外一个非自己网站，就不行了；一个提供数据服务来提供api接口。一个提供http服务来显示页面。jsonp的原理就是自己创建一个script标签，由于script标签可以请求别的地址不收到限制； 所以可以自己写函数来创建script标签，src属性则是需要跨域请求的地址；
function addScript(url){
var script = document.createElement('script');
script.src = url;
document.body.appendChild(script);
}第三种方式采用代理的方式， 可以获取其他接口的数据
代用代理的服务端代码如下
const express = require('express');
const path = require('path');
const http = require('http');
const app = express();
app.use(express.static(path.join(__dirname, 'public')));
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, './ajax获取电影数据.html'));
});
app.get('/proxy', (req, res) => {
//获取目标的url
let url = req.query.url;
//需要向目标url发送请求；
//将数据请求回来
http.get(url, (response) => {
let str = '';
//以流的方式接受数据
response.on('data', (chunk) => {
str += chunk;
});
response.on('end', () => {
//接受所有数据之后，返回str
res.json(str);
});
});
});
app.listen(3000, function() {
console.log('App listening on port 3000!');
});客户端代码如下
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-1.11.3.js"></script>
</head>
<body>
<h2>get movie</h2>
<button type="button" >get movie</button>
<script>
$('#btn').on('click', function() {
$.ajax({
url: '/proxy',
type: 'get',
data: {
url: 'http://m.maizuo.com/v4/api/billboard/home?__t=1489757848973'
},
dataType: 'json',
success: function(res) {
console.log(JSON.parse(res));
}
})
})
</script>
</body>
</html>
- 上一篇 »Java 中实现多态的机制是什么?？
- 下一篇 »PHP中实现异步调用多线程程序代码