Javascript——跨域请求

  • 了解同源策略

    • 同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。
    • 在一个网页中发送请求时,会涉及到 当前页面的地址 和 请求目标的地址,如果这两个地址中的端口号、域名、传输协议有任意一个不一样就是非同源请求,同时触发浏览器的同源策略,不允许获取请求目标服务器上的数据
  • 了解跨域请求

    当触发同源策略后依旧需要获取服务器数据的请求就叫做跨域请求

    • 开发过程中的跨域请求(请求第三方服务器)
    • 需要跨域请求的情况:

      1. 页面服务器(html、js、css、静态资源)与 数据服务器分开存放
      2. 购买第三方服务器使用
  • jsonp跨域请求

    • 由于浏览器的同源策略,不允许发送跨域请求的 ajax 请求,所以我们使用 jsonp 手法实现跨域请求
    • 原理: 第一个script,创建一个jsonpCallback函数。但是它还没有被调用,这个函数需要发送给后端 第二个script,加载src中的资源,并等待请求的内容返回,后端返回结果后执行jsonp函数
    • 代理跨域请求

      Javascript——跨域请求_第1张图片
      Javascript——跨域请求_第2张图片

      • 利用 正向代理 机制完成跨域请求
      • 配置代理时建议使用 nginx 服务器进行配置代理
      • 配置代理方法:

        1. 找到 nginx.conf配置文件,打开文件找到 server,在server{}内最后进行配置以下内容:
        2. 配置完成后保存文件,重启服务器
      // 代理服务器配置内容
      loaction /xx {
        proxy_pass 代理目标地址;
      }
      /*
        /xx 是代理标识符,当请求 /xx 时,nginx会找到请求代理标识符,
        然后自动转发给proxy_pass后面的目标地址
      */
    • cors跨域资源共享(由后端解决跨域请求问题)

      由于是跨域请求,请求发送到服务器了,服务器返回响应,但是浏览器判断是非同源位置,不允许使用服务器返回的数据,为了解决这个问题,需要服务器告诉浏览器这个域名允许使用返回的数据

      header("Access-Control-Allow-Origin:*");
      header("Access-Control-Request-Methods:GET,POST");
      header("Access-Control-Allow-Headers:x-requested-with,content-type,test-token,test-sessid");

你可能感兴趣的:(前端学习)