AJAX_违反了同源策略_就是"跨域"——jsonp 和 cors
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>
