使用ajax的过程中,经常会碰见跨域。什么是跨域呢?就是在协议、域名、端口号不相同的情况下进行数据交互,这就是交互。这是违背了浏览器的自律行为。那么要怎么解决这个问题呢?
1、jsonp方法
有些标签是自带跨域属性的,比如script标签,使用这些标签的特性来实现跨域。
话不多说,我们来看看是怎么实现的。首先我们要在8000端口起一个服务,用于接收请求,利用node.js在终端将服务启动。
// 引入express模块
const express = require('express');
const app = express();
// 接收get请求
app.get('/jsonp-server', (request, response) => {
// 定于一个传输数据
const data = {
name: '张三',
age: 20,
address: '江西省南昌市'
}
// 将数据转换成json格式传输
response.send(`func(${JSON.stringify(data)})`);
})
// 监听
app.listen('8000', () => {
console.log('8000端口已开启...');
})
然后写HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jsonp解决跨域问题</title>
<style>
.box {
width: 200px;
height: 150px;
border: 1px solid seagreen;
}
</style>
</head>
<body>
<button>点击发送请求</button>
<div class="box"></div>
</body>
<script type="text/javascript">
// 首先获取元素
const btn = document.querySelector('button');
const box = document.querySelector('.box');
// 绑定事件
btn.addEventListener('click', function() {
// 创建script节点
const script = document.createElement('script');
// 给script添加请求链接
script.src = "http://127.0.0.1:8000/jsonp-server";
// 将script添加到body下
document.body.appendChild(script);
})
function func(data) {
console.log(data);
box.innerHTML = `姓名:${data.name}年龄:${data.age}住址:${data.address}`;
}
</script>
</html>
我们来看看效果
这里我们是5500端口向8000端口发送请求,这就是一个跨域请求。
来讲一下实现原理,在HTML发送请求,服务端返回一个函数调用,并且携带数据,就实现了跨域请求。我们可以在控制台中来查看服务端给我们返回的是什么数据。下面我们讲讲cors是怎么实现跨域的。
2、cors方法
这个方法是官方推荐的跨域方法,我们来看看。首先,是在服务端写一个请求,同上。然后同样布局一个html.
// 引入express模块
const express = require('express');
const app = express();
// 接收get请求
app.get('/cors-server', (request, response) => {
// 定于一个传输数据
const data = {
name: '张三',
age: 20,
address: '江西省南昌市'
}
// 将数据转换成json格式传输
response.send(JSON.stringify(data));
})
// 监听
app.listen('8000', () => {
console.log('8000端口已开启...');
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>cors解决跨域问题</title>
<style>
.box {
width: 200px;
height: 150px;
border: 1px solid seagreen;
}
</style>
</head>
<body>
<button>点击发送请求</button>
<div class="box"></div>
</body>
<script type="text/javascript">
// 首先获取元素
const btn = document.querySelector('button');
const box = document.querySelector('.box');
// 绑定事件
btn.addEventListener('click', function() {
// 创建对象
const xhr = new XMLHttpRequest();
// 初始化
xhr.open('GET','http://127.0.0.1:8000/cors-server');
// 发送
xhr.send();
// 返回的数据是json类型,则转换
xhr.responseType = 'json';
// 绑定事件
xhr.onreadystatechange = function() {
// 判断请求是否发送成功
if(xhr.readyState === 4) {
if(xhr.status >= 200 && xhr.status < 300) {
// 成功返回数据
console.log(xhr.response);
box.innerHTML = `姓名:${xhr.response.name}年龄:${xhr.response.age}住址:${xhr.response.address}`;
}
}
}
})
</script>
</html>
这样发送请求会提示我们,意思是:访问位于“”的XMLHttpRequesthttp://127.0.0.1:8000/cors-服务器“来自源”http://127.0.0.1:5500'已被CORS策略阻止:请求的资源上不存在'Access Control Allow Origin'标头。
那么我们只需要在服务端的请求体内加入,即可实现cors跨域
response.setHeader('Access-Control-Allow-Origin', '*');