之前我在用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. Docker从入门到实践(3)

    三.安装 Docker Docker 分为 CE 和 EE 两大版本.CE 即社区版(免费,支持周期 7 个月),EE 即企业版,强调安全,付费使用,支持周期 24 个月. Docker CE 分为  ...

  2. JAVA WEB项目目录结构以及web应用部署的根目录,编译路径和项目根目录的区别

    本文链接:https://blog.csdn.net/l00149133/article/details/78984083 web应用部署的根目录,编译路径和项目的根目录有什么区别? 直接上例子: 你 ...

  3. 最细的eclipse 安装maven踩过的坑

    Eclipse安装maven插件踩过的坑 在线安装maven eclipse安装maven插件,在网上有各种各样的方法,博主使用过的也不止一种,但是留下的印象总是时好时不好,同样的方法也不确定那一次能 ...

  4. windows 批处理命令

    关机: shutdown -s -t 1 ::-t后面添加时间,表示多少秒之后关机, 删除文件夹以及子文件: rd file2 /s/q  ::/s 删除子文件 /q不需要确认 新建文件夹: md f ...

  5. HTTP协议随笔

    代理 代理就是处在客户端和服务端之间的服务器.客户端例如浏览器发送GET请求时,代理服务器接收该请求,并转发该请求至服务所在的服务器.服务器回复的数据和资源在第一时间经过代理服务器,才能回传到浏览器, ...

  6. 整理:WPF用于绑定命令和触发路由事件的自定义控件写法

    原文:整理:WPF用于绑定命令和触发路由事件的自定义控件写法 目的:自定义一个控件,当点击按钮是触发到ViewModel(业务逻辑部分)和Xaml路由事件(页面逻辑部分) 自定义控件增加IComman ...

  7. 上传文件时用form.submit提交的时候在低版本的IE中报拒绝访问的错误

    上传文件的时候,在IE7下总是传不了,但FireFox,IE11和Chrome下则可以上传.发现是form.submit();时出错了(“拒绝访问”). html代码为: <label oncl ...

  8. .NET Core MD5加密 32位和16位

    public class MD5Help { //此代码示例通过创建哈希字符串适用于任何 MD5 哈希函数 (在任何平台) 上创建 32 个字符的十六进制格式哈希字符串官网案例改编 /// <s ...

  9. systemd - CentOS 7进程守护&监控

    需求: 运行环境为CentOS 7系统,我们开发了一个程序,需要在开机时启动它,当程序进程crash或者开机之后,守护进程立即拉起进程. 解决方案: 使用CentOS 7中的init进程systemd ...

  10. 拷贝 vs 赋值

    其实我只要关注两个动作就够了: 拷贝.赋值=            (而构造.析构的步骤都是没疑问的.) ——>   赋值=  都是显式调用的, 而拷贝构造可以显示调,也可能隐式被调. 下图错误 ...