No 'Access-Control-Allow-Origin' header is present on the requested resource.'Ajax跨域访问解决方案

匿名 (未验证) 提交于 2019-12-03 00:22:01
No 'Access-Control-Allow-Origin' header is present on the requested resource.

当使用ajax访问远程服务器时,请求失败,浏览器报如上错误。这是出于安全的考虑,默认禁止跨域访问导致的。

一、什么是跨域访问

举个栗子:在A网站中,我们希望使用Ajax来获得B网站中的特定内容。如果A网站与B网站不在同一个域中,那么就出现了跨域访问问题。你可以理解为两个域名之间不能跨过域名来发送请求或者请求数据,否则就是不安全的。跨域访问违反了同源策略,同源策略的详细信息可以点击如下链接:Same-origin_policy
总而言之,同源策略规定,浏览器的ajax只能访问跟它的HTML页面同源(相同域名或IP)的资源。

二、解决方案

常用的解决方案有两种,可以分为客户端解决方案和服务器端解决方案。先说服务器端解决方案:



  • response.setHeader("Access-Control-Allow-Origin", "*");

    很显然,这种方式对非网站拥有人员来说是不能做到的。而且此种方式很容易受到CSRF攻击。

  • 客户端解决方案

$(function($){       var url = 'http://*****/index';       $.ajax(url, {         data: {           'cityname': '成都',           'date': '2016.12.12'         },         dataType: 'jsonp',         crossDomain: true,         success: function(data) {           if(data && data.resultcode == '200'){             console.log(data.result.today);           }         }       });

将ajax请求中的dataType属性设置为“jsonp”,jsonp是专门用来解决跨域访问而诞生的。

从服务器端和前端两个角度更加详细的讲解以及完整实例请参看博客:从前端和后端两个角度分析jsonp跨域访问(完整实例)

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!