之前我在用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. 新添加的用户无法sudo解决方案

    问题:xxx(用户名) is not in the sudoers file. This incident will be reported. 用户管理: 1.创建用户 (1)方法1 $ sudo a ...

  2. python实现双向循环链表

    参考https://www.cnblogs.com/symkmk123/p/9693872.html#4080149 # -*- coding:utf-8 -*- # __author__ :kusy ...

  3. JavaSE 面试题: 成员变量与局部变量

    JavaSE 面试题 成员变量与局部变量 public class Test { static int s; int i; int j; { int i = 1; i++; j++; s++; } p ...

  4. jmeter通过BeanShell,实现对接口参数HmacSHA256加密(转)

    jmeter通过BeanShell,实现对接口参数HmacSHA256加密2019-04-29 05:10 ps. 最近抓包网站的登陆请求,发现就2个参数,用户名和密码,通过工具去请求这个接口,一直返 ...

  5. Mysql 命令 load data infile 权限问题

    [1]Mysql命令load data infile 执行权限问题 工作中,经常会遇到往线上环境mysql数据库批量导入源数据的场景. 针对这个场景问题,mysql有一个很高效的命令:load dat ...

  6. python解决使用镜像源来安装包

    一.问题在进行python包安装的时候出现一个问题就是无法进行安装,且出现了如下的错误 报错代码 Retrying (Retry(total=4, connect=None, read=None, r ...

  7. 【java】java 读写文件

    场景:JDK8  将上传的文件,保存到服务器 Java读写文件操作: MultipartFile file InputStream inputStream = file.getInputStream( ...

  8. python函数对变量的作用及遵循的原则

    1.全局变量和局部变量 全局变量:指在函数之外定义的变量,一般没有缩进,在程序执行的全过程有效 局部变量:指在函数内部使用的变量,仅在函数内部有效,当函数退出时变量将不存在 例如: n=1 #n是全局 ...

  9. CLR学习之初识CLR

    一.什么是CLR? CLR即公共语言运行时(Common Language Runtime,简称CRL),就是微软为.net产品构建的运行环境,与java的JVM类似,通俗的讲就是.net虚拟机.CL ...

  10. Java自学-数字与字符串 MyStringBuffer

    自己开发一个Java StringBuffer 根据接口IStringBuffer ,自己做一个MyStringBuffer 步骤 1 : IStringBuffer接口 package charac ...