• 理解同源策略

    • 同源策略是一种约定，它是浏览器最外围也最根本的平安性能，如果短少了同源策略，则浏览器的失常性能可能都会受到影响。
    • 在一个网页中发送申请时，会波及到 以后页面的地址 和 申请指标的地址，如果这两个地址中的端口号、域名、传输协定有任意一个不一样就是非同源申请，同时触发浏览器的同源策略，不容许获取申请指标服务器上的数据

  • 理解跨域申请

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

    • 开发过程中的跨域申请（申请第三方服务器）

    • 须要跨域申请的状况：

      1. 页面服务器（html、js、css、动态资源）与 数据服务器离开寄存
      2. 购买第三方服务器应用

  • jsonp跨域申请

    • 因为浏览器的同源策略，不容许发送跨域申请的 ajax 申请，所以咱们应用 jsonp 手法实现跨域申请
    • 原理：<script> 标签的 src 属性不受同源策略的影响，会将申请回来的数据当作 JS 代码进行执行，
    • 外围：利用 script 标签 src 属性，向一个非同源服务器申请数据，服务器只有返回一个字符串，就会将这个字符串当作 JS 代码进行执行

    • jsonp 申请数据时，须要服务器返回的 函数名()这样的字符串，前端须要筹备一个函数，并将这个函数名以参数模式传递给后端
      jsonp 优缺点：

      1. 绕开了同源策略，实现跨域申请，以内部资源的模式进行申请数据
      2. 不好做平安防备
    <script type='text/javascript'>    window.jsonp = function (res) {        console.log(res)    }</script><script src='http://localhost:8080/jsonp?id=1&cb=jsonp' type='text/javascript'></script>第一个script，创立一个jsonpCallback函数。然而它还没有被调用,这个函数须要发送给后端第二个script，加载src中的资源，并期待申请的内容返回，后端返回后果后执行jsonp函数

  • 代理跨域申请


    • 利用 正向代理 机制实现跨域申请
    • 配置代理时倡议应用 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");