一、跨域分析
1、什么是跨域请求?
由于浏览器同源策略,凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。在Ajax中,表现为浏览器请求url和nodels开启的server服务中host和port不一致。如下图所示:
2、跨域问题分析
造成跨域访问受限的原因是浏览器中同源策略机制。
如果url中端口(如果有指定)和域名都相同,则他们具有相同的源
如果url中端口(如果有指定)和域名有差别,则他们属于不同的源
在发送Ajax请求时,浏览器就会对跨域的请求做出限制
二、跨域案例
1、跨域的实例代码
server.js
const http = require("http")
const config = require("../config/config")
const fs = require("fs");
const server = http.createServer((requestMsg,response)=>{
if(requestMsg.url === "/"){
fs.readFile("./html/ajax.html",(err,data)=>{
response.writeHead(200,"OK",{
"Content-type":"text/html",
})
response.end(data);
})
}else if(requestMsg.url === "/?"){
response.writeHead(200,"GET",{
"Content-Type": "text/html; charset=utf-8"
})
response.end("处理GET请求");
}else{
response.writeHead(500, "Invalid Request", {
"Content-Type": "text/html; charset=utf-8"});
response.end("无效请求");
}
})
server.listen(config.port,config.host,()=>{
console.log(`server starting at ${config.host}:${config.port}`)
})
ajax.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--http通过from请求数据-->
<!--<form action="http://127.0.0.1:8080" method="get">-->
<!--<input type="submit" value="提交" id="ajaxBtn">-->
<!--</form>-->
<!--ajax请求数据-->
<form >
<input type="submit" value="提交" id="ajaxBtn">
</form>
</body>