jquery ajax 跨域如何解决 jquery怎么解决跨域 收藏 0

最常见五种跨域解决方案

严格来讲，跨域其实并不是一种问题，而是一种网络调用的安全策略。在浏览器中有一种策略方式叫做同源策略，这也就规定了有一部分请求是不能被浏览器所接受的，也就是说同源策略的跨域是因为浏览器不接受而造成的，并不是说服务端对请求没有做出响应。

一般来讲我们使用的URL被分为的三个部分：协议、域名、端口。只有当三者都一致的时候，才被称为是同源。在同源策略中规定，之后发送请求的一边和接受请求的一边处于同源的情况下，浏览器才会接收到响应。如下几种

那么如何去解决跨域问题呢？下面我们就来详细介绍一下常见的几种跨域解决方案。

在JQuery中自带了Ajax的跨域请求解决方案，其底层原理是使用JSONP来解决。如下所示。

在JQuery项目中这是一种比较常见的解决方案。

在一些老旧项目中，没有使用到JQuery，为了解决跨域问题，采用了script标签来实现跨域解决方案。如下。

这里需要注意的是，在使用完成之后需要删除script，否则越来越多的script标签就会随着请求挂载到DOM上。但是这种方案不建议使用。

在每个框架中对于代理的设置是不一样的，但是不变的是他们都有一个配置文件，并且都会有一个proxy的字段来控制前端代理。所以我们可以在代理中对其跨域问题进行设置，这样，在调用的时候就不会出现前端跨域的情况。

Nginx是现在使用比较多的服务器代理，在它的配置中也提供了服务端跨域解决方案。如下所示。

我们知道Nginx是一个反向代理服务器，所以我们只需要保证Nginx与请求的同源策略，反向代理的通过接口调用的方式，所以可以直接使用这种配置方式。

简单的讲就是在代码中添加对应的配置项就可以解决跨域问题。

Access-Control-Allow-Origin：意思是安全通行请求。举个例子 http://192.168.1.200:8080 向http://192.168.1.201:8080 发送了请求，结果因为域名不一样，在返回信息的时候因为被拦截。

但是如果http://192.168.1.200:8080 在响应头中的 字段中携带上属性值\’http://192.168.1.201:8080\’ 如下

这就相当于告诉浏览器 http://192.168.1.200:8080 地址是安全的不要拦截。当然我们还可以通过设置如下的方式来进行所有域名不拦截配置。

在Spring Boot项目中，通常会使用一个配置文件的方式来解决跨域问题。以上的几种方式都是在日常开发中常用到的方式。但是也有一些不推荐的使用方式，例如使用script的方式，使用设置请求头的方式，当然设置请求的方式在测试的时候可以使用，但是在实际线上的过程中就不建议使用。

关于跨域GET、POST请求的小结

重点：跨域POST大量数据；

JQuery：$.ajax/$.getJSON支持jsonp格式的跨域，但是只支持GET方式，暂不支持POST；

CORS：w3c关于跨域的新方案，res.setHeader(\’Access-Control-Allow-Origin\’,\’*\’)，兼容IE9+；

so，跨域POST是个值得研究的问题啊！万能的JQuery无法跨域POST；鉴于基本国情，CORS也只是适合在移动端玩玩；

相信有同学这样做过：

实际上chrome的控制台显示却是这样的：

那么，如图是否可以证明jQuery确实无法跨域POST呢？说好的POST呢，jQuery自动将其转为GET了；这样其实就和$.getJSON差不多了，只是$.ajax的跨域直接能回调返回值，而$.getJSON的返回值需要一个全局的callback（可自定义）；

话说我的个人小站在移动端还处于最原始的缩放状态，说好的H5 Response Web呢？原谅我再一次跑偏了：原本计划或者直接在原有样式表里media query；而结果却是我新开了个站点，作为移动端的版本，读取PC端存储的数据；一方面减轻代码量，使移动端更轻量简洁，毕竟只是个博客嘛；另一方面，这样的话，移动端将有更宽广的随意挥洒的空间；再者，基于性能优化，这样也不错；当然，问题也很明显了；两个站点要共享数据，连同一个数据库，要做同步操作，呵呵，我一个小前端，这些貌似目前想太多啊！那么怎么办呢，是的，就是上面说到的问题，前端跨域请求数据；

移动端的库用的是由zepto的一些模块自定义组装的一个版本，bootstrap什么的一边凉快凉快吧，样式手写的，权当练手吧。。。在后端，由Nodejs的http-proxy做代理，判断请求的UA，如果是移动端的访问，则无论host是www.famanoder.com还是m.famanoder.com全都分发到移动端的站点处理，这样在手机问www.famanoder.com就不用做跳转了；

OK，那么要开始跨域请求和提交数据了；如果只是请求远程数据，GET方式足矣；可是如果要提交大量数据，比如，某大侠路过小站，一时兴起，引经据典，古今中外，滔滔不绝，长篇大论一通

，这样的话恐怕GET搞不定啊！先看看最简单的GET方式吧：

然后定义好全局的getmore就OK了，后端处理也简单，我这是Nodejs，其他的自行百度吧：

当然像上图里那样也是可以的，后端同样处理；

前面说了，伟大的JQuery暂时不支持POST方式的跨域；那咋办呢？其实没有想象的那么复杂，是时候证明你不能太依赖JQuery了，有时候没有她，你也要好好过；

基本原理大概是这样的：form表单提交，无论你是post，还是get，无论你提交到哪，只要后端有对应程序处理，都妥妥的，不存在跨域一说；以前无刷新上传、提交表单都是将form的target指向一个空iframe，此处同理；类似：a.com提交表单到b.com，表单的target为一个空iframe；b.com处理请求，在response里执行callback，注意，此处callback是属于那个空iframe的；

后端的处理基本一样；如果不出意料，到此，请求会在控制台出现一片红，是的，要你设置domain；除了页面和对应js要设置domain外，一定别忘啦，response里的callback其实是属于当前页面的，所以response里执行的callback也要设置domain；类似这样：

OK，没有了她，你依然要好好过；这样你就可以POST跨域提交大量数据了；同时也弥补了JQuery只能通过jsonp GET跨域了；当然CORS在移动端也是值得推荐的；小伙伴们可以试一下，或者有其他什么好办法，记得和我分享啊！

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com