ajax 跨域请求api_不得不讲的跨域

最新推荐文章于 2023-10-03 15:44:05 发布

weixin_39564036

最新推荐文章于 2023-10-03 15:44:05 发布

阅读量140

点赞数

文章标签： ajax 跨域请求api 跨域全域名访问的安全隐患

我的第一篇博客就从跨域说起，尝试着把自己所学习的分享给大家！

什么是跨域

单是从字面意义上来讲的话，跨是跨越种族、跨越性别…… 域是领域、域名。
在说跨域之前呢想要先说下《同源策略》

何为同源？

官方给出的定义是：

如果两个页面的协议，端口（如果有指定）和主机都相同，则两个页面具有相同的源。我们也可以把它称为“协议/主机/端口 tuple”，或简单地叫做“tuple". ("tuple" ，“元”，是指一些事物组合在一起形成一个整体，比如（1，2）叫二元，（1，2，3）叫三元)

那我们就可以理解为：

以百度的网址举例： 

https://www.baidu.com:80/aa 

https:// 或者 http:// 协议

www.baidu.com 域名

80 端口

以上3者相同就是同源，如果有其中一个不同就是跨域

另外同源策略又分为以下两种：

DOM 同源策略：禁止对不同源页面 DOM 进行操作。这里主要场景是 iframe 跨域的情况，不同域名的 iframe 是限制互相访问的。
策略：禁止使用 XHR 对象向不同源的服务器地址发起 HTTP 请求。

所以这样我们就可以明白为什么会有同源策略，由于浏览器的限制而产生的，浏览器有《同源策略》的限制同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说 Web 是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。它的核心就在于它认为自任何站点装载的信赖内容是不安全的。当被浏览器半信半疑的脚本运行在沙箱时，它们应该只被允许访问来自同一站点的资源，而不是那些来自其它站点可能怀有恶意的资源。

SO! 什么是跨域的问题我们也就明白了，跨域的产生就是由于浏览器同源策略的限制，限制了不能跨域访问 http请求

如何解决跨域问题

俗话说的好，上有政策，下有对策。那么浏览器限制了我们的跨域请求，那如果我们需要访问不同源的时候该怎么办呢？还请跟我一起往下看~~

跨文档通信API: window.postMessage()

它可用于解决以下方面的问题：

页面和其打开的新窗口的数据传递
多窗口之间消息传递
页面与嵌套的iframe消息传递
上面三个场景的跨域数据传递

// 父窗口打开一个子窗口

调用message事件，监听对方发送的消息

// 监听message消息

JSONP

jsop是利用资源不跨域的特性，同源策略只是限制了xhr对象发送的请求，并没有限制资源加载，所以jsonp利用了这个特性可以解决浏览器的跨域(需要后端配合)

如何使用jsonp解决跨域：

优点：解决了跨域，兼容
缺点: 只能get请求，不能捕获错误状态

cors 跨域资源共享

它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

简介 CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

前端发送正常的http请求

服务端设置:

node实现：

app

优点：可以跨域前端不需要做任何处理正常ajax请求，不需要依赖其他特性
缺点：兼容性问题，场景：如果接口是共享接口，并且不需要关心ie低版本浏览器适合移动端项目（接口域名和项目域名是分开）

PHP:

response

Nodejs中间件代理跨域

node中间件实现跨域代理，原理大致与nginx相同，都是通过启一个代理服务器，实现数据的转发，也可以通过设置cookieDomainRewrite参数修改响应头中cookie中域名，实现当前域的cookie写入，方便接口登录认证。

非vue框架的跨域（2次跨域）

var

2.vue框架的跨域

（webpack.config.js）

module

代理

在开发项目的时候一般都是前后端分类，后端提供接口与，前端请求接口并且渲染页面，这个时候就会出现跨域问题。在开发环境中前端项目是localhost，而后端提供接口是 192.168.0.19:3000 但是项目上线后都变成了 http://www.baidu.com 统一域名，不存在跨域了，也就是开发环境中存在跨域，而生产环境没有跨域问题了，这个时候我们就可以使用代理的形式解决跨域

解决方案利用了服务器不存在跨域的特性进行解决，（通过我自己本地服务端去代理请求跨域的接口，在通过我本地的服务返回给我本地页面）

正向代理正向代理是一个位于客户端和原始服务器(origin server)之间的服务器，为了从原始服务器取得内容，客户端向代理发送一个请求并指定目标(原始服务器)，然后代理向原始服务器转交请求并将获得的内容返回给客户端。客户端必须要进行一些特别的设置才能使用正向代理。