跨域解决方案:原生jsonp与中间件cors的区别

548 阅读4分钟

跨域


跨域介绍

  1. 跨域固定报错格式
  • 只要是出现跨域问题,浏览器就会出现一个固定格式(没有之一)的报错信息
    • Access to XMLHttpRequest at '服务器url地址' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

image.png 2. 什么是跨域?

  • 浏览器使用ajax时,如果请求了的接口地址和当前打开的页面地址 不同源,称之为跨域
    • ajax请求 : 浏览器只有使用ajax发送请求才会出现跨域。href属性与src属性不会出现跨域
      • 接口地址 : 服务器接口文档地址(ajax请求的url)
    • 当前页面地址:当前页面的location.href
    • 不同源:协议名(http/https)、ip地址、端口号 只要有任意一个不相同,就是不同源。
  1. 什么是同源?

image.png 4. 浏览器为什么要有这种跨域保护限制?

  • 浏览器为了保护用户安全,页面向不同源的接口请求数据,因为如果接口和网页不同源,浏览器会认为你向两个服务器发送了请求,而两个不同的服务器的数据是不可控的,所以浏览器阻止了这种行为。
  • 大白话讲: 浏览器为了保护你的电脑安全
    • 举个荔枝: 你去肯德基店里点餐,店员只允许你点肯德基的产品(炸鸡,可乐,上校鸡块),如果此时你在肯德基店里面点麦当劳的产品,浏览器会认为你是坏人,就会让保安把你赶出去
  1. 跨域解决方案介绍
  • 跨域是前端工作中不可避免的问题:我们经常会出现请求不同源接口的情况,为了能够获取数据,解决跨域的问题方案也有很多,但是常用的就两种
    • 第一种:CORS技术
      • 目前的主流方案,也是最简单的方案,不需要前端写任何代码
    • jsonp技术:曾经的跨域杀手(the king) 专治各种跨域问题。现在慢慢的淡出了历史的舞台。原理和流程复杂,可以体现前端技术含量。

跨域解决方案一:CORS

  1. CORS工作原理介绍
  • CORS:全称cross origin resource share(资源共享)
  • 工作原理:服务器 在返回响应报文的时候,在响应头中设置一个允许的header
    • res.setHeader('Access-Control-Allow-Origin', '*');
    • 这行代码的意思是:服务器对浏览器说:老铁我是好人,不要拒绝我!

image.png

image.png

  1. express使用中间件cors:给所有的res添加默认请求头Access-Control-Allow-Origin
  • express有一个自带的中间件cors,它的作用是自动给每一个res设置默认请求头

image.png

  • cors中间件底层原理如下:
        app.use((req, res, next) => {//任何请求都会进入这个use中间件
          res.setHeader('Access-Control-Allow-Origin', '*')//设置响应头
          next()//执行下一个中间件
        })

跨域解决方案二:原生jsonp

  • 了解jsonp的原理,首先一定要明白script标签的src属性做了什么事情
    • (1)src属性会给服务器发送请求,请求一个js文件
    • (2)浏览器会解析执行这个js文件里的代码
      • 如果浏览器直接返回js代码,浏览器会立即执行
  1. jsonp的核心原理:利用script标签src属性来发送请求,服务器返回一个函数调用。则浏览器会执行这个函数因为跨域只对ajax有限制
    • 这是浏览器script标签的一个漏洞(历史遗留问题)

image.png

image.png 2. jsonp的工作流程

  • (1)浏览器:声明一个函数,用于接收服务器响应数据
  • (2)浏览器:写一个script标签,路径是jsonp请求地址,添加一个额外参数callback=函数名
  • (3)服务器:处理完请求之后,通过传参的方式返回一个函数调用的js代码,格式res.send('函数名(响应数据)')
    • 函数名需要从参数callback获取
  • (4)浏览器就会执行script标签响应的js代码
  1. jsonp与CORS区别
  • CORS:
    • 服务器返回响应头,前端无需任何处理
    • 简单快捷,支持所有请求方式
  • jsonp
    • 浏览器:自定义响应回调函数,使用script标签的src请求
      • 利用浏览器的src属性没有跨域这一限制特点
    • 服务器:接受callback参数,返回函数调用
    • 处理复杂,并且只支持get请求
      • 原因:get请求参数直接在url后面拼接,而post请求参数是放在请求体中