什么是跨域 ?

• 请求如果 触发了同源策略的话, 会出现跨域的情况

什么是同源策略 ?

• 是浏览器的一种保护机制
  • 请求的时候 域名/协议/端口号 有一个不一样
  • 那么就会触发同源策略, 其实就是浏览器认为你这个访问或者请求, 不安全
  • 然后给你拦截掉了
  • 注意! 此时请求是成功的! 只不过被浏览器拦截了

如何解决跨域 ?

1. jsonp -- 很早之前的解决方案, 需要前后端配合
2. cors -- 是一种 前端 最喜欢的 解决方案
3. proxy -- 不要和 ES6 的数据代理联想到一起, 只是重名

1. jsonp 方法:

• src 属性, 去到 8081 这个服务器内的 /a 这个接口, 拿到数据后, 执行一遍
• 注意: 必须是get方式

    接口服务端口:http://localhost:8081
    静态服务端口:http://localhost:8080/static/view/index.html
    <script>
        function fn(res){
            console.log('我是这个函数内部的代码,我的文件内, 没有调用',res);
        }
    </script>
    <script src="http://localhost:8081/a?callback=fn"></script>
    
    // 接口服务:
    server.get("/a", (req, res) => {
    const { callback } = req.query;
    res.send(`${callback}({code:1,msg:'请求成功'})`);
});

   // 会输出 : 我是这个函数内部的代码,我的文件内, 没有调用,{code:1,msg:'请求成功'}

一般文件分为两个部分:

1. 文件名: 让你能后区分文件的差异
2. 文件后缀: 给原本能够识别这个文件的软件看的
   • <script src="/static/js/index2.css"></script>

• 因为 src 属性 并不看你引入的是否是一个 JS 文件, 他只会把 他这个地址的内容 请求过来, 然后执行一遍

2. cors 方法:

• 前端向服务端发送请求, 服务端返回内容的时候, 告诉浏览器, 这是一个安全的请求, 您别拦截了

    server.use((req, res, next) => {
    // 1. 添加一些内容, 方便一会返回给浏览器的时候, 浏览器不在拦截
    // 允许那些地址可以请求我
    res.header("Access-Control-Allow-Origin", "*");
    // 允许携带那些额外的请求头信息
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    // 允许那些请求方式
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    next()
})

cors 的书写有点多, 但有一个第三方包 cors :

• 1. 下载 npm i cors
• 2. 导入 const cors = require('cors')
• 3. 调用 sever.use(cors())

3. proxy 方法:

proxy 也有一个第三方包 axios :

• 1. 下载 npm i axios
• 2. 导入 const cors = require('axios')
• 3. 调用

    // 静态资源服务器:
    server.get("/list", (req, res) => {
        axios({
           method: "GET",
           url: "http://localhost:8081/list",
        }).then(result => {
           // console.log(result.data)
           res.send(result.data)
        });
    });
    // ajax请求:
    function myAjax1() {
        const xhr = new XMLHttpRequest();
       // xhr.open("GET", "http://localhost:8081/list");
       xhr.open("GET", "/list");
       xhr.onload = function () {
       console.log(JSON.parse(xhr.responseText));
    };
    xhr.send();
    }
    myAjax1();