js实现跨域的方法总结
jsonp
实现原理:script标签可以实现跨域的特性
//注意事项:
//1.客户服务端和客户端需要同时启动
//2.自己设置端口不一致产生跨域
//3.服务端依赖如下:
//4.下载方式npm install express
const express = require('express');
const app = express();
app.get('/test', (req, res) => {
res.send('fn(1234)')
})
app.listen(9001, () => {
console.log('http://192.168.82.82:9001');
});
客户端代码如下:
---------------
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
<input type="button" id="btn" value="提交">
<script>
function fn(data) {
console.log(data);
}
</script>
<script>
//点击时候发送jsonp请求
var btn = document.getElementById('btn')
btn.onclick = function() {
//创建script标签
var script = document.createElement('script');
//提交src属性
script.src = 'http://localhost:9001/test';
//标签添加到body体重
document.body.appendChild(script);
//当标签加载完后删除掉,避免多次点击产生多个script标签
script.onload = function() {
document.body.removeChild(script)
}
};
</script>
</body>
</html>
//已经省略客户端创建过程和服务端创建一样端口改下就可以产生跨域
---------------
Ajax请求 cors模块实现
通过模块实现
//服务端代码
//自己下载express和cors模块
const express = require('express');
const app = express();
const cors = require('cors')
//中间件
app.use(cors());
app.get('/get', (req, res) => {
res.send('okk')
});
app.listen(9001, () => {
console.log('http://localhost:9001');
});
//客户端代码
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
<script>
var xhr = new XMLHttpRequest;
xhr.open('get', 'http://localhost:9001/get', true);
xhr.send();
xhr.onload = function() {
console.log(xhr.responseText);
}
</script>
</body>
</html>
Ajax请求设置res.header
//改下服务端就好了客户端内容不变
//原理:设置res.header
//代码都一样包都不用下载引用贼方便了
//把cros方法里面的中间件
app.use(cors());
//改成,其他的代码就不用改了
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', 'http://localhost:9000');
res.header('Access-Control-Allow-Methods', 'GET, POST');
next();
});
server访问
原理:利用服务端访问服务端没有没有跨域的这种特性来解决跨越问题
//server A(本地)
//要下载request模块
const express = require('express');
const app = express();
const request = require('request');
app.get('/server', (req, res) => {
request('http://localhost:9001/corss', (err, response, body) => {
//将从B服务器获取的内容响应给客户端A
res.send(body)
})
})
//client A(本地)
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
<script>
var xhr = new XMLHttpRequest;
xhr.open('get', 'http://localhost:9001/get', true);
xhr.send();
xhr.onload = function() {
console.log(xhr.responseText);
}
</script>
</body>
</html>
//server B
const express = require('express');
const app = express();
app.get('/corss', (req, res) => {
res.send('okk')
});
app.listen(9001, () => {
console.log('http://localhost:9001');
});
总结
直接Ajax实现跨域的方式
1.设置res.header
2.下载第三方包cros实现跨域
3.jsonp或者Ajax请求本地服务器,本地服务器再访问需要请求的服务器实现跨域 (服务端和服务端无跨域)
4.jsonp利用script跨域特性实现跨域(script访问无跨域)
还有其他很多方法