Ajax 跨域问题及其解决方案

主流的 前后端分离模式 下，当前端调用后台接口时，由于是在非同一个域下的请求，从而会引发 浏览器 的自我安全保护机制，最终结果是 接口成功请求并响应 ，但 前端不能正常处理该返回数据 。

因此，当 同时满足 以下三个条件的情况下，就会出现跨域问题：

想要彻底解决跨域问题，只需要破坏以上三个条件的任一即可：

添加浏览器启动参数： chrome --disable-web-security ，但是极不推荐这种解决方式。

Jsonp，全称 JSON with Padding ，一种非官方的协议，而是一种约定；前端通过向后台发送 script 类型请求解决跨域，此时接口响应的 application/javascript 类型的数据会作为 callback 函数的参数进行处理。

所以，后台也需要做相应的处理。以 Java 为例，添加如下配置即可：

综上， jsonp 请求存在以下几个弊端：

用 Nginx 或 Apache 来代理调用方的请求（ 客户端变更为相对路径请求，而非绝对路径 ），此时对于浏览器来说，由于请求是同源的，因此就不存在跨域问题。

以 Java 应用为例，添加如下全局配置：

如果只想针对某个类下的接口，或者是某个具体的接口配置允许跨域，只需要在相应的地方添加注解 @CrossOrigin 即可。

如果配置了 nginx 作为代理服务器，那么只需要为 nginx 添加支持跨域请求即可：

Q1：浏览器在执行跨域请求时，是先执行后判断，还是先判断后执行？

A1：都有可能，这需要根据所发送的请求是 简单请求 还是 非简单请求 来判断；如果是非简单请求，浏览器每次在执行真正的请求之前，还会先发送一个 options 请求方式的预检命令 可设定缓存时长，取消每次请求都要预检，提高效率，参考上面的服务端配置 。关于两种请求的区分及定义，参考下图说明：

Q2：如果是允许带（ 被调用方 ） cookie 的跨域请求，此时服务端同样配置为 Access-Control-Allow-Origin 等于 ，前端是否还可以请求成功？

A2：不可以，此时要将 Access-Control-Allow-Origin 指定为 调用方 具体的域 可以先取得调用方的域再动态配置，这样就不存在多个域请求的限制问题 ，并且添加配置 Access-Control-Allow-Credentials 为 true 。

跨域是指跨域名的访问，以下情况都属于跨域：

如果 域名和端口都相同，但是请求路径不同 ，不属于跨域，如：

wwwjdcom/item

wwwjdcom/goods

跨域不一定会有跨域问题。

因为跨域问题是浏览器对于ajax请求的一种安全限制： 一个页面发起的ajax请求，只能是于当前页同域名的路径 ，这能有效的阻止跨站攻击。

因此： 跨域问题 是针对ajax的一种限制 。

但是这却给我们的开发带来了不变，而且在实际生成环境中，肯定会有很多台服务器之间交互，地址和端口都可能不同，怎么办？

目前比较常用的跨域解决方案有3种：

我们这里会采用cors的跨域方案。

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。

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

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

浏览器会将ajax请求分为两类，其处理方案略有差异：简单请求、特殊请求。

只要同时满足以下两大条件，就属于简单请求。：

（1) 请求方法是以下三种方法之一：

（2）HTTP的头信息不超出以下几种字段：

当浏览器发现发现的ajax请求是简单请求时，会在请求头中携带一个字段： Origin

Origin中会指出当前请求属于哪个域（协议+域名+端口）。服务会根据这个值决定是否允许其跨域。

如果服务器允许跨域，需要在返回的响应头中携带下面信息：

注意：

如果跨域请求要想操作cookie，需要满足3个条件：

不符合简单请求的条件，会被浏览器判定为特殊请求,，例如请求方式为PUT。

特殊请求会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。

浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的 XMLHttpRequest 请求，否则就报错。

一个“预检”请求的样板：

与简单请求相比，除了Origin以外，多了两个头：

服务的收到预检请求，如果许可跨域，会发出响应：

除了 Access-Control-Allow-Origin 和 Access-Control-Allow-Credentials 以外，这里又额外多出3个头：

如果浏览器得到上述响应，则认定为可以跨域，后续就跟简单请求的处理是一样的了。

