- ·上一篇文章:jQuery瀑布流插件 Masonry
- ·下一篇文章:HTML5 head 头标签使用大全
当前位置:K88软件开发 → 文章中心 → 编程语言 → JavaScript → JS01 → 文章内容
No ‘Access-Control-Allow-Origin’ header is present on the requested resource.’Ajax跨域访问解决方案
-->
1 No 'Access-Control-Allow-Origin' header <span class="hljs-keyword">is</span> present <span class="hljs-function_start"><span class="hljs-keyword">on</span></span> <span class="hljs-keyword">the</span> requested resource.
当使用ajax访问远程服务器时,请求失败,浏览器报如上错误。这是出于安全的考虑,默认禁止跨域访问导致的。
一、什么是跨域访问
举个栗子:在A网站中,我们希望使用Ajax来获得B网站中的特定内容。如果A网站与B网站不在同一个域中,那么就出现了跨域访问问题。你可以理解为两个域名之间不能跨过域名来发送请求或者请求数据,否则就是不安全的。跨域访问违反了同源策略
总而言之,同源策略规定,浏览器的ajax只能访问跟它的HTML页面同源(相同域名或IP)的资源。
二、解决方案
常用的解决方案有两种,可以分为客户端解决方案和服务器端解决方案。先说服务器端解决方案:
- 服务器端解决方案
在服务器端的filter或者servlet里面添加1response.setHeader("Access-Control-Allow-Origin", "*");“Access-Control-Allow-Origin”表示允许跨域访问,“*”表示允许所有来源进行跨域访问,这里也可以替换为特定的域名或ip。
很显然,这种方式对非网站拥有人员来说是不能做到的。而且此种方式很容易受到CSRF攻击。 - 客户端解决方案
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 $(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">($)</span>{</span>
<span class="hljs-keyword">var</span> url = <span class="hljs-string">'http://*****/index'</span>;
$.ajax(url, {
data: {
<span class="hljs-string">'cityname'</span>: <span class="hljs-string">'成都'</span>,
<span class="hljs-string">'date'</span>: <span class="hljs-string">'2016.12.12'</span>
},
dataType: <span class="hljs-string">'jsonp'</span>,
crossDomain: <span class="hljs-literal">true</span>,
success: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(data)</span> {</span>
<span class="hljs-keyword">if</span>(data && data.resultcode == <span class="hljs-string">'200'</span>){
console.log(data.result.today);
}
}
});
将ajax请求中的dataType属性设置为“jsonp”,jsonp是专门用来解决跨域访问而诞生的。
No ‘Access-Control-Allow-Origin’ header is present on the requested resource.’Ajax跨域访问解决方案