关于前端学习:Javascript跨域请求

理解同源策略

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

理解跨域申请

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

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

• 须要跨域申请的状况：

  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");