虽然原理比较复杂，但是前面说过：

事实上，SpringMVC已经帮我们写好了CORS的跨域过滤器：CorsFilter ,内部已经实现了刚才所讲的判定逻辑，我们直接用就好了。

在 Application 下编写一个配置类，并且注册CorsFilter：

结构：

放到Application下即可。

454重启测试：

访问正常：

在前后端分离架构下，难免会遇到跨域问题。但是对于跨域，很多人并没有多么深入的了解。这里我就详细讲一下这个问题。

同源策略与跨域

所谓跨域，英文叫做cross-domain，是网络安全领域的一个专有名词。简单点理解就是某些操作越过了域名的界限，访问了别的域名。

如果脚本可以自由访问其他域，就会产生很多安全问题。

比如，假设有一个网上银行系统，你已经登录过了，它支持一个ajax api可以进行转账；有一个论坛系统，人气很高，但是其中有恶意脚本，这个脚本会调用这个ajax api，从当前登录的用户账户中，转1000块到攻击者的账户。这样，当你访问这个论坛的时候，就会被转走1000块，而你一点都不知道！

除此之外，跨域请求还有很多危害。这不是一本关于安全的书，也就不展开讲了，想深入了解的可以买一本余弦编写的《Web前端黑客技术揭秘》。

为了防范跨域攻击，所有现代浏览器都遵循一套同源策略。根据MDN上的定义，“如果两个页面拥有相同的协议（protocol），端口（如果指定），和主机，那么这两个页面就属于同一个源（origin）”。对于违反同源策略的请求，除了img src等少数嵌入操作之外，都会被浏览器阻止。

这里需要注意的是：同源不仅仅要求相同的域名或ip，连协议和端口也必须相同。比如https://localhost和http://localhost或http://localhost:3000就不是同源的，而http://localhost/api和http://localhost/views是同源的。

我们平常所说的“跨域”其实就是指“发起不同源请求”，而这样的跨域请求会被浏览器阻止。

同源策略对保障互联网安全有着非常重要的作用，很多安全策略都是基于同源策略的。但是，这种同源策略会对前后端分离架构下的开发过程带来很大困扰。比如，即使是本地服务器，也没法和前端开发服务器运行在同一个端口上，这时候，跨域是必然的。而如果要让后端程序同时提供web服务，则很难发挥前端工具链的轻量级优势。那么，如何解决跨域问题呢？

如何解决跨域问题？

JSONP方式

最初用来解决跨域问题的方式，叫做JSONP，它的基本原理是：跨域的“资源嵌入”是被浏览器允许的。所以，可以通过一个script标签来嵌入一段来自其他服务器的脚本。由于这个脚本完全运行在当前域，无法访问第三方服务器的cookie等敏感信息，所以是安全的。

JSONP的缺点是它只能支持GET操作，没法支持POST等操作，但是由于兼容性好等优点，仍然有很多网站采用JSONP的方式公开自己的API供第三方调用。

在Angular中，$http内置了对JSONP的支持，它的调用接口也和其他方法没什么区别，使用起来非常简单。

反向代理方式

要想解决跨域问题，最简单彻底的方法当然是把他们拉到一个域下，而这就是该“反向代理”发挥作用的时候了。

所谓反向代理，就是在自己的域名下架设一个Web服务器，这个服务器会把请求转发给第三方服务器，然后把结果返回给客户端。

这时候，在客户端看来，自己就是在和这台反向代理服务器打交道，而不知道第三方服务器的存在。

所以，如果有一个Web服务程序，它同时提供了反向代理功能和静态文件服务功能，静态文件服务负责渲染前端页面，反向代理则提供对第三方服务器的透明访问。那么前端和后端就变成了同源的，不再受同源策略的约束。

那么，有这样的Web服务程序吗？有，而且不止一个。事实上，几乎所有的主流Web服务器都提供了反向代理功能。这里仅以nginx为例来示范反向代理的配置方式，其他Web服务器请搜相应的文档自行研究。

