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

Javascript——跨域请求

了解同源策略

了解跨域请求

jsonp跨域请求

代理跨域请求

cors跨域资源共享(由后端解决跨域请求问题)

小高同学

小高同学