前端面试笔记-Ajax及跨域小白向

时间 2019-11-17

原文原文链接

前言

前端一年的练习生，水平稍微菜了点，面试常常碰壁，把一些经验记录下来作个分享，尽力写好，但愿能帮助一部分人html

什么是Ajax

简单的说就是一个发送请求的方法，全程为Asynchronous JavaScript and XML（异步的JS和XML，XML多用的JSON代替），刚开始我还觉得跟axios同样须要专门new一个，其实Ajax只是一项异步发送请求的技术, 至于为何须要Ajax, 有个十几个带验证的表单，每次提交的时候才去验证蠢了点，Ajax能在每个字段填完后发起请求校验。前端

发送一个简单的Ajax请求

首先建个服务器，我这水平菜的不行，直接上Node.js建（前端学Node.js不亏，相较于Spring简单易上手）node

// 新建一个server.js文件
const http = require('http')
http.createServer(function (request, response) {
    console.log('请求接收到了')
    response.end('666')
}).listen(3030)
// 在控制台输入node server.js启动
// 就这么简单，浏览器输入http://localhost:3030 就会输出666
复制代码

经过Ajax发送个请求webpack

// 在test.html中
<script>
    var xhr = new XMLHttpRequest(); //这个就是常说的Ajax，的实现的一种
    xhr.open('GET', 'http://127.0.0.1:3030')
    xhr.send()
</script>
复制代码

这时候盯着server.js的控制台就会出现一条请求收到了，发送了一次Ajax请求ios

什么是跨域

简单的理解，若是把一个端口看成本身家的话，跨域就是去别人家串门，从自家房间里来回蹿这叫同域。nginx

www.test.a.com:3030/web

请求协议(http) + 子域(www) + 主域(test.a) + 端口号(3030)，这其中哪一个变了，都至关于跨域面试

回到上面的那个例子，在浏览器输入http://127.0.0.1:3030 这时候在浏览器按下F12看console的话，就会发现一条报错，意思XHR请求这个地址被CORS拦了，But在server.js的控制台里的确有请求收到了，说白了跨域实际上是浏览器本身干的事，浏览器以为这操做有安全隐患就报了条错，但其实控制台仍是有反应的 axios

跨域解决方案

列出最经常使用的三种，JSONP, CORS, 反向代理，那种让你说出五六种的面试官我怀疑是在找事跨域

JSONP

script标签是不会被管是否是跨域的，也就是

<body>
<!-- <script>
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://127.0.0.1:8887')
    xhr.send()
</script> -->
<script src="http://127.0.0.1:8887"></script>
</body>
复制代码

这样写的话，就不会报错，浏览器不会管，懒人方案，可是只支持get请求。

CORS

W3C推出的方案，跟前端没什么关系，主要是后台在返回数据的时候加个请求头，Access-Control-Allow-Origin

nginx反向代理

最经常使用的解决方案，主要也是后台的事（我一个初级实习生水平是来面前端的。。。）简单的说，原本是A跟B直接通话，反向代理是A并不知道B，而是跟C通话，C是要跟B，D, E谁通话A无论，完后再C把响应返回给A，

// proxy服务器
server {
listen       81;
server_name  www.domain1.com;
location / {
        proxy_pass   http://www.domain2.com:8080;  #反向代理
        proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名
        index  index.html index.htm;
        # 当用webpack-dev-server等中间件代理接口访问nignx时，此时无浏览器参与，故没有同源制，下面的跨域配置可不启用
        add_header Access-Control-Allow-Origin http://www.domain1.com; #当前端只跨域不带cookie时，可为*
        add_header Access-Control-Allow-Credentials true;
    }
}

复制代码