- 首页 > it技术 > >
Javascript——跨域请求
- 了解同源策略
- 同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。
- 在一个网页中发送请求时，会涉及到
当前页面的地址 和 请求目标的地址，如果这两个地址中的端口号、域名、传输协议有任意一个不一样就是非同源请求，同时触发浏览器的同源策略，不允许获取请求目标服务器上的数据
- 了解跨域请求
当触发同源策略后依旧需要获取服务器数据的请求就叫做跨域请求
- 开发过程中的跨域请求（请求第三方服务器）
- 需要跨域请求的情况：
- 页面服务器（html、js、css、静态资源）与 数据服务器分开存放
- 购买第三方服务器使用
- jsonp跨域请求
- 由于浏览器的同源策略，不允许发送跨域请求的 ajax 请求，所以我们使用 jsonp 手法实现跨域请求
- 原理：第一个script，创建一个jsonpCallback函数。但是它还没有被调用,这个函数需要发送给后端
第二个script，加载src中的资源，并等待请求的内容返回，后端返回结果后执行jsonp函数
- 代理跨域请求
文章图片
文章图片
- 利用 正向代理 机制完成跨域请求
- 配置代理时建议使用 nginx 服务器进行配置代理
- 配置代理方法：
- 找到
nginx.conf配置文件，打开文件找到 server，在server{}内最后进行配置以下内容：
- 配置完成后保存文件，重启服务器
// 代理服务器配置内容
loaction /xx {
proxy_pass 代理目标地址;
}
/*
/xx 是代理标识符，当请求 /xx 时，nginx会找到请求代理标识符，
然后自动转发给proxy_pass后面的目标地址
*/
- cors跨域资源共享(由后端解决跨域请求问题)
【Javascript——跨域请求】由于是跨域请求，请求发送到服务器了，服务器返回响应，但是浏览器判断是非同源位置，不允许使用服务器返回的数据，为了解决这个问题，需要服务器告诉浏览器这个域名允许使用返回的数据
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");
推荐阅读
