跨域问题以及Ajax和Axios的区别

跨域问题以及Ajax和Axios的区别_第1张图片

文章目录

  • 1. 同源策略
  • 2. 同源策略案例
  • 3. 什么是跨域
  • 4. 跨域解决方法
    • 4.1 Ajax的jsonp
    • 4.2 CORS方式
    • 4.3 Nginx 反向代理
  • 5. Axios 和 Ajax 的区别
  • 6. Axios 和 Ajax 的区别及优缺点
    • 6.1 Ajax:
      • 6.1.1 什么是Ajax
      • 6.1.2 Ajax的原理
      • 6.1.3 核心对象
      • 6.1.4 Ajax优缺点
        • 6.1.4.1 优点:
        • 6.1.4.2 缺点:
      • 6.1.5 Ajax适用场景
      • 6.1.6 Ajax不适用场景
      • 6.1.7 代码
      • 6.1.8 Ajax请求的五个步骤
    • 6.2 Axios:
      • 6.2.1 Axios是什么
      • 6.2.2 Axios有哪些特性
      • 6.2.3 执行get请求,有两种方式
      • 6.2.4 执行post请求,注意执行post请求的入参,不需要写在params字段中,这个地方要注意与get请求的第二种方式进行区别。
  • 7. Axios和Ajax的区别

1. 同源策略

同源策略,是由 Netscape 提出的一个安全策略,它是浏览器最核心也是最基本的安全功能,如果缺少同源策略,则浏览器的正常功能可能都会受到影响,现在所有支持JavaScript的浏览器都会使用这个策略。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port)。

规定:浏览器要求,在解析Ajax请求时,要求浏览器的路径与Ajax的请求的路径必须满足三个要求,则满足同源策略,可以访问服务器。

要求:
协议、域名、端口号都相同,只要有一个不相同,那么都是非同源
跨域问题以及Ajax和Axios的区别_第2张图片
要求:
1.浏览器的请求路径
2.Ajax请求的网址

2. 同源策略案例

跨域问题以及Ajax和Axios的区别_第3张图片

3. 什么是跨域

跨域:指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制。

4. 跨域解决方法

4.1 Ajax的jsonp

  • JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。
  • jsonp解决跨域问题的原理是:script不受同源策略的影响。
  • jsonp实现跨域:前端通过script标签将函数以参数的形式传递给后台,后台通过解析请求的字符串,拿到该函数,然后让该函数以执行的状态返回给前端,并且在其中传入数据。不过jsonp请求只能支持get请求方式。
  • 核心用法
    利用

你可能感兴趣的:(ajax,javascript,前端)