https 协议 默认端口号 443
http 协议 默认端口号 80
同源策略
由网景公司提出的——浏览器 的
为了浏览器安全而生
同源策略： 协议、域名、端口号 必须完全一致
违背同源策略，就是跨域
跨域问题只存在于 AJAX 中____浏览器的 AJAX 引擎检测出来的问题____绕开这个引擎
由于跨域，直接导致无法获取响应数据
1. jsonp 的跨域请求解决方案
由于 普通标签 没有跨域问题，所以利用 <script > 标签 来发送 跨域请求
利用 <script> 标签 能够跨域，且请求到资源后直接执行
优势：
只能发 get 请求
兼容性很好
1. 创建 script 标签
let script = document.createELement("script");
2. 设置响应成功的 全局回调函数
window.getData = function(server_info){
console.log(server_info); // 直接打印 接收到的 响应数据
};
3. 设置 script 的 src 属性
script.src = 'http://localhost:3000/jsonp?callback=getData';
4. 将 script 添加到页面中生效
document.body.appendChild(script);
5. 服务器端 ajax.js
app.get('', ()=>{
const data = {name: 'postResponse', age: 18}; // 要响应给浏览器的数据
response.send(`${callback}(${JSON.stringify(data)})`);
// getData(name: 'postResponse', age: 18) // 被 浏览器 请求过去，然后执行了。简介获取了响应数据
// 必须要 将 对象转化为 JSON 数据，然后被浏览器 解析成 字符串。否则报错
});
实例源代码
- node 服务器 index.js
const express = require('express'); const app = express(); app.use(express.static('public'));
app.use(express.urlencoded({extended: true})); // 原生 ajax 的 get 路由
app.get("/jsonp", (request, response)=>{
//获取请求参数
const {callback} = request.query; const data = {name: 'postResponse', age: 18}; // 要响应给浏览器的数据 response.send(`${callback}(${JSON.stringify(data)})`);
// getData(name: 'postResponse', age: 18)
// 被 浏览器 请求过去，然后执行了。间接获取了响应数据
// 必须要 将 对象转化为 JSON 字符串数据，然后被浏览器 解析成 JSON 对象。否则报错
}); /**************** 端口号 3000, 启动服务器 ***************/
app.listen(3000, err=>console.log(err?err:'\n\n服务器已启动: http://localhost:3000/jsonp.html\n\t\tHunting Happy!'));- 浏览器前端
public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btn">点击发送jsonp的跨域请求</button>
<script type="text/javascript">
document.getElementById('btn').onclick = function () {
/*
jsonp：
工作原理:
利用script标签能够跨域的特性解决跨域的
特点：
1. 只能发送get请求
2. 兼容性好
*/
// 1. 创建script标签
let script = document.createElement('script'); // 2. 设置响应成功的全局回调函数
window.getData = function (data) {
console.log(data);
}; // 3. 设置script的src属性
script.src = 'http://localhost:3000/jsonp?callback=getData'; // 4. 将script添加到页面中生效
document.body.appendChild(script);
}
</script>
</body>
</html>
2. cors 官方解决方案
官方提供的跨域问题解决方案
前端不必做任何事，在服务器端设置一个响应头即可
注意：
支持所有请求方式
兼容性差，
access-control-allow-origin
app.get('/cors', (request, response)=>{
response.set('access-control-allow-origin', '*'); // 允许所有请求地址跨域
response.send({"name":'corsResponse', age: 22});
});
- 实例源代码
- node 服务器 index.js
const express = require('express'); const app = express(); app.use(express.static('public'));
app.use(express.urlencoded({extended: true})); // 原生 ajax 的 get 路由
app.get('/cors', (req, res) => {
/*
cors 是官方提供的解决跨域问题的一种方案
特点：
1. 所有请求方式都支持
2. 兼容性较差
使用：
设置一个响应头 access-control-allow-origin
*/
// res.set('access-control-allow-origin', '*'); //允许所有请求地址跨域
res.set('access-control-allow-origin', 'http://localhost:3000/cors'); //允许当前请求地址跨域 res.send({name: 'jack', age: 18});
})； /**************** 端口号 3000, 启动服务器 ***************/
app.listen(3000, err=>console.log(err?err:'\n\n服务器已启动: http://localhost:3000/cors.html\n\t\tHunting Happy!'));- 浏览器 前端代码 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>官方 cors 解决跨域问题</title>
</head>
<body>
<button id="btn">点击按钮发送ajax请求</button>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$('#btn').click(function () {
$.get('http://localhost:3000/cors', function(server_info){//成功的回调函数
console.log(server_info);
})
})
</script>
</body>
</html>