ajax03_跨域访问问题

ajax跨域访问问题

1. 什么是跨域访问

   从一个域名去访问另一个域名的资源

   或者从一个站点去访问另一个站点的资源

2. 哪些请求方式可以发送跨域请求

   • 超链接

   • form表单

   • 传统js代码

   • javascript标签加载(后期可以改造为jsonp方式)

   • img标签

   相同点：直接改变地址栏地址

3. 哪些方式不能发送跨域请求

   • 默认情况下，ajax请求方式：被同源策略阻止

4. 什么是同源策略？

   • 浏览器的一种安全策略
   • 同源三要素：协议一致，域名一致，端口号一致
   • 只有同源才可共用同一个XMLHttpRequest

5. 为什么不能不同源则不能共用同一个XMLHttpRequest？

   • 安全角度

6. 解决ajax跨域请求的方案

   方案1：设置响应头

   //被访问的资源,设置允许访问自身的访问源
   response.setHeader("Access-Control-Allow-Origin", "http://localhost:8080") //允许某个访问源
   response.setHeader("Access-Control-Allow-Origin", "*") //允许所有访问源
   

   方案2：jsonp(压根没有用到XMLHttpRequest对象,不受同源策略的限制)

   • json with padding（带填充的json）

   • 不是一个真正的ajax请求，但是可以完成局部刷新效果，是一种类ajax请求

   • 并且可以完成ajax跨域请求

     <!--利用<script>标签，不用超链接(页面跳转，非局部刷新)-->
     <script src="http://localhost;8081/b/jsonp1"></script>
     
     <!--
     	后端响应的js代码，在返回到前端后，浏览器会执行这段js代码
     -->
     
     <!--
     	前端可以动态的向后端传递要调用的函数的名称
     -->
     

     jsonp 解决跨域问题时，只支持get请求

     jsonp底层原理实现

        自定义时机执行<script>标签
        var scriptElement = document.createElement("script") //创建script元素
        scriptElement.type = "text/javascript" //设置script元素属性
        scriptElement.src = "http://localhost:8081/b/jsonp1?fun=sayHello"
        document.getElementsByTagName("body")[0].appendChild(scriptElement) //将script对象添加到body标签中(相当于完成了script标签的加载)
        后端返回数据时参照前端函数名返回
     

   方案3：官方jQuery类库封装的jsonp

     本质:方案2的高度封装
     核心代码
   
     ```javascript
        $.ajax({
          type : "GET",
          url : "http://localhost:8081/b/jsonp1",
          dataType : "jsonp" //数据类型
          jsonp : "fun" //指定参数名，不设置的时候默认为"call back" ----> 指定第一层回调函数(主要用来作为入口,接受后端传来的json数据)
          jsonCallback : "sayHello" //指定回调函数的名字，不设置的时候，随即生成一个回调函数，且会调用success的回调函数 ----> 指定第二层回调函数(主要用于按照程序员需求处理后端传来的数据)
        })
     ```
   

   方案4 : 代理机制

   

   java程序如何发送get或者post请求?

   1. jdk内置的API
      1. java.net.URL... 可以发送http请求
   2. 第三方的开源组件
      1. apache的httpclient组件(开源免费)

   方案5:nginx反向代理

   学习了nginx再继续研究