前端jsp fetch跨域调用 is not allowed by Access-Control-Allow-Origin.
之前我在用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.的更多相关文章
- 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: ...
- ajax——CORS跨域调用REST API 的常见问题以及前后端的设置
RESTful架构是目前比较流行的一种互联网软件架构,在此架构之下的浏览器前端和手机端能共用后端接口. 但是涉及到js跨域调用接口总是很头疼,下边就跟着chrome的报错信息一起来解决一下. 假设:前 ...
- 跨域调用webapi
web端跨域调用webapi 在做Web开发中,常常会遇到跨域的问题,到目前为止,已经有非常多的跨域解决方案. 通过自己的研究以及在网上看了一些大神的博客,写了一个Demo 首先新建一个webap ...
- 跨域调用webapi web端跨域调用webapi
web端跨域调用webapi 在做Web开发中,常常会遇到跨域的问题,到目前为止,已经有非常多的跨域解决方案. 通过自己的研究以及在网上看了一些大神的博客,写了一个Demo 首先新建一个webap ...
- web端跨域调用webapi
在做Web开发中,常常会遇到跨域的问题,到目前为止,已经有非常多的跨域解决方案. 通过自己的研究以及在网上看了一些大神的博客,写了一个Demo 首先新建一个webapi的程序,如下图所示: 由于微软已 ...
- AJAX跨域调用相关知识-CORS和JSONP(引)
AJAX跨域调用相关知识-CORS和JSONP 1.什么是跨域 跨域问题产生的原因,是由于浏览器的安全机制,JS只能访问与所在页面同一个域(相同协议.域名.端口)的内容. 但是我们项目开发过程中,经常 ...
- jquery ajax jsonp跨域调用实例代码
今天研究了AJAX使用JSONP进行跨域调用的方法,发现使用GET方式和POST方式都可以进行跨域调用,这里简单分享下,方便需要的朋友 客户端代码 复制代码 代码如下: <%@ Page Lan ...
- 【天坑】ASP.net WebAPI跨域调用问题
最近在做一个项目,前端是VUE,后端是WebAPI,业务也就是一些实体的增删改查.在项目开始的时候我就预计到有跨域的问题,所以也找了一下资料,在Web.Config里面加上了配置信息: <htt ...
- Jquery的跨域调用
JQuery1.2后getJSON方法支持跨域读取json数据,原理是利用一个叫做jsonp的概念.当然,究其本质还是通过script标签动态加载js,似乎这是实现真正跨域的唯一方法. getJSON ...
随机推荐
- python实现队列结构
# -*- coding:utf-8 -*- # __author__ :kusy # __content__:文件说明 # __date__:2018/10/8 13:49 class MyQueu ...
- [转帖]华为PC端台式机电脑来啦!自研主板及自研CPU处理器
华为PC端台式机电脑来啦!自研主板及自研CPU处理器 在性能上,4核版相当于酷睿i5 ,8核版相当于酷睿i5 8300H. https://www.bilibili.com/read/cv376376 ...
- C语言有关文件编辑的函数
fopen()函数 函数作用 用来打开一个文件 头文件 #include <stdio.h> 用法 FILE *fopen(char *filename, *type); TYPES &q ...
- [Atcoder AGC029C]Lexicographic constraints
题目大意:给定$n$个字符串的长度$a_i$,问至少用几种字符可以构造出字符串$s_1\sim s_n$,满足$|s_i|=a_i$且$s_1<s_2<\cdots<s_n$. $ ...
- 「UNR#1」奇怪的线段树
「UNR#1」奇怪的线段树 一道好题,感觉解法非常自然. 首先我们只需要考虑一次染色最下面被包含的那些区间,因为把无解判掉以后只要染了一个节点,它的祖先也一定被染了.然后发现一次染色最下面的那些区间一 ...
- SQL系列(一)—— SQL简介
在说到SQL之前需要了解一些关于数据库的概念: 数据库(database):是一个以某种有组织的方式存储的数据集合.存储数据的仓库,不过是以一定的组织方式进行存储. DBMS:数据库管理系统.经常遇到 ...
- python中 jsonchema 与 shema 效率比较
前面几篇文章总结了python中jsonschema与schema的用法,这里测试一下两者的效率: 上代码: import time from jsonschema import validate, ...
- Git新建分支,分支合并,版本回退详解
一.git基本命令 git拉取仓库代码 #拉取master代码 git clone git仓库地址 #拉取分支代码 git clone -b 分支名称 git仓库地址 2.git添加代码到本地仓库 g ...
- 用Java访问带有Kerberos认证的HBase
程序代码实例如下: package com.hbasedemo; import java.io.IOException; import org.apache.hadoop.conf.Config ...
- scp 基本用法(提高scp传输速度)
Outline spc 可以帮你实现: Linux Server 之间互传数据: Linux Server 和 Windows Server 之间互传数据: 参考: https://www.cnblo ...