之前我在用json跨域调用时,遇到如图问题,后来查查是官方json不支持跨域调用,后来改用非官方的jsonp跨域调用后台方法,出现如下问题

Origin http://127.0.0.1:8080 is not allowed by Access-Control-Allow-Origin.

后来在服务器端加上这样一句话,问题解决。

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

后来google浏览器控制台出现这样的错误提示:

前端没有接成功收到,一看控制台访问的链接请求后有返回值,值也是正确的。因为后端的java代码是其他官方提供的,不能动。只能在前端做修改。

最后决定用fetch,直接上代码:

   <script type="text/javascript">
var kuaiDiArr;
var htmlDIV;
var kuaiDiHistoryArr;
function sendQuery(url, postData) {
let formData = new FormData();
for(var key in postData) {
formData.append(key, postData.key);
} return fetch(url, {
body: formData,
headers: {
'Accept': '*/*'
},
method: 'post'
});
} function zuizongbt(){
var expressNum=$('#expressNum').val();
console.log(expressNum);
if(expressNum=='undifined'|| expressNum==''){
$("#kuaiDiDIV").html('<div style="margin-left: 17px;font-size: 16.3px;">请输入运单号/货单号</div>');
}else if(expressNum=='undifined'|| expressNum==''){
$("#kuaiDiDIV").html('<div style="margin-left: 17px;font-size: 16.3px;">请输入正确格式运单号/货单号</div>');
}else{
sendQuery('http://XX.XX.XX.XX:8086/K9/trackInfo.do?billCodes='+expressNum+'&company=货链派网站', {billCodesp: '201806210003',companyp: '货链派网站'}).then(function(response) {
//do something with response
kuaiDiHistoryArr=kuaiDiArr;
kuaiDiArr=response; response.json().then(function(data){
if(data.success==true){
var kuaiDiArr=data.data[expressNum];
htmlDIV='<div style="margin-left: 17px;font-size: 16.3px;">物流跟踪:<div style="margin-left: 88px;margin-top: -33px;">';
if(kuaiDiArr.length==0){
htmlDIV+=':( 该单号暂无物流进展,请稍后再试,或检查公司和单号是否有误。';
}
for(x in kuaiDiArr){
htmlDIV+='<span>'+kuaiDiArr[x].scanDate+'</span><span> </span><span>'+kuaiDiArr[x].content+'</span><br/>';
}
htmlDIV+='</div></div>';
$("#kuaiDiDIV").html(htmlDIV);
}else{
var msg=data.msg;
htmlDIV='<div style="margin-left: 17px;font-size: 16.3px;">'+msg+'';
$("#kuaiDiDIV").html(htmlDIV);
} });
});
} } </script>

成功显示:

兼容性方面目前只支持下面绿色版本的浏览器访问:

