4.同源策略与跨域请求 一.同源策略基本概念 二.跨域请求的概念 三.跨域请求的解决方案

1.同源策略概念:

  一种约定,它是浏览器最核心也是最基本的安全功能,同源指域名、协议、端口需要保持一直才能进行相互间的访问。

2.例子:

(1)http://a.com没有办法访问到http://b.com下的脚本文件和文档。

4.同源策略与跨域请求
一.同源策略基本概念
二.跨域请求的概念
三.跨域请求的解决方案

(2)浏览器采用同源策略,禁止页面加载或执行与自身那个来源不同的域的任何脚本。换句话说浏览器禁止的是来源不同的“document”或脚本用来对当前“document”读取或设置某些属性。

4.同源策略与跨域请求
一.同源策略基本概念
二.跨域请求的概念
三.跨域请求的解决方案

(3)哪些不受同源限制

  • <script>、<img>、<iframe>、<link>这些包含src属性的标签可以加载跨域资源。但浏览器限制了JavaScript的权限使其不能读、写加载的内容。

二.跨域请求的概念

1.概念:

  发起请求的域和指向的资源所在的域不同时,则称为跨域请求,这里的域值协议+域名+端口

三.跨域请求的解决方案

1.解决方案

  • 通过JSONP可以实现跨域请求处理过程

  • 通过CORS来实现跨域请求处理过程

  • 通过nginx代理来实现跨域请求处理过程

2.JSONP实现的跨域请求

(1)使用<script>标签的src属性请求跨域资源

4.同源策略与跨域请求
一.同源策略基本概念
二.跨域请求的概念
三.跨域请求的解决方案4.同源策略与跨域请求
一.同源策略基本概念
二.跨域请求的概念
三.跨域请求的解决方案

(2)使用jquery的ajax请求跨域资源,必须是get请求,dataType必须为jsonp

4.同源策略与跨域请求
一.同源策略基本概念
二.跨域请求的概念
三.跨域请求的解决方案

3.CORS(跨域资源共享)

直接在服务器端配置,客户端就可以*的请求资源了

4.同源策略与跨域请求
一.同源策略基本概念
二.跨域请求的概念
三.跨域请求的解决方案

4.代理实现跨域过程

  • Nginx代理

  • Node的中间件实现代理

Node中间件实现代理:

  • 通过express实现请求转发过程:将localhost:3000/api/foo/bar 通过服务器请求转发到http://www.example.org/api/foo/bar

  • 需要使用npm安装express和http-proxy-middleware

4.同源策略与跨域请求
一.同源策略基本概念
二.跨域请求的概念
三.跨域请求的解决方案