首先,你要明白,ajax 是不允许跨域,除非说你的服务器允许跨域。为什么游览器可以,因为ajax 是运行在游览器上的。游览器厂商规定的。不行就是不行。
游览器代码不变
// function reqListener () {
// console.log(this.responseText);
// }
//
// var oReq = new XMLHttpRequest();
// console.log(1);
// oReq.addEventListener("load", reqListener);
// console.log(2);
// oReq.open("GET", "http://127.0.0.1:8088/");
// // oReq.setRequestHeader('Access-Control-Allow-Origin':'www.baidu.com');
// console.log(3);
// oReq.send();
// console.log(4);
var xhr= new XMLHttpRequest(),
method = "GET",
url = "http://127.0.0.1:8088/";
xhr.open(method, url, true);
xhr.addEventListener('load',()=>{
//console.log(xhr.response);
});
// xhr.overrideMimeType('text/xml');
xhr.setRequestHeader('Content-Type','text/html');
xhr.onreadystatechange = function () {
console.log(XMLHttpRequest.DONE)
if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
console.log(xhr.getAllResponseHeaders())
console.log(xhr.responseText);
console.log(xhr.responseType);
console.log(xhr.responseXML);
}
};
//xhr.withCredentials = true;
xhr.send();
目录
2.我加上 res.setHeader("access-control-allow-origin","*");
3.加上res.setHeader('Access-Control-Allow-Headers','*');
第一种情况:任何的跨域允许都不加
首先服务器代码:
const http = require("http");
const fs = require("fs");
const url = require("url");
const querystring = require("querystring");
let data = '成功开启服务';
fs.writeFile('文件.txt', data, 'utf8',(err) => {
if (err) throw err;
console.log('日志已经输出');
});
let server = http.createServer(function (req,res) {
let arr = req.url.toString().split('/');
let arr1 = __dirname.toString().split('\\');
const UrlArr = arr1.join('/');
if(req.url === '/') {
console.log(req.headers);
fs.readFile('./server.html', (err, data) => {
// res.setHeader("access-control-allow-origin","*");
// res.setHeader('Access-Control-Allow-Headers','*');
res.writeHead(200, {
'Content-Type': 'text/html'
});
res.write(data,'document');
res.end();
})
}
else if(arr[1] === 'css'){
fs.readFile(`${UrlArr}${req.url}`, (err, data) => {
// res.setHeader("access-control-allow-origin","*");
// res.setHeader('Access-Control-Allow-Headers','*');
res.writeHead(200, {
'Content-Type': 'text/css'
});
res.write(data, 'utf8');
res.end();
})
}
else if (arr[1] === 'js'){
fs.readFile(`${UrlArr}${req.url}`, (err, data) => {
// res.setHeader("access-control-allow-origin","*");
// res.setHeader('Access-Control-Allow-Headers','*');
res.writeHead(200, {
'Content-Type': '*/*',
});
res.write(data, 'document');
res.end();
})
}
else if (arr[1] === 'images'){
fs.readFile(`${UrlArr}${req.url}`, (err, data) => {
// res.setHeader("access-control-allow-origin","*");
// res.setHeader('Access-Control-Allow-Headers','*');
res.writeHead(200, {
'Content-Type': 'image/*'
});
res.write(data);
res.end("结束");
})
}
});
server.listen(8088,'127.0.0.1',()=>{
console.log('服务器开始监听!');
});
在服务器显示请求头中就会报出这个:
{
host: '127.0.0.1:8088',
connection: 'keep-alive',
accept: '*/*',
'access-control-request-method': 'GET',
'access-control-request-headers': 'content-type',
origin: 'null',
'sec-fetch-mode': 'cors',
'sec-fetch-site': 'cross-site',
'user-agent': 'Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.116 Safari/537.36',
'accept-encoding': 'gzip, deflate, br',
'accept-language': 'zh-CN,zh;q=0.9,be;q=0.8,en;q=0.7'
}
在游览器中的显示:
2.我加上 res.setHeader("access-control-allow-origin","*");
服务器:
const http = require("http");
const fs = require("fs");
const url = require("url");
const querystring = require("querystring");
let data = '成功开启服务';
fs.writeFile('文件.txt', data, 'utf8',(err) => {
if (err) throw err;
console.log('日志已经输出');
});
let server = http.createServer(function (req,res) {
let arr = req.url.toString().split('/');
let arr1 = __dirname.toString().split('\\');
const UrlArr = arr1.join('/');
if(req.url === '/') {
console.log(req.headers);
fs.readFile('./server.html', (err, data) => {
res.setHeader("access-control-allow-origin","*");
// res.setHeader('Access-Control-Allow-Headers','*');
res.writeHead(200, {
'Content-Type': 'text/html'
});
res.write(data,'document');
res.end();
})
}
else if(arr[1] === 'css'){
fs.readFile(`${UrlArr}${req.url}`, (err, data) => {
// res.setHeader("access-control-allow-origin","*");
// res.setHeader('Access-Control-Allow-Headers','*');
res.writeHead(200, {
'Content-Type': 'text/css'
});
res.write(data, 'utf8');
res.end();
})
}
else if (arr[1] === 'js'){
fs.readFile(`${UrlArr}${req.url}`, (err, data) => {
// res.setHeader("access-control-allow-origin","*");
// res.setHeader('Access-Control-Allow-Headers','*');
res.writeHead(200, {
'Content-Type': '*/*',
});
res.write(data, 'document');
res.end();
})
}
else if (arr[1] === 'images'){
fs.readFile(`${UrlArr}${req.url}`, (err, data) => {
// res.setHeader("access-control-allow-origin","*");
// res.setHeader('Access-Control-Allow-Headers','*');
res.writeHead(200, {
'Content-Type': 'image/*'
});
res.write(data);
res.end("结束");
})
}
});
server.listen(8088,'127.0.0.1',()=>{
console.log('服务器开始监听!');
});
服务器显示:
{
host: '127.0.0.1:8088',
connection: 'keep-alive',
accept: '*/*',
'access-control-request-method': 'GET',
'access-control-request-headers': 'content-type',
origin: 'null',
'sec-fetch-mode': 'cors',
'sec-fetch-site': 'cross-site',
'user-agent': 'Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.116 Safari/537.36',
'accept-encoding': 'gzip, deflate, br',
'accept-language': 'zh-CN,zh;q=0.9,be;q=0.8,en;q=0.7'
}
游览器显示:
3.加上res.setHeader('Access-Control-Allow-Headers','*');
游览器显示完全了
服务器显示:
{
host: '127.0.0.1:8088',
connection: 'keep-alive',
accept: '*/*',
'access-control-request-method': 'GET',
'access-control-request-headers': 'content-type',
origin: 'null',
'sec-fetch-mode': 'cors',
'sec-fetch-site': 'cross-site',
'user-agent': 'Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.116 Safari/537.36',
'accept-encoding': 'gzip, deflate, br',
'accept-language': 'zh-CN,zh;q=0.9,be;q=0.8,en;q=0.7'
}
{
host: '127.0.0.1:8088',
connection: 'keep-alive',
'content-type': 'text/html',
'user-agent': 'Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.116 Safari/537.36',
'sec-fetch-dest': 'empty',
accept: '*/*',
origin: 'null',
'sec-fetch-site': 'cross-site',
'sec-fetch-mode': 'cors',
'accept-encoding': 'gzip, deflate, br',
'accept-language': 'zh-CN,zh;q=0.9,be;q=0.8,en;q=0.7'
}
总结:
根据这样看来。ajax 中setresponse 是单独给发一次请求。