Firebug: 已拦截跨源请求:同源策略禁止读取位于XXX的远程资源。(原因:CORS 头缺少 'Access-Control-Allow-
第一种,就是在被请求的程序中添加HTTP头,即CORS跨域(跨域资源共享,Cross-Origin Resource Sharing)
如: Response.Headers.Add("Access-Control-Allow-Origin", "*");
// JSON
{
'Access-Control-Allow-Origin': '*',
}
// HTML
<meta http-equiv="Access-Control-Allow-Origin" content="*">
// PHP
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
添加此段代码的目的很简单,也就是告诉浏览器,这个资源是运行远程所有域名访问的。当然,此处的也可以替换为指定的域名,出于安全考虑,建议将替换成指定的域名。
由于IE10以下浏览器不支持CORS,所以目前在国内CORS并不是主流的跨域解决方案,但是随着windows 10的发布,IE的逐渐衰落,可以预见,在不远的将来CORS将成为跨域的标准解决方案。
第二种,就是在被请求的服务器上,添加HTTP响应头。在这里,我们就以IIS6.0为例:
//在被请求的网站上,设置HTTP头,添加
"Access-Control-Allow-Origin:*" //值为*或指定的域名。
第三种,就是在被请求的服务器上在被请求的项目根目录(root下)下放以下文件 :
crossdomain.xml
<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "./cross-domain-policy.dtd">
<cross-domain-policy> <site-control permitted-cross-domain-policies="all" />
<allow-access-from domain="*" />
<allow-http-request-headers-from domain="*" headers="*"/>
</cross-domain-policy>
cross-domain-policy.dtd
<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- Adobe DTD for cross-domain policy files -->
<!-- Copyright (c) 2008-2009, Adobe Systems Inc. -->
<!ELEMENT cross-domain-policy (site-control?,allow-access-from*,allow-http-request-headers-from*,allow-access-from-identity*)>
<!ELEMENT site-control EMPTY>
<!ATTLIST site-control permitted-cross-domain-policies (all|by-content-type|by-ftp-filename|master-only|none) #REQUIRED>
<!ELEMENT allow-access-from EMPTY>
<!ATTLIST allow-access-from domain CDATA #REQUIRED>
<!ATTLIST allow-access-from to-ports CDATA #IMPLIED>
<!ATTLIST allow-access-from secure (true|false) "true">
<!ELEMENT allow-http-request-headers-from EMPTY>
<!ATTLIST allow-http-request-headers-from domain CDATA #REQUIRED>
<!ATTLIST allow-http-request-headers-from headers CDATA #REQUIRED>
<!ATTLIST allow-http-request-headers-from secure (true|false) "true">
<!ELEMENT allow-access-from-identity (signatory)>
<!ELEMENT signatory (certificate)>
<!ELEMENT certificate EMPTY>
<!ATTLIST certificate fingerprint CDATA #REQUIRED>
<!ATTLIST certificate fingerprint-algorithm CDATA #REQUIRED>
<!-- End of file. -->
第四种,使用JSONP格式
即在jQuery中ajax请求参数dataType:’JSONP’:
<script>
$.ajax({
url:"http://map.oicqzone.com/gpsApi.php?lat=22.502412986242&lng=113.93832783228",
type:'GET',
dataType:'JSONP', // 处理Ajax跨域问题
success: function(data){
$('body').append( "Name: " + data );
}
});
</script>
或者:
<script type="text/javascript">
function jsonpCallback(result){
alert(result[1].name);
}
</script>
<script type="text/javascript"src="http://localhost:8080/Jsonp/jsonp.jsp?callback=jsonpCallback"></script>
或者jquery代码:
<script type="text/javascript">
$.getJSON("http://localhost:8080/Jsonp/jsonp.jsp?callback=?", function(json){
alert(json[0].name);
});
</script>
后台jsonp.jsp代码:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String callback = request.getParameter("callback");
out.print(callback+"([ { name:'John',age:'19'},{ name:'joe',age:'20'}] );");
out.print(callback);
%>
或者servlet
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/Jsonp")
public class Jsonp extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String jsonp=request.getParameter("jsonpcallback");
response.setContentType("text/html;charset=UTF-8");
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
out.write(jsonp + "0;null");
out.close();
}
@Override
public void init(ServletConfig config) throws ServletException {
super.init(config);
}
}
ajax请求的参数:jsonp
类型:String
在一个 jsonp 请求中重写回调函数的名字。这个值用来替代在 “callback=?” 这种 GET 或 POST 请求中 URL 参数里的 “callback” 部分,比如 {jsonp:’onJsonPLoad’} 会导致将 “onJsonPLoad=?” 传给服务器。
ajax请求的参数:jsonpCallback
类型:String
为 jsonp 请求指定一个回调函数名。这个值将用来取代 jQuery 自动生成的随机函数名。这主要用来让 jQuery 生成度独特的函数名,这样管理请求更容易,也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存 GET 请求的时候,指定这个回调函数名。
注意内容:
1、Ajax请求需要设置请求类型为Jsonp
dataType: “jsonp”
2、Ajax请求需要设置回调函数,当前函数值必须与服务器响应包含的callback名称相同
jsonpCallback:”fn”
3、Ajax请求可以设置jsonp(可选),传递给请求处理程序或页面,用以获得jsonp回调函数名的参数名,默认为:callback
jsonp: “callback”
4、服务端返回Json数据必须使用jsonpCallback设置的值进行包裹
return “fn(“+JsonUtil.objectToJson(outPut)+”)”
第五种,使用Html5中新引进的window.postMessage方法来跨域传送数据
CORS与JSONP相比,更为先进、方便和可靠。
1、 JSONP只能实现GET请求,而CORS支持所有类型的HTTP请求。
2、 使用CORS,开发者可以使用普通的XMLHttpRequest发起请求和获得数据,比起JSONP有更好的错误处理。
3、 JSONP主要被老的浏览器支持,它们往往不支持CORS,而绝大多数现代浏览器都已经支持了CORS。
对一个简单的请求,没有自定义头部,要么使用GET,要么使用POST,它的主体是text/plain,请求用一个名叫Orgin的额外的头部发送。Origin头部包含请求页面的头部(协议,域名,端口),这样服务器可以很容易的决定它是否应该提供响应。
服务器端对于CORS的支持,主要就是通过设置Access-Control-Allow-Origin来进行的。
Header set Access-Control-Allow-Origin *
为了防止XSS攻击我们的服务器, 我们可以限制域,比如: Access-Control-Allow-Origin: http://blog.csdn.net
很多服务都已经提供了CORS支持,比如 AWS 支持跨域资源分享功能CORS,向S3上传不需要代理。
上线后最好把
Access-Control-Allow-Origin: *的 * 改为允许访问的特定域名
header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods:HEAD,GET,POST,OPTIONS,PATCH,PUT,DELETE');
header('Access-Control-Allow-Headers:Origin,X-Requested-With,Authorization,Content-Type,Accept,Z-Key')
转自:https://blog.csdn.net/xlxxcc/article/details/54588571
Firebug: 已拦截跨源请求:同源策略禁止读取位于XXX的远程资源。(原因:CORS 头缺少 'Access-Control-Allow-的更多相关文章
- 已拦截跨源请求:同源策略禁止读取位于XXX的远程资源。(原因:CORS 头缺少 'Access-Control-Allow-Origin'
vue+springboot项目 前端发送请求微信 URL:http:/.........(企业微信的路径) 请求成功,数据发送过去可以接收到,处理完毕后发送返回值给我 我这边前端网络响应处可以看到返 ...
- ArcGIS Server API for JavaScript调用错误:已阻止跨源请求:同源策略禁止读取位于......
已阻止跨源请求:同源策略禁止读取位于 http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapSe ...
- Ajax跨域请求 同源策略与Jsonp
同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上的 ...
- 跨域访问 - 跨域请求 同源策略概念对跨域请求的影响 及几种解决跨域请求的方法如 jsonp
为什么会设置同源策略 > 适用于浏览器的一种资源访问策略 > 同源策略(Same origin policy)是一种约定,它是浏览器最核 心也最 基本的安全功能,如果缺少了同源策略,则浏览 ...
- Django之跨域请求同源策略
同源策略: 首先基于安全的原因,浏览器是存在同源策略这个机制的,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性. 而如果我们要跳过这个策略,也就是说非要跨域请求,那么就需要通过 ...
- 如何解决 ajax跨域被阻止 CORS 头缺少 'Access-Control-Allow-Origin'的问题?
已拦截跨源请求:同源策略禁止读取位于 http://192.168.1.72:8080/securityMonitor_TV/service/getTest 的远程资源. (原因:CORS 头缺少 ' ...
- js ajax跨域被阻止 CORS 头缺少 'Access-Control-Allow-Origin'(转)
今天ajax请求域名的时候出现 已阻止跨源请求:同源策略禁止读取位于 http://www.zuimeimami.com*****的远程资源.(原因:CORS 头缺少 'Access-Control- ...
- get请求被浏览器跨域的同源策略请求机制拦截,但是get请求是否请求到了服务器呢
浏览器会拦截跨域请求,但是只是拦截返回结果,请求还是会被发送到服务器. 请求因为跨域被拦截后,会改成 OPTIONS 请求送达服务器,这样服务器就可以知道有人在请求.
- ajax异步请求/同源策略/跨域传值
基本概念 Ajax 全称是异步的 JavaScript 和 XML . 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进 ...
随机推荐
- img添加预加载图片
< img src="images/logo.png" onerror="javascript:this.src='images/logoError.png';&q ...
- iOS进阶之正则表达式
最近一直在弄正则表达式,于是在这里整理一下,便于日后查阅. 1.常用符号 ^:字符串的开始 $:字符串的结束 *:表示零个或若干个 ?:表示零个或一个 +:表示一个或若干个 | :表示 或 操作 . ...
- Centos7配置SVN服务端
环境 Centos 7 SVN 1.7 安装SVN Shell> yum install subversion -y 准备配置和仓库 Shell> mkdir -p /mydata/rep ...
- CSS3之calc()和box-sizing属性
box-sizing 属性 规定两个并排的带边框的框: 例子: box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素. 例如,假如您需要并排放置两个带边框的框,可通过将 box-si ...
- CImage的坑
1.现象 在栈上定义CImage,加载本地图片,在界面上显示,报内存异常,访问失败 2.结论 图片过大,会是CImage产生这种问题 3.解决 把CImage定义到堆上,回收内存 new Load D ...
- 【POJ 1179】Polygon
[原题链接]传送门 [题解思路] 1.第一感觉没有其他做法,想到动态规划,去环,区间dp 2.f[l,r]表示[l,r]内的最大值,考虑转移 3.最大值分加法和乘法,其中乘法不一定由两个要求合并的区间 ...
- Bytom Kit开发辅助工具介绍
Bytom Kit是一款为了帮助开发者更简单地理解Bytom的开发辅助工具,集合了校验.标注.解码.测试水龙头等功能. 该工具用python语言封装了一套比原的API和7个工具方法,如果有开发需求可以 ...
- JS的Date对象、Math、包装类
Date对象 在JS使用Date对象来表示时间 当前时间 var d = new Date(); 指定时间 格式:月/日/年 时:分:秒 var e = new Date("02/16/ ...
- 移动质量(MQ)测试系列
移动质量(MQ)测试 向移动开发者提供专业.稳定.全面.高价值的自动化测试平台. 发现 APP 中的各类隐患,包括 APP 崩溃.各类兼容性.功能性.性能问题等等. MQ 的 5 大功能(兼容性测试. ...
- Antd-Pro2.0版本如何修改代理,让Mock变为真实服务器接口
Antd-pro2.0之前更改代理方式 更改.roadhogrc.mock.js export default { 'GET /api/*': 'http://localhost:8001/', 'P ...