npm介绍及跨域问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <button class="btn1">点我发送ajax1</button>
    <button class="btn2">点我发送ajax2</button>

    <script>

        document.querySelector('.btn1').addEventListener('click',function(){
            // 给我们自己nodejs服务器发请求
            let xhr = new XMLHttpRequest()
            xhr.open('get', 'http://127.0.0.1:3000/getList')
            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.send()
            xhr.onload = function() {
                console.log(xhr.responseText)
            }
        })

    </script>
</body>
</html>

2.js页面代码(准备一个app.js文件,搭建nodejs服务器)

//1.导入http模块 
const http = require('http')

//2.创建服务器
const app = http.createServer( (req,res)=>{
    if( req.url === '/getList' ){
        //响应json字符串
        res.end('{"name":"张三"}')
    }
} )

//3.开启服务器
app.listen(3000,()=>{
    console.log('服务器启动成功')
})

3.启动服务器,不出意外的话就是要出意外了

2.跨域介绍

只要是出现跨域问题，浏览器就会出现一个固定格式(没有之一)的报错信息

Access to XMLHttpRequest at '服务器url地址' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

跨域:ajax地址与页面地址不同源

ajax地址:跨域只会出现在ajax请求中
页面地址:location.href
不同源:协议名,主机名(ip),端口号三个完全不一致(逻辑或)
同源:协议名,主机名(ip),端口号三个完全一致(逻辑与)

3.同源策略

同源策略:协议名,主机名,端口号三个完全一致(逻辑与)
页面地址:http://127.0.0.1:5000/index.html
ajax2: https://127.0.0.1:3000/abc 不同源,协议名不同
ajax3: https://m.163.com:3000/abc 不同源,主机名不同
ajax1: http://127.0.0.1:3000/abc 不同源,端口号不同
ajax4: http://127.0.0.1:5000/abc 同源

浏览器有同源策略的原因:如果ajax地址和页面地址不同,浏览器就会认为你是向其他服务器发送请求.为了保护你的安装,浏览器就会拒绝介绍其他服务器的数据

4.解决跨域

1.JSONP技术:以前的技术,现在很少使用了
2.CORS技术:后台设置响应头,前端不需要任何处理
3.代理服务器:帮浏览器转发请求的服务器
(1)浏览器给nodejs代理服务器发请求
(2)代理服务器帮你转发请求给目标服务器(网易云)
(3)目标服务器(网易云)把数据响应给 nodejs服务器
(4)nodejs服务器把数据响应给浏览器

五.跨域解决方案:CORS

CORS :全称cross origin resource share （资源共享）

工作原理： 服务器 在返回响应报文的时候，在响应头中设置一个允许的header

//1.导入http模块 
const http = require('http')

//2.创建服务器
const app = http.createServer( (req,res)=>{
    if( req.url === '/getList' ){
        //设置允许跨域响应头
        res.setHeader('Access-Control-Allow-Origin', '*');
        //响应json字符串
        res.end('{"name":"张三"}')
    }
} )

//3.开启服务器
app.listen(3000,()=>{
    console.log('服务器启动成功')
})

res.setHeader('Access-Control-Allow-Origin', '*');

这行代码的工作过程：浏览器请求发送了, 服务器也响应了, 但是浏览器发现了跨域访问, 判断是否有`响应头: Access Control Allow Origin' (后端是否允许跨域访问, 如果允许, 浏览器就把数据留下, 否则抛弃掉然后报错)