2023年最新前端面试题（跨域状态码相关）

一、接口

• 本质：使用Ajax请求数据时，被请求的URL地址叫做数据接口，简称接口

二、接口文档

• 本质：接口的说明文档，是调用接口的依据

• 组成部分：

接口名称：标识各个接口的简单说明

接口URL：接口的调用地址

调用方式：get、post等

参数格式：每个参数包含参数名称、参数类型、是否必选、参数说明等四项

响应格式：返回值的详细描述，包含数据名称，数据类型，说明三项内容

返回示例：通过对象的形式，列举服务器返回的数据结构

三、接口测试工具

• 作用：验证接口能否被正常访问

• 优点：在不写任何代码的情况下对接口进行调用和测试

• 常用工具：postman、runapi等

四、同源

本质：如果两个页面的协议、域名、端口都相同，则两个页面具有相同的源

五、同源策略

本质：浏览器提供的一个安全功能，浏览器规定，A网端的JavaScript不允许和非同源的网站C之间进行资源交互

六、跨域

• 本质：两个URL的协议、域名、端口不一致

• 原因：浏览器的同源策略不允许非同源的URL之间进行资源交互

七、浏览器对跨域请求的拦截

• 浏览器允许发起跨域请求，但是请求回来的数据会被浏览器拦截，无法被页面获取到

八、实现跨域数据请求的方法

• JSONP：出现的早，兼容性好，是一种临时解决方案，缺点只支持get请求，不支持post请求

实现原理：通过<script>标签的src属性请求跨域的数据接口，并通过函数调用的形式，接收跨域 接口响应回来的数据

注意： JSONP 和 Ajax 之间没有任何关系，不能把 JSONP 请求数据的方式叫做 Ajax，因为 JSONP 没有用到XMLHttpRequest 这个对象

• CORS：出现的晚，使用简单，只需要在后端做配置，是跨域请求的根本解决方案，缺点对于IE8以下的浏览器是不支持的

具体实现：

前端发起请求：

toLogin(){
            this.axios.post('http://localhost:3000/api2/users/login',{
                username:this.username,
                password:this.password
            }).then((res)=>{
                console.log(res);
            }).catch((res) => {
                alert("错误：" + res);
            });
        }

后台设置跨域：

app.use('/',function(req,res,next){
  res.header("Access-Control-Allow-Origin","*");
res.header("Access-Control-Allow-Headers", "X-Requested-With,Origin,Content-Type,Accept");  
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");  
next();
})

• Nginx反向代理：本地起一个服务器，项目向本地服务器发起请求，本地服务器向远程服务器发起请求，安全性高，可以实现负载均衡，缺点针对每一次代理，代理服务器就必须打开两个连接，一个对外，一个对内，因此在并发连接请求数量非常大的时候，代理服务器的负载也就非常大了，在最后代理服务器本身会成为服务的瓶颈

具体实现：

前端发起请求：

toLogin(){
    this.axios.post('/api/users/login',{
        username:this.username,
        password:this.password
    }).then((res)=>{
        console.log(res);
    }).catch((res) => {
        alert("错误：" + res);
    });
}

前端vue.config.js里设置跨域：

module.exports = {
  devServer: {
   // 代理配置
    proxy: {
        // 这里的api 表示如果我们的请求地址有/api的时候,就出触发代理机制
        // localhost:8888/api/abc  => 代理给另一个服务器
        // 本地的前端  =》 本地的后端  =》 代理我们向另一个服务器发请求 （行得通）
        // 本地的前端  =》 另外一个服务器发请求 （跨域 行不通）
        '/api': {
        target: 'www.baidu.com', // 我们要代理的地址
        changeOrigin: true, // 是否跨域 需要设置此值为true 才可以让本地服务代理我们发出请求
        pathRewrite: {// 路径重写
            // 重新路由  localhost:8888/api/login  => www.baidu.com/api/login
            '^/api': '' // 假设我们想把 localhost:8888/api/login 变成www.baidu.com/login 就需要这么做 
        }
      }
    }
  }
}

九、HTTP协议

1. HTTP协议简介

HTTP 协议即超文本传送协议 (HyperText Transfer Protocol) ，它规定了客户端与服务器之间进行网页内容传输时，所必须遵守的传输格式

2. HTTP请求消息

由于 HTTP 协议属于客户端浏览器和服务器之间的通信协议。因此，客户端发起的请求叫做 HTTP 请求，客户端发送到服务器的消息，叫做 HTTP 请求消息

注意：HTTP 请求消息又叫做 HTTP 请求报文

3. HTTP响应消息

响应消息就是服务器响应给客户端的消息内容，也叫作响应报文

4. HTTP请求方法

HTTP 请求方法，属于 HTTP 协议中的一部分，请求方法的作用是：用来表明要对服务器上的资源执行的操作

5. HTTP响应状态码

响应状态码会随着响应消息一起被发送至客户端浏览器，浏览器根据服务器返回的响应状态码，就能知道这次HTTP 请求的结果是成功还是失败了

十、3**重定向相关的响应状态码

3** 范围的状态码，表示服务器要求客户端重定向，需要客户端进一步的操作以完成资源的请求

十一、4**错误相关的响应状态码

• 400：参数传递有误

• 401：token失效或没有token

• 403：无权访问

• 404：请求地址URL错误

• 405：请求方法错误

• 408：请求超时

十二、5**错误相关的响应状态码

• 500：服务器内部错误

• 501：服务器不支持该请求方法

• 503：由于超载或系统维护，服务器暂时无法处理客户端的请求

十三、get和post请求的区别

get：发送请求来获得服务器上的资源，请求体中不包含请求数据

post：向服务器提交资源，请求体中包含请求数据

十四、http和https区别

1. http协议以明文方式发送内容，不提供任何方式的数据加密，不适合传输一些敏感信息，比如：信用卡号、密码等支付信息；端口是80

2. https则是具有安全性的ssl加密传输协议，端口是443，并且https协议需要到ca申请证书，HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比http协议安全

十五、axios拦截器种类及作用

1. 请求拦截器：统一设置请求头，注入token

2. 响应拦截器：处理数据结构，异常数据统一处理