前端jsp fetch跨域调用 is not allowed by Access-Control-Allow-Origin.的更多相关文章

  1. ajax post上传数据时,前端出现的跨域权限问题:ccess to XMLHttpRequest at ‘’rom origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok st

    本人前端使用多个框架时,jq  ajax传参出现如下报错: 最后发现,可能是xhr的相关默认参数被修改了.顾使用jq 传参时,一直报错,jq  ajax额外添加的关键参数: crossDomain: ...

  2. ajax——CORS跨域调用REST API 的常见问题以及前后端的设置

    RESTful架构是目前比较流行的一种互联网软件架构,在此架构之下的浏览器前端和手机端能共用后端接口. 但是涉及到js跨域调用接口总是很头疼,下边就跟着chrome的报错信息一起来解决一下. 假设:前 ...

  3. 跨域调用webapi

    web端跨域调用webapi   在做Web开发中,常常会遇到跨域的问题,到目前为止,已经有非常多的跨域解决方案. 通过自己的研究以及在网上看了一些大神的博客,写了一个Demo 首先新建一个webap ...

  4. 跨域调用webapi web端跨域调用webapi

    web端跨域调用webapi   在做Web开发中,常常会遇到跨域的问题,到目前为止,已经有非常多的跨域解决方案. 通过自己的研究以及在网上看了一些大神的博客,写了一个Demo 首先新建一个webap ...

  5. web端跨域调用webapi

    在做Web开发中,常常会遇到跨域的问题,到目前为止,已经有非常多的跨域解决方案. 通过自己的研究以及在网上看了一些大神的博客,写了一个Demo 首先新建一个webapi的程序,如下图所示: 由于微软已 ...

  6. AJAX跨域调用相关知识-CORS和JSONP(引)

    AJAX跨域调用相关知识-CORS和JSONP 1.什么是跨域 跨域问题产生的原因,是由于浏览器的安全机制,JS只能访问与所在页面同一个域(相同协议.域名.端口)的内容. 但是我们项目开发过程中,经常 ...

  7. jquery ajax jsonp跨域调用实例代码

    今天研究了AJAX使用JSONP进行跨域调用的方法,发现使用GET方式和POST方式都可以进行跨域调用,这里简单分享下,方便需要的朋友 客户端代码 复制代码 代码如下: <%@ Page Lan ...

  8. 【天坑】ASP.net WebAPI跨域调用问题

    最近在做一个项目,前端是VUE,后端是WebAPI,业务也就是一些实体的增删改查.在项目开始的时候我就预计到有跨域的问题,所以也找了一下资料,在Web.Config里面加上了配置信息: <htt ...

  9. Jquery的跨域调用

    JQuery1.2后getJSON方法支持跨域读取json数据,原理是利用一个叫做jsonp的概念.当然,究其本质还是通过script标签动态加载js,似乎这是实现真正跨域的唯一方法. getJSON ...

随机推荐

  1. 解决ajax跨域请求问题

    自己做网站的时候,经常遇到跨域问题,下面是平时多次实践总结出的解决方法,大家有什么更好的思路,可以相互交流下~ XMLHttpRequest cannot load http://www.imooc. ...

  2. 动态代理(二)—— CGLIB代理原理

    前篇文章动态代理(一)--JDK中的动态代理中详细介绍了JDK动态代理的Demo实现,api介绍,原理详解.这篇文章继续讨论Java中的动态代理,并提及了Java中动态代理的几种实现方式.这里继续介绍 ...

  3. 分享大麦UWP版本开发历程-01.响应式轮播顶部焦点图

    话说有一天,临近下班无心工作,在网上看各种文章,阅读到了一篇名为<聊聊大麦网UWP版的首页顶部图片联动效果的实现方法>(传递:http://www.cnblogs.com/hippieZh ...

  4. windows2008 开启SNMP服务

    现在很多企业和公司管理服务器时都是通过网络监控软件对服务器的状态进行监控,在监控的时候大多是通过SNMP协议(简单网络管理协议)进行的,那么在我们的服务器端就需要开启此项服务,并进行简单的设置. 以下 ...

  5. C#表达式参数解析算法,N级属性调用,函数值,变量值,常量值

    public static object GetValue(Expression expression) { var names = new Stack<string>(); var ex ...

  6. JavaScript入门(二)

    JavaScript入门—操作DOM树 要点 DOM树是一个树形结构,操作DOM树通常是“更新.遍历.新增.删除”. 更新DOM树 拿到DOM节点 var id=document.getElement ...

  7. 2019 创蓝253java面试笔试题 (含面试题解析)

      本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.创蓝253等公司offer,岗位是Java后端开发,因为发展原因最终选择去了创蓝253,入职一年时间了,也成为 ...

  8. CentOS7下载配置PostgreSQL的pgAgent运行代理作业

    1.安装PostgreSQL 参考官方文档https://www.postgresql.org/download/linux/redhat/,运行如下命令 yum install https://do ...

  9. Springboot vue.js html 跨域 前后分离 Activiti6 shiro 权限

    官网:www.fhadmin.org 特别注意: Springboot 工作流  前后分离 + 跨域 版本 (权限控制到菜单和按钮) 后台框架:springboot2.1.2+ activiti6.0 ...

  10. hello world之vivado程序解决方法

    体验米尔zynq系列Z-turn Board单板时,我开始用vivado.在安装vivad工程中出了一些问题,经过不懈的重新安装,终于成功了. 下面分享我用vivado设计hello world程序: ...