server {

listen 80;

server_name yourdomainname;

location / {

proxy_pass http://localhost:5000/; # 把根路径下的请求转发给前端工具链（如gulp）打开的开发服务器，如果是产品环境，则使用root等指令配置为静态文件服务器

}

location /api/ {

proxy_pass http://localhost:8080/service/; # 吧 /api 路径下的请求转发给真正的后端服务器

proxy_set_header Host $http_host;  # 把host头传过去，后端服务程序将收到yourdomainname，否则收到的是localhost:8080

proxy_cookie_path /api /service;   # 把cookie中的path部分从/api替换成/service

proxy_cookie_domain localhost:8080 yourdomainname; # 把cookie的path部分从localhost:8080替换成yourdomainname

}

}

注意最后这两句话，由于cookie中存在一个path机制，可以对同一个域下的不同子域进行区分。所以，如果后端所使用的路径是/service，而前端使用的路径是/api，那么前端将不能访问后端的cookie，这就导致登录等操作所写入的cookie无法正常传入传出，其表现则是登录始终没有效果。cookie的domain机制也是类似的原理。

现实中的后端服务器，使用path机制的很多，所以这项设置非常实用。

CORS方式

这是W3C提供的另一种跨域方式。作为一项标准的跨域规范，CORS本应该是最值得采用的。 问题在于，老式浏览器不支持CORS，而我们显然还没到可以无视老式浏览器的时候。 所以，只要有可能，就应该优先采用反向代理的方式。

CORS的原理是基于服务方授权的模式，也就是说提供服务的程序要主动通过CORS回应头来声明自己信任哪些源（协议+域名+端口）。 由于得到了服务方的授权，浏览器就可以放行来自这些域的请求了。

参考：http://wwwcnblogscom/mashch/articles/4261448html

https://developermozillaorg/zh-CN/docs/Web/HTTP/Access_control_CORS

http://wwwtuicoolcom/articles/3q2iaqb

前后台分离，nodeJS转发请求实现跨域访问 ：http://blogcsdnnet/u011783224/article/details/52214949

一、在前端开发过程中，如果准备开发富应用，跨域的问题将会随之而来。

        我们先看看什么是跨域呢：

         所谓跨域，或者异源，是指主机名（域名）、协议、端口号只要有其一不同，就为不同的域（或源） 。出于保护用户数据的目的，浏览器有一个最基本的策略就是同源策略，只允许页面内的脚本访问当前域的资源（加载脚本、资源等不受此限制）。

二、如果浏览器厂商不对跨域请求进行处理，会给我们带来什么危害呢？

        有心人士（病毒制造者）会利用这个漏洞进行如下攻击：

        1 CSRF/XSRF 攻击 ，简单的来讲就是在 bcom 页面中请求 acom 的接口（浏览器会自动带上 用户在 acom 的 cookie），从而获取用户的在 acom 的相关信息。

        2 XSS 注入攻击 ，类似于 SQL 攻击，提交含有恶意脚本的数据到服务器，从而达到破坏页面或者获取用户的 cookie。

三、我们了解到了什么是跨域，那我们又应该如何解决呢，现在找到了这些比较权威的文章，大家先品读一下：

        1 mozilla 官方网站关于跨域的文章（Cross Origin）， HTTP访问控制（CORS）

        2 mozilla 官方网站关于浏览器同源策略的简要介绍（Same Origin），  浏览器的同源策略

四、读完这些文章，你打算怎么处理跨域问题呢，我先谈谈自己关于跨域的解决方案：

        1 采用 CORS 协议，直接在 Nginx 中设置允许跨域的 header（也可以在后端的应用程序内设置，不过在 Nginx 入口配置的话更加统一），在 location 配置中直接使用指令 add_header（ 官方文档链接 ），示例配置如下：

        2 使用 JSONP，也是需要后端配合，利用“浏览器加载脚本、资源时不受同源策略的约束”这个特性，但是这种方式非常受限制，例如只能使用 GET 请求，不能携带自定义 header 等。

        3 其他的一些方法，例如 windowname, documentdomain 以及 HTML5 中的特性 windowpostMessage 等

五、其他参考链接

        1  浅谈JS跨域问题

        2 跨域资源共享 CORS 详解----阮一峰

六、声明

        现在网络上的知识非常复杂，有些是摘自权威书籍的，有些是作者自己理解然后记录下来的，有些是瞎掰的，所以一定要结合情况多多甄别，对于有权威文档的知识点，建议先参考文档。