前端高频面试题——跨域

2018-11-06 本文已影响0人 Kagashino

什么是跨域？为什么会跨域？

协议、端口和域名不一致成为跨域
跨域是因为浏览器需要遵守同源策略，发出的请求即使相应成功，也会被浏览器拦截下来
这个不细说了，一般面试官问你的是👇

如何解决跨域（JSONP）

拼脚本，写回调，重点：脚本src中的clientCallback和你声明的clientCallback

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>怎么用JSONP跨域</title>
</head>
<body>
  <button id="btn">发</button>
  <script>
    document.getElementById('btn').onclick = ()=>{
      go();
    }

    function go () {
      const s = document.createElement('script')
      s.src = 'http://localhost:3000?cb=clientCallback'
      s.async=true;
      document.body.appendChild(s);
    }
    function clientCallback(data){
      console.log(data); // 返回跨域请求结果
    }
  </script>
</body>
</html>

ky.png

为什么要这么做？

浏览器不会拦截跨域的script请求，相当于你向服务端要了一个JavaScript脚本文件并且立即执行

你这不是jQuery的啊，jQuery中怎么搞？

jQuery更简单，网上一堆爆款文，自查（axios同理）

服务端做了什么？

以express框架为例，只要设置回调名和返回jsonp格式的数据就好：

const express = require('express');
const app = express ()
const router = express.Router();

router.get('/', function(req, res, next) {
  res.jsonp({a:111,b:222});
});
app.set('jsonp callback name', 'cb');
app.use('/',router)

有没有别的办法(Access-Control-Allow-Origin)

当有跨域请求返回时，浏览器已经说得清清楚楚：服务端未提供'Access-Control-Allow-Origin'响应头

求求你们了，报错的时候看看错误信息吧！

在服务端设置响应头并返回（express）：

  res.set({
    'Access-Control-Allow-Origin' : 'http://localhost:63342'//如果允许所有的跨域请求，url可以换成'*'
  })
  res.json({a:111,b:222});

前端直接请求(xhr, jquery封装后的Ajax，fetch whatever)：

    document.getElementById('btn').onclick = ()=>{
      fetch('http://localhost:3000').then(res=>{
        return res.json()
      }).then(res=>{
        console.log('返回成功')
        console.log(res)
      })
    }