什么是跨域(面试题)

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

什么是同源策略

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

如何解决

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

一般文件分为两部分

                1.文件名:让你能够区分文件差异
                2.文件后缀:给原本能够识别这个文件的软件看的

<script src="/static/js/index2.css"></script>

能够正常引入

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

        假设:一个后端地址内的代码是一串JS代码,如果我们通过src属性访问,那么会得到什么呢

后端服务器js文件开启接口服务器,静态服务器js文件开启静态服务器

1.jsonp

HTML文件书写代码

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

<script>
        function fn(res) {
            console.log('我是这个函数内部的代码,我的文件内,没有调用,',res)
        }
    </script>
    <script src="http://localhost:8081/a?callback=fn"></script>

后端服务器书写代码

server.get('/a',(req,res) => {
    console.log(req.query)
    const {callback} = req.query
    res.send(`${callback}({code:1,msg:'请求成功'})`)
})

2.cors

• cors想法:前端向服务端发送请求,服务端返回内容的时候,告诉服务器,这是一个安全的请求,别拦截了
• cors的书写不好背,所以推荐第三方包cors

步骤

• 在前端服务器下载cors npm i cors
• 在后端服务器中引入第三方包const cors = require('cors')
• 调用cors : server.use(cors())

3.proxy

• JS代码中修改ajax请求
  • xhr.open("GET", "/list");
  • xhr.open("POST", "/info");

// 前端的代码, 发送一个请求
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();

function myAjax2() {
    const xhr = new XMLHttpRequest();
    xhr.open("POST", "/info");
    xhr.onload = function () {
        console.log(JSON.parse(xhr.responseText));
    };
    xhr.send();
}
myAjax2();

• 前端服务器:node中需要借助axios帮助我们发送请求,第三方包的流程:下载 导入 按照文档使用const axios = require('axios')

server.get('/list',(req,res) => {
  // console.log('如果我执行了,说明前端代码是请求我的')
  /**
   * node中需要借助axios帮助我们发送请求,第三方包的流程:下载  导入  按照文档使用
  */
  axios({
    method:'get',
    url:'http://localhost:8081/list',
  }).then(result => {
    // console.log(result.data)
    res.send(result.data)
  })
})
server.post('/info',(req,res) => {
  // console.log('如果我执行了,说明前端代码是请求我的')
  /**
   * node中需要借助axios帮助我们发送请求,第三方包的流程:下载  导入  按照文档使用
  */
  axios({
    method:'post',
    url:'http://localhost:8081/info',
  }).then(result => {
    // console.log(result.data)
    res.send(result.data)
  })
})