Ajax请求跨域问题及其解决方案

本文介绍: 我们的传统请求，比如说超链接、form 表单，js 代码以及直接在浏览器地址栏上写请求地址都不存在跨域问题，能够从一个网站访问另外一个网站，但是我们的Aja x请求会存在跨域问题，其主要是为了解决跨域访问带来的安全隐患。因为浏览器中有一个内置对象XMLHTTPReques t。这个对象是每个网站不共享的，因此不能直接跨域，这样设计是合理的，因为一旦共享该对象，这个对象有一个 responseTes t 属性，那么你的网站就能通过该对象的这个属性拿到我的网站里面的信息，这是不安全的，因此Aja x不能直接跨域。

为什么Ajax请求默认不能跨域

我们的传统请求，比如说超链接、form 表单，js 代码以及直接在浏览器地址栏上写请求地址都不存在跨域问题，能够从一个网站访问另外一个网站，但是我们的Ajax请求会存在跨域问题，其主要是为了解决跨域访问带来的安全隐患。因为浏览器中有一个内置对象XMLHTTPRequest。这个对象是每个网站不共享的，因此不能直接跨域，这样设计是合理的，因为一旦共享该对象，这个对象有一个responseTest属性，那么你的网站就能通过该对象的这个属性拿到我的网站里面的信息，这是不安全的，因此Ajax不能直接跨域。下面是直接进行跨域访问浏览器给我们提示的错误。

Ac ce ss to XMLHttpRequest at ‘http://local host:8081/ajax/test01′ from origin ‘http://local host:8080′ ha s been blocked by CORS policy: No ‘Ac ce ss-Control-Allow-Or i gin‘ header is p resent on the requested resource.

浏览器的同源 策略

浏览器针对这个问题实施了“同源策略”，所谓的同源策略就是当协议、域名和端口号都相同的情况下才能访问，三者之中有一种不相同就不能访问。

Ajax请求跨域解决方案

1、设置 响应头

在访问的资源中设置响应头，标记为允许哪个域访问。具体设置代码如下：

response.setHeade r(“Ac ce ss-Control-Allow-Origin“,”http://local host:8080″);

上面这个方法中有两个参数，第一个参数就是上面浏览器报错信息中的一段，第二个参数是允许哪个域可以访问，也可以填*，表示所有的域都可以访问，但是这样不安全。不建议这样做。

2、JSONP

这种方式不是真正以上的Ajax请求，只不过也能达到页面的局部刷新效果。它的主要思想就是利用前端 script 标签中的src 属性，这个属性的值填需要跨域访问的资源路径，然后后端该路径的资源中响应回来一个函数，前端提前准备这个函数，那么当后端响应回来之后，前端就会调用这个函数，我们可以把一些操作放在这个函数里面。从这里可以看出JSONP只支持 get请求，不支持post请求。有局限性。下面是用jQue ry 封装的jsonp。