AJAX（三）跨域

一、同源策略

同源策略最早由Netscape公司提出，是浏览器的一种安全策略。

同源：协议、域名、端口号必须完全相同。（同一个来源）

违背同源策略就是跨域。

AJAX发送请求时是默认要遵循同源策略的，不是同源策略，没法直接发AJAX。

get.html:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>首页</title></head><body><h1>沃尔</h1><button>点击获取用户数据</button><script>const btn =document.querySelector('button');btn.onclick=function(){const x=new XMLHttpRequest();//这里因为是满足同源策略的，所以url可以简写x.open('GET','/data');//发送x.send();x.onreadystatechange=function(){if(x.readyState == 4){if(x.status>=200 && x.status<300){console.log(x.response);}}}}</script></body>
</html>

app.js: 

const express=require('express');const app=express();app.get('/home',(request,response)=>{//响应一个页面response.sendFile(__dirname+'/index.html');
});app.get('/data',(request,response)=>{response.send('用户数据');
});app.listen(9000,()=>{console.log("服务已经启动...");
});

我们在网站中输入：http://127.0.0.1:9000/home:

之后再点击点击获取用户数据的按钮：

 数据都是从9000端口来的，所以为同源。同源策略就是来源于同一个服务。

如果点击按钮之后，显示状态码为304，此时删除缓存，重新刷新即可。 

二、跨域的解决方案

1.jsonp的实现原理

（1）JSONP(JSON with Padding),是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发出来，只支持get请求。

（2）在网页上有一些标签天生具有跨域能力，比如：img link iframe script

         JSONP就是利用script标签的跨域能力来发送请求的。

get.html:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width"><title>axios 发送 AJAX请求</title><script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script></head><body><button>GET</button><button>POST</button><button>AJAX</button><script>const btns=document.querySelectorAll('button');//配置baseURLaxios.defaults.baseURL='http://127.0.0.1:8000';btns[0].onclick=function(){//GET请求axios.get('/axios-server',{//url参数params:{id:100,vip:7},//请求头信息headers:{name:'woer',age:33}}).then(value =>{console.log(value);})}btns[1].onclick=function(){//GET请求axios.post('/axios-server',{username:'admin',password:'admin'},{//urlparams:{id:200,vip:9},//请求头信息headers:{name:'yuehanwoer',age:30}});}btns[2].onclick=function(){axios({//请求方法method:'POST',//urlurl:'/axios-server',params:{vip:10,level:30},//头信息headers:{a:100,b:200},//请求体参数data:{username:'admin',password:'admin'}}).then(response=>{console.log(response);// //响应状态码// console.log(response.status);// //响应状态字符串// console.log(response.statusText);// //响应头信息// console.log(response.headers);// //响应体// console.log(response.data);})}    </script></body>
</html>

此界面在浏览器中打开我们发现如下所示：

此url为file协议的，而远端的axios.js的协议为https.域名和路径都不一样，但是仍然可以使用。

使用的正是script标签。 

演示如下：

get.html:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>原理演示</title></head><body><script src="app.js"></script></body>
</html>

app.js:

const data ={name:'woer'
};console.log(data);

我们进行访问： 

我们加入script标签如下所示：

原理演示.html: 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>原理演示</title></head><body><script src="http://127.0.0.1:5500/%E6%96%B0%E3%81%97%E3%81%84%E3%83%95%E3%82%A9%E3%83%AB%E3%83%80%E3%83%BC/JSONP/app.js"></script></body>
</html>

我们进行访问： 

此时仍然可以响应，说明是可以跨域的。 

此时我们修改如下：

原理演示.html:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>原理演示</title><style>#result{width: 300px;height:100px;border: solid 1px  #78a;}</style></head><body><div id="result"></div><script>//处理数据function handle(data){//获取result元素const result=document.getElementById('result');result.innerHTML=data.name;}</script><script src="http://127.0.0.1:5500/%E6%96%B0%E3%81%97%E3%81%84%E3%83%95%E3%82%A9%E3%83%AB%E3%83%80%E3%83%BC/JSONP/app.js"></script></body>
</html>

app.js: 

const data ={name:'yuehanwoer'
};
handle(data);

 查看响应信息：

 此时为app.js资源给返回的结果，对里面内容做一个解析和做一个处理。

app.js:

//1.引入express
const express=require('express');
//2.创建应用对象
const app=express();
//3.创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
app.get('/server',(request,response)=>{
//设置响应头,设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
//设置响应体
response.send('HELLO AJAX')
});
//延时响应
app.all('/delay',(request,response)=>{//设置响应头,设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');response.setHeader('Access-Control-Allow-Headers','*');setTimeout(()=>{//设置响应体response.send('延时响应');},3000)});
//jQuery 服务
app.all('/jQuery-server',(request,response)=>{//设置响应头,设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');response.setHeader('Access-Control-Allow-Headers','*');const data={name:'woer'} //设置响应体response.send(JSON.stringify(data));});
//axios 服务
app.all('/axios-server',(request,response)=>{//设置响应头,设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');response.setHeader('Access-Control-Allow-Headers','*');const data={name:'woer'} //设置响应体response.send(JSON.stringify(data));});//fetch 服务
app.all('/fetch-server',(request,response)=>{//设置响应头,设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');response.setHeader('Access-Control-Allow-Headers','*');const data={name:'woer'} //设置响应体response.send(JSON.stringify(data));});//jsonp服务
app.all('/jsonp-server',(request,response)=>{response.send('console.log("hello jsonp-server")');})//可以接收任意类型的请求
app.all('/server',(request,response)=>{//设置响应头,设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');//响应头response.setHeader('Access-Control-Allow-Headers','*');//设置响应体response.send('HELLO AJAX POST')});app.all('/json-server',(request,response)=>{//设置响应头,设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');//响应头response.setHeader('Access-Control-Allow-Headers','*');//响应一个数据//  const data={//   name:'woer'//  }//对对象进行字符串转换//  let str=JSON.stringify(data);//设置响应体,send方法里面只能接收字符串和Bufferresponse.send('HELLO AJAX POST')});
/*function chan(){return console.log("服务已经启动，8000端口监听中...");
}
可以用如下方法，也可以采用function定义的方法
*/
//4.监听端口启动服务
app.listen(8000,()=>{console.log("服务已经启动，8000端口监听中...");})/*其中
()=>{
console.log("服务已经启动，8000端口监听中...");
}
相当于：
function ajax()｛return console.log("服务已经启动，8000端口监听中...");
}
*/

原理演示.html: 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>原理演示</title><style>#result{width: 300px;height:100px;border: solid 1px  #78a;}</style></head><body><div id="result"></div><script>//处理数据function handle(data){//获取result元素const result=document.getElementById('result');result.innerHTML=data.name;}</script><!-- <script src="http://127.0.0.1:5500/%E6%96%B0%E3%81%97%E3%81%84%E3%83%95%E3%82%A9%E3%83%AB%E3%83%80%E3%83%BC/JSONP/app.js"></script> --><script src="http://127.0.0.1:8000/jsonp-server"></script></body>
</html>

 查看界面：

当前端向后台发送请求之后，调的是一个函数调用的内容作为结果返回。应该是一段js代码，这样子前端的引擎才能解析并执行里面的内容。

后台响应这个（直接返回一个字符串）是无法被解析的：

 response.send('hello jsonp-server');

可以解析的是如下代码：

response.send('console.log("hello jsonp-server")');

我们再进行查看如下所示：

原理.html:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>原理演示</title><style>#result{width: 300px;height:100px;border: solid 1px  #78a;}</style></head><body><div id="result"></div><script>//处理数据function handle(data){//获取result元素const result=document.getElementById('result');result.innerHTML=data.name;}</script><!-- <script src="http://127.0.0.1:5500/%E6%96%B0%E3%81%97%E3%81%84%E3%83%95%E3%82%A9%E3%83%AB%E3%83%80%E3%83%BC/JSONP/app.js"></script> --><script src="http://127.0.0.1:8000/jsonp-server"></script></body>
</html>

service.js：

//1.引入express
const express=require('express');
//2.创建应用对象
const app=express();
//3.创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
app.get('/server',(request,response)=>{
//设置响应头,设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
//设置响应体
response.send('HELLO AJAX')
});
//延时响应
app.all('/delay',(request,response)=>{//设置响应头,设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');response.setHeader('Access-Control-Allow-Headers','*');setTimeout(()=>{//设置响应体response.send('延时响应');},3000)});
//jQuery 服务
app.all('/jQuery-server',(request,response)=>{//设置响应头,设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');response.setHeader('Access-Control-Allow-Headers','*');const data={name:'woer'} //设置响应体response.send(JSON.stringify(data));});
//axios 服务
app.all('/axios-server',(request,response)=>{//设置响应头,设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');response.setHeader('Access-Control-Allow-Headers','*');const data={name:'woer'} //设置响应体response.send(JSON.stringify(data));});//fetch 服务
app.all('/fetch-server',(request,response)=>{//设置响应头,设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');response.setHeader('Access-Control-Allow-Headers','*');const data={name:'woer'} //设置响应体response.send(JSON.stringify(data));});//jsonp服务
app.all('/jsonp-server',(request,response)=>{const data={name:'woer'};//将数据转换为字符串let str= JSON.stringify(data);//返回结果，end不会加特殊响应头,其中的符号`为按英文键的~.response.end(`handle(${str})`);});//可以接收任意类型的请求
app.all('/server',(request,response)=>{//设置响应头,设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');//响应头response.setHeader('Access-Control-Allow-Headers','*');//设置响应体response.send('HELLO AJAX POST')});app.all('/json-server',(request,response)=>{//设置响应头,设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');//响应头response.setHeader('Access-Control-Allow-Headers','*');//响应一个数据//  const data={//   name:'woer'//  }//对对象进行字符串转换//  let str=JSON.stringify(data);//设置响应体,send方法里面只能接收字符串和Bufferresponse.send('HELLO AJAX POST')});
/*function chan(){return console.log("服务已经启动，8000端口监听中...");
}
可以用如下方法，也可以采用function定义的方法
*/
//4.监听端口启动服务
app.listen(8000,()=>{console.log("服务已经启动，8000端口监听中...");})/*其中
()=>{
console.log("服务已经启动，8000端口监听中...");
}
相当于：
function ajax()｛return console.log("服务已经启动，8000端口监听中...");
}
*/

此时响应之后如下所示： 

返回的结果的形式是一个函数调用，而这个函数的参数是我们想给客户端返回的结果数据，这个函数前端必须要提前声明，要不然的话回来之后没有这个函数就会报错。 

2.原生jsonp实践

案例.html:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>案例</title></head><body>用户名：<input type="text" id="username"><p></p><script>//获取input元素const input =document.querySelector('input');const p =document.querySelector('p');//声明 handle函数function handle(data){input.style.border="solid 1px #f00";//修改 p标签的提示文本p.innerHTML=data.msg;}//绑定事件,丧失焦点事件是onblurinput.onblur=function(){//获取用户的输入值let username= this.value;//向服务端发送请求 检测用户名是否存在//1.创建script标签const script=document.createElement('script');//2.设置标签的src属性script.src='http://127.0.0.1:8000/check-username';//3.将script插入到文档中,将script标签插入到body标签的最后document.body.appendChild(script);}</script></body>
</html>

 onblur:

 onblur 事件发生在对象失去焦点时。

onblur 事件 (w3school.com.cn)

appendChild():

appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。

HTML DOM appendChild() 方法 | 菜鸟教程 (runoob.com)

document.createElement:

在 HTML 文档中，Document.createElement() 方法用于创建一个由标签名称 tagName 指定的 HTML 元素。如果用户代理无法识别 tagName，则会生成一个未知 HTML 元素 HTMLUnknownElement。

语法：

var element = document.createElement(tagName[, options]);
//1.引入express
const express=require('express');
//2.创建应用对象
const app=express();
//3.创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
app.get('/server',(request,response)=>{
//设置响应头,设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
//设置响应体
response.send('HELLO AJAX')
});
//延时响应
app.all('/delay',(request,response)=>{//设置响应头,设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');response.setHeader('Access-Control-Allow-Headers','*');setTimeout(()=>{//设置响应体response.send('延时响应');},3000)});
//jQuery 服务
app.all('/jQuery-server',(request,response)=>{//设置响应头,设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');response.setHeader('Access-Control-Allow-Headers','*');const data={name:'woer'} //设置响应体response.send(JSON.stringify(data));});
//axios 服务
app.all('/axios-server',(request,response)=>{//设置响应头,设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');response.setHeader('Access-Control-Allow-Headers','*');const data={name:'woer'} //设置响应体response.send(JSON.stringify(data));});//fetch 服务
app.all('/fetch-server',(request,response)=>{//设置响应头,设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');response.setHeader('Access-Control-Allow-Headers','*');const data={name:'woer'} //设置响应体response.send(JSON.stringify(data));});//jsonp服务
app.all('/jsonp-server',(request,response)=>{const data={name:'woer'};//将数据转换为字符串let str= JSON.stringify(data);//返回结果，end不会加特殊响应头,其中的符号`为按英文键的~.response.end(`handle(${str})`);});//用户名检测是否存在app.all('/check-username',(request,response)=>{const data={exist:1,msg:'用户名已经存在'};//将数据转换为字符串let str= JSON.stringify(data);//返回结果，end不会加特殊响应头,其中的符号`为按英文键的~.response.end(`handle(${str})`);
});//可以接收任意类型的请求
app.all('/server',(request,response)=>{//设置响应头,设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');//响应头response.setHeader('Access-Control-Allow-Headers','*');//设置响应体response.send('HELLO AJAX POST')});app.all('/json-server',(request,response)=>{//设置响应头,设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');//响应头response.setHeader('Access-Control-Allow-Headers','*');//响应一个数据//  const data={//   name:'woer'//  }//对对象进行字符串转换//  let str=JSON.stringify(data);//设置响应体,send方法里面只能接收字符串和Bufferresponse.send('HELLO AJAX POST')});
/*function chan(){return console.log("服务已经启动，8000端口监听中...");
}
可以用如下方法，也可以采用function定义的方法
*/
//4.监听端口启动服务
app.listen(8000,()=>{console.log("服务已经启动，8000端口监听中...");})/*其中
()=>{
console.log("服务已经启动，8000端口监听中...");
}
相当于：
function ajax()｛return console.log("服务已经启动，8000端口监听中...");
}
*/

后台返回的数据： handle(｛exist:1, msg:'用户名已经存在'}），在前台的handle函数继续进行处理，然后在页面上体现出来。

​

3.jQuery发送JSONP请求

get.html:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>jQuery-jsonp</title><style>#result{width: 300px;height:100px;border: solid 1px  #089;}</style><script crossorigin="anonymous"src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script></head><body><button>点击发送 jsonp 请求</button><div id="result"></div><script>$('button').eq(0).click(function(){$.getJSON('http://127.0.0.1:8000/jQuery-jsonp-server?callback=?',function(data){$('#result').html(`名称:${data.name}<br>校区:${data.city}`)});})</script></body>
</html>

$.getJSON:

通过 HTTP GET 请求载入 JSON 数据。

在 jQuery 1.2 中，您可以通过使用 JSONP 形式的回调函数来加载其他网域的 JSON 数据，如 "myurl?callback=?"。jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。 注意：此行以后的代码将在这个回调函数执行前执行。

 jQuery ajax - getJSON() 方法 (w3school.com.cn)

 service.js：

//1.引入express
const express=require('express');
//2.创建应用对象
const app=express();
//3.创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
app.get('/server',(request,response)=>{
//设置响应头,设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
//设置响应体
response.send('HELLO AJAX')
});
//延时响应
app.all('/delay',(request,response)=>{//设置响应头,设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');response.setHeader('Access-Control-Allow-Headers','*');setTimeout(()=>{//设置响应体response.send('延时响应');},3000)});
//jQuery 服务
app.all('/jQuery-server',(request,response)=>{//设置响应头,设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');response.setHeader('Access-Control-Allow-Headers','*');const data={name:'woer'} //设置响应体response.send(JSON.stringify(data));});
//axios 服务
app.all('/axios-server',(request,response)=>{//设置响应头,设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');response.setHeader('Access-Control-Allow-Headers','*');const data={name:'woer'} //设置响应体response.send(JSON.stringify(data));});//fetch 服务
app.all('/fetch-server',(request,response)=>{//设置响应头,设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');response.setHeader('Access-Control-Allow-Headers','*');const data={name:'woer'} //设置响应体response.send(JSON.stringify(data));});//jsonp服务
app.all('/jsonp-server',(request,response)=>{const data={name:'woer'};//将数据转换为字符串let str= JSON.stringify(data);//返回结果，end不会加特殊响应头,其中的符号`为按英文键的~.response.end(`handle(${str})`);});//用户名检测是否存在app.all('/check-username',(request,response)=>{const data={exist:1,msg:'用户名已经存在'};//将数据转换为字符串let str= JSON.stringify(data);//返回结果，end不会加特殊响应头,其中的符号`为按英文键的~.response.end(`handle(${str})`);
});//
app.all('/jQuery-jsonp-server',(request,response)=>{const data={name:'woer',city:['北京','上海','深圳']};//将数据转换为字符串let str= JSON.stringify(data);//接收callback参数let cb=request.query.callback;//返回结果，end不会加特殊响应头,其中的符号`为按英文键的~.response.end(`${cb}(${str})`);
});//可以接收任意类型的请求
app.all('/server',(request,response)=>{//设置响应头,设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');//响应头response.setHeader('Access-Control-Allow-Headers','*');//设置响应体response.send('HELLO AJAX POST')});app.all('/json-server',(request,response)=>{//设置响应头,设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');//响应头response.setHeader('Access-Control-Allow-Headers','*');//响应一个数据//  const data={//   name:'woer'//  }//对对象进行字符串转换//  let str=JSON.stringify(data);//设置响应体,send方法里面只能接收字符串和Bufferresponse.send('HELLO AJAX POST')});
/*function chan(){return console.log("服务已经启动，8000端口监听中...");
}
可以用如下方法，也可以采用function定义的方法
*/
//4.监听端口启动服务
app.listen(8000,()=>{console.log("服务已经启动，8000端口监听中...");})/*其中
()=>{
console.log("服务已经启动，8000端口监听中...");
}
相当于：
function ajax()｛return console.log("服务已经启动，8000端口监听中...");
}
*/

callback: 

回调就是一个在另外一个函数执行完后要执行的函数

JavaScript基础——回调(callback)是什么?-CSDN博客

回调成功之后会在网址里面体现出来，同时数据体现出来： 

​

4. 设置CORS响应头实现跨域

CORS,跨域资源共享，CORS是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持get和post请求。跨域资源共享标准新增了一组HTTP首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。

CORS是通过设置一个响应头来告诉浏览器，该请求运行跨域，浏览器收到该响应以后就会对响应放行。

JavaScript基础——回调(callback)是什么?-CSDN博客

get.html: 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>CORS</title><style>#result{width: 300px;height:100px;border: solid 1px  #089;}</style><script crossorigin="anonymous"src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script></head><body><button>发送请求</button><div id="result"></div><script>const btn= document.querySelector('button');btn.onclick=function(){//1.创建对象const x=new XMLHttpRequest();//2.初始化设置x.open("GET","http://127.0.0.1:8000/cors-server");//3.发送x.send();//4.绑定事件，处理响应结果x.onreadystatechange=function(){if(x.readyState==4){if(x.status>=200 && x.status<300){//输出响应体console.log(x.response);}}}}</script></body>
</html>

service.js: 

//1.引入express
const express=require('express');
//2.创建应用对象
const app=express();
//3.创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
app.get('/server',(request,response)=>{
//设置响应头,设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
//设置响应体
response.send('HELLO AJAX')
});
//延时响应
app.all('/delay',(request,response)=>{//设置响应头,设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');response.setHeader('Access-Control-Allow-Headers','*');setTimeout(()=>{//设置响应体response.send('延时响应');},3000)});
//jQuery 服务
app.all('/jQuery-server',(request,response)=>{//设置响应头,设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');response.setHeader('Access-Control-Allow-Headers','*');const data={name:'woer'} //设置响应体response.send(JSON.stringify(data));});
//axios 服务
app.all('/axios-server',(request,response)=>{//设置响应头,设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');response.setHeader('Access-Control-Allow-Headers','*');const data={name:'woer'} //设置响应体response.send(JSON.stringify(data));});//fetch 服务
app.all('/fetch-server',(request,response)=>{//设置响应头,设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');response.setHeader('Access-Control-Allow-Headers','*');const data={name:'woer'} //设置响应体response.send(JSON.stringify(data));});//jsonp服务
app.all('/jsonp-server',(request,response)=>{const data={name:'woer'};//将数据转换为字符串let str= JSON.stringify(data);//返回结果，end不会加特殊响应头,其中的符号`为按英文键的~.response.end(`handle(${str})`);});//用户名检测是否存在app.all('/check-username',(request,response)=>{const data={exist:1,msg:'用户名已经存在'};//将数据转换为字符串let str= JSON.stringify(data);//返回结果，end不会加特殊响应头,其中的符号`为按英文键的~.response.end(`handle(${str})`);
});//
app.all('/jQuery-jsonp-server',(request,response)=>{const data={name:'woer',city:['北京','上海','深圳']};//将数据转换为字符串let str= JSON.stringify(data);//接收callback参数let cb=request.query.callback;//返回结果，end不会加特殊响应头,其中的符号`为按英文键的~.response.end(`${cb}(${str})`);
});//
app.all('/cors-server',(request,response)=>{//设置响应头response.setHeader('Access-Control-Allow-Origin','*');response.setHeader('Access-Control-Allow-Headers','*');response.setHeader('Access-Control-Allow-Method','*');response.send('Hello CORS');
});//可以接收任意类型的请求
app.all('/server',(request,response)=>{//设置响应头,设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');//响应头response.setHeader('Access-Control-Allow-Headers','*');//设置响应体response.send('HELLO AJAX POST')});app.all('/json-server',(request,response)=>{//设置响应头,设置允许跨域response.setHeader('Access-Control-Allow-Origin','*');//响应头response.setHeader('Access-Control-Allow-Headers','*');//响应一个数据//  const data={//   name:'woer'//  }//对对象进行字符串转换//  let str=JSON.stringify(data);//设置响应体,send方法里面只能接收字符串和Bufferresponse.send('HELLO AJAX POST')});
/*function chan(){return console.log("服务已经启动，8000端口监听中...");
}
可以用如下方法，也可以采用function定义的方法
*/
//4.监听端口启动服务
app.listen(8000,()=>{console.log("服务已经启动，8000端口监听中...");})/*其中
()=>{
console.log("服务已经启动，8000端口监听中...");
}
相当于：
function ajax()｛return console.log("服务已经启动，8000端口监听中...");
}
*/

此时成功响应出来： 

​

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/231619.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

C++——类型转换

C++——类型转换

在文章的开始&#xff0c;先祝大家牢大年快乐 C语言中的类型转换 在C语言中&#xff0c;如果赋值运算两边类型不同&#xff0c;则会发生类型转换。一般来说&#xff0c;C语言有两种形式的类型转换&#xff1a;隐式转换和显式转换。 隐式转换&#xff0c;就是编译器自动根据其…
阅读更多...
Mac Parallels19.1.0 Install CentOS7.9

Mac Parallels19.1.0 Install CentOS7.9

0、资源准备 # centos7.9镜像一份 链接: https://pan.baidu.com/s/1acIjUnsTGhk_2cYCZLSoGg?pwd6666 提取码: 6666 --来自百度网盘超级会员v7的分享1、打开PD 2、选择镜像进行安装 指定镜像名称 创建 进行密码设置 安装目的地点开后直接点击完成 网络和主机名称 开…
阅读更多...
学生数据可视化与分析工具 vue3+flask实现

学生数据可视化与分析工具 vue3+flask实现

目录 一、技术栈亮点 二、功能特点 三、应用场景 四、结语 学生数据可视化与分析工具介绍 在当今的教育领域&#xff0c;数据驱动的决策正变得越来越重要。为了满足学校、教师和学生对于数据深度洞察的需求&#xff0c;我们推出了一款基于Vue3和Flask编写的学生数据可视化…
阅读更多...
选择排序算法

选择排序算法

选择排序&#xff08;Selection Sort&#xff09;是一种简单直观的排序算法。它的工作原理是每一次从待排序的数据元素中选出最小&#xff08;或最大&#xff09;的一个元素&#xff0c;存放在序列的起始位置&#xff0c;直到全部待排序的数据元素排完。 选择排序的基本思想是&…
阅读更多...
PC+Wap仿土巴兔装修报价器源码 PHP源码

PC+Wap仿土巴兔装修报价器源码 PHP源码

核心功能&#xff1a; 业主自助预算计算&#xff1a;通过简洁的界面&#xff0c;业主可以输入装修需求&#xff0c;系统自动进行预算计算信息自动收集&#xff1a;系统自动收集业主的基本信息&#xff0c;如姓名、联系方式、房屋面积等一键发送报价&#xff1a;业主完成预算计…
阅读更多...
【mysql】报错1349 - View‘s SELECT contains a subquery in the FROM clause

【mysql】报错1349 - View‘s SELECT contains a subquery in the FROM clause

操作 创建视图的sql语句中有不支持子查询 mysql创建视图 select * from (select name,age from table_name where 11 and namea ) tb where 11 and type1问题 报错1349 - View’s SELECT contains a subquery in the FROM clause 原因 原因创建视图的sql语句中有不支持子查…
阅读更多...
WEB前端知识点整理（JQUERY+Bootstrap+ECharts）

WEB前端知识点整理（JQUERY+Bootstrap+ECharts）

1.JQUERY的概述&#xff1a; jQuery 是一个 JavaScript 库。jQuery 极大地简化了JavaScript 编程&#xff0c;它很容易学习。 jQuery库包含以下功能&#xff1a;HTML 元素选取&#xff1b;HTML 元素操作&#xff1b;CSS 操作&#xff1b;HTML 事件函数&#xff1b;JavaScript …
阅读更多...
Nginx - 使用error_page实现带有图片的自定义错误页面

Nginx - 使用error_page实现带有图片的自定义错误页面

文章目录 概述官网文档需求实现 概述 在Nginx中&#xff0c;您可以使用error_page指令来指定当请求遇到特定错误时应当显示的自定义错误页面。为了实现带有图片的自定义错误页面&#xff0c;可以按照以下步骤操作&#xff1a; 创建错误页面&#xff1a; 首先&#xff0c;需要…
阅读更多...
如何选择最适合的采购付款 (P2P) 解决方案？

如何选择最适合的采购付款 (P2P) 解决方案？

无论企业的业务流程执行得如何&#xff0c;流程中始终存在改进空间。更好的管理系统是获得更好结果的关键&#xff0c;尤其是当企业处于增长阶段时。强大的采购到付款&#xff08;P2P&#xff09;系统是加快采购流程&#xff0c;同时保持采购支出可见性的最有效方法之一。 什么…
阅读更多...
python实现给定两个列表，“求同存异”

python实现给定两个列表，“求同存异”

目录 问题描述&#xff1a; 代码实现&#xff1a; 问题描述&#xff1a; 给定两个列表&#xff0c;list1和list2。 python实现求list1和list中重复的元素&#xff0c;以及在list1中&#xff0c;不在list2的元素。 代码实现&#xff1a; def common_unique(pred_list, gold_l…
阅读更多...
【信息论与编码】习题-单选题

【信息论与编码】习题-单选题

目录 单选题1.下列说法正确的是&#xff08;B&#xff09;2.在信息论中&#xff0c;若用对数底2为&#xff0c;则信息量的单位为&#xff08;C&#xff09;3.率失真函数的下限为&#xff08;A&#xff09;4.给定xi条件下随机事件yj所包含的不确定度和条件自信息量p(yj /xi)。&a…
阅读更多...
启动 Mac 时显示闪烁的问号

启动 Mac 时显示闪烁的问号

启动 Mac 时显示闪烁的问号 如果启动时在 Mac 屏幕上看到闪烁的问号&#xff0c;这意味着你的 Mac 无法找到自身的系统软件。 如果 Mac 启动时出现闪烁的问号且无法继续启动&#xff0c;请尝试以下步骤。 1.通过按住其电源按钮几秒钟来关闭 Mac。 2.按一下电源按钮&#xf…
阅读更多...
爬虫与反爬-localStorage指纹（某易某盾滑块指纹检测）（Hook案例）

爬虫与反爬-localStorage指纹（某易某盾滑块指纹检测）（Hook案例）

概述&#xff1a;本文将用于了解爬虫中localStorage的检测原理以及讲述一个用于检测localStorage的反爬虫案例&#xff0c;最后对该参数进行Hook断点定位 目录&#xff1a; 一、LocalStorage 二、爬虫中localStorage的案例&#xff08;以某盾滑块为例&#xff09; 三、如何…
阅读更多...
Linux ssh 实现远程免密登录

Linux ssh 实现远程免密登录

一、背景 我搭建了一个 zookeeper 集群&#xff0c;写了一个 shell 脚本来控制集群的启动和关闭&#xff0c;但是我发现每次我执行 shell 脚本的时候&#xff0c;都需要我输入各个服务器的密码才可以运行&#xff0c;感觉很麻烦。shell 脚本里面连接其他服务器用的就是 ssh 的方…
阅读更多...
RocketMQ MQClientInstance、生产者实例启动源码分析

RocketMQ MQClientInstance、生产者实例启动源码分析

&#x1f52d; 嗨&#xff0c;您好 &#x1f44b; 我是 vnjohn&#xff0c;在互联网企业担任 Java 开发&#xff0c;CSDN 优质创作者 &#x1f4d6; 推荐专栏&#xff1a;Spring、MySQL、Nacos、Java&#xff0c;后续其他专栏会持续优化更新迭代 &#x1f332;文章所在专栏&…
阅读更多...
JVM篇：直接内存

JVM篇：直接内存

直接内存 直接内存并不是JVM的内存结构&#xff0c;直接内存是操作系统的内存&#xff0c;Java本身并不能对操作系统的内存进行操作&#xff0c;而是通过调用本地方法。直接内存常用于NIO作为缓冲区存在&#xff0c;分配成本较高但是读写性能好&#xff0c;并且不受JVM内存回收…
阅读更多...
有网友希望我推荐几个创建产品手册工具，这不就来了！

有网友希望我推荐几个创建产品手册工具，这不就来了！

上次我有说到&#xff0c;企业应该充分认识到产品手册的重要性&#xff0c;并采取有效的策略和措施来制作和传播高质量的产品手册&#xff0c;以提升品牌知名度和市场份额。后台有网友问我除了设计排版的那种产品手册工具&#xff0c;还有什么方式可以去做产品手册。今天就介绍…
阅读更多...
Verifiable Credentials可验证证书 2023 终极指南

Verifiable Credentials可验证证书 2023 终极指南

1. 引言 Dock公司为去中心化数字身份领域的先驱者&#xff0c;其自2017年以来&#xff0c;已知专注于构建前沿的可验证证书&#xff08;Verifiable Credentials&#xff09;技术。本文将阐述何为电子证书、电子证书工作原理、以及其对组合和个人的重要性。 伪造实物证书和数字…
阅读更多...
​结构体数组

​结构体数组

1. 结构体的声明 1.1 结构体的基础知识 结构是一些值的集合&#xff0c;这些值被称为成员变量。结构的每个成员可以是不同类型的变量。 1.2 结构的声明 struct tag {member - list; }variable-list; 例&#xff1a;描述一个人的信息&#xff1a;名字电话性别身高 //声明的…
阅读更多...
05、Kafka ------ CMAK 各个功能的作用解释（主题和分区 详解，用命令行和图形界面创建主题和查看主题）

05、Kafka ------ CMAK 各个功能的作用解释（主题和分区 详解，用命令行和图形界面创建主题和查看主题）

目录 CMAK 各个功能的作用解释&#xff08;主题&#xff09;★ 主题★ 分区★ 创建主题&#xff1a;★ 列出和查看主题 CMAK 各个功能的作用解释&#xff08;主题&#xff09; ★ 主题 Kafka 主题虽然也叫 topic&#xff0c;但它和 Pub-Sub 消息模型中 topic 主题及 AMQP 的 t…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023