当页面发生跨域, 就会产生一个固定格式的报错 只要是跨域, 就一定会出现下面这种格式的报错, 但这种格式报错原因有很多, 比如基地址错误、服务器内部问题、跨度都有可能出现这种错误 Access to XMLHttpRequest at ‘ajax请求网址’ from origin ‘页面网址’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
// 服务器在返回响应报文时, 在响应头中设置一个允许的header
res.setHeader('Access-Control-Allow-Origin', '*')
// 参数: 1.响应头名字 2.响应头值 *为所有网站都可以
let http = require('http')
let axios = require('axios') // 导入axios
let app = http.createServer(async (req, res) => {
// 1. 设置允许跨域响应头
// 参数: 1.响应头名字 2.响应头值 *为所有网站都可以
res.setHeader('Access-Control-Allow-Origin', '*')
res.writeHead(200, {
'Content-Type': 'text/html;charset=utf-8'
})
if (req.url == '/') {
res.end('请求成功')
} else if (req.url == '/a') {
// 2. 使用axios库: 既可在浏览器使用,也可在服务器使用,它会自动判断当前代码运行环境
let res1 = await axios.get('http://c.m.163.com/nc/article/headline/T1348647853363/0-40.html')
console.log(res1)
// 3. 将数据返回给浏览器 (服务器不能直接给对象, 需转换为json)
res.end(JSON.stringify(res1.data))
} else {
res.end('404 not found')
}
})
app.listen('3000', '', () => {
console.log('开启成功')
})
document.querySelector('.btn1').addEventListener('click', function () {
// 给我们自己nodejs服务器发请求
let xhr = new XMLHttpRequest()
xhr.open('get', 'http://127.0.0.1:3000/')
xhr.send()
xhr.onload = function () {
console.log(xhr.responseText)
}
})
document.querySelector('.btn2').addEventListener('click', function () {
//给别人的网易云服务器发请求
let xhr = new XMLHttpRequest()
// xhr.open('get', 'http://c.m.163.com/nc/article/headline/T1348647853363/0-40.html')
// 使用代理服务器解决跨域
xhr.open('get', 'http://127.0.0.1:3000/a')
xhr.send()
xhr.onload = function () {
console.log(xhr.responseText)
}
})