[Ajax]（三）跨域请求解决（jsonp、cors）

时间 2020-03-02

标签 ajax 请求解决 jsonp cors 栏目 Ajax 繁體版

原文原文链接

概念

同源策略是浏览器的一种安全策略，所谓同源是指域名、协议（http、https）、端口彻底相同，只有同源的地址才能够相互经过AJAX的方式请求。不一样源地址之间，默认不能相互发送AJAX请求html

同源或者不一样源说的是两个地址之间的关系，不一样源地址之间请求咱们称之为跨域请求。node

http://www.baidu.com:80和ftp://www.baidu.com:80 不一样域，协议不同ajax

http://www.baidu.com:80和http://www.xiaomi.com:80 不一样域，主机名不同express

http://www.baidu.com:80和ftp://www.baidu.com:8080 不一样域，端口号不同json

http://www.baidu.com:80/a.html和ftp://www.baidu.com:80/b.js 同域跨域

跨域请求的来龙去脉

为何浏览器要限制跨域请求，其中最主要的缘由就是安全性问题，好比CSRF攻击。可是，既然不安全，为何咱们又要跨域请求呢？为了服务器便于管理和减轻服务器压力，公司会把不一样的资源放在不一样的服务器上，这样就存在不少子域，这时好比A子域的html资源要去访问B子域的图片资源就会出现跨域请求了。（能够注意下京东网站就是个很好的例子）浏览器

方法1、JSONP

ajax请求不一样域会出现跨域请求，无访问权限缓存

//报错CORS header ‘Access-Control-Allow-Origin’ missing
$.get("http://locally.uieee.com/categories", {},
    function (data, textStatus, jqXHR) {
        console.log(data)
    },
);

但平时在HTML页面写的<script>、<link>这些标签的src属性是不受跨域请求限制的。安全

var script = document.createElement('script')
script.src = 'http://locally.uieee.com/categories'//返回的是json
document.body.appendChild(script)

JSONP的策略就是服务器端能够动态生成JSON文件，把客户端须要的数据放到这个文件中，让客户端经过<script>标签的src属性来请求这个文件，这样，一种解决方案就出来了。服务器

客户端

在任意位置写一个html页面

服务端

在nodejs的express框架里的public写一个js文件，静态资源都放在这里。

双击打开.html文件可看结果

注意

JSONP方式没法发送POST请求，只能经过URL后面带参数实现，并且想要肯定JSONP的请求是否失败并不容易，大多数实现都是结合超时时间来进行判断的。

方法2、CORS跨资源共享

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

这种方案无需客户端作出任何变化(客户端不用改代码)，只是在被请求的服务端响应的时候添加一个响应头Access-Control-Allow-Origin，表示这个资源是否容许指定域请求。

服务器端设置

如需容许全部资源均可以访问您的资源，能够如此设置：

Access-Control-Allow-Origin: *

如需容许https://developer.mozilla.org访问您的资源，能够设置：

Access-Control-Allow-Origin: https://developer.mozilla.org

Node.js 设置header解决跨域问题

//也可单独于某个请求中设置相应头
app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
    next();
});

CORS和缓存

若是服务器未使用“*”，而是指定了一个域，那么为了向客户端代表服务器的返回会根据Origin请求头而有所不一样，必须在Vary响应头中包含Origin。

Access-Control-Allow-Origin: https://developer.mozilla.org
Vary: Origin