Vue报错笔记(2):No 'Access-Control-Allow-Origin' header is present on the requested resou

2017-10-12 19:26:44来源:CSDN作者:niexia_人点击

分享

这里写图片描述

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

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

2. 解决

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

  • 客户端
$(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”

  • 服务器端
    在服务器端的filter或者servlet里面添加
response.setHeader("Access-Control-Allow-Origin", "*"); 

“Access-Control-Allow-Origin”表示允许跨域访问,“*”表示允许所有来源进行跨域访问,这里也可以替换为特定的域名或ip。
很显然,这种方式对非网站拥有人员来说是不能做到的。而且此种方式很容易受到CSRF攻击。


原文链接

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台