我正在尝试使用下面的代码与REST API进行连接。我认为问题出在CORS,因为控制台中的消息都在写它。当我添加request.withCredentials时,我在控制台中收到有关CORS的消息。
我安装了chrome的Allow-Control-Allow-Origin扩展程序。 此扩展程序无济于事。
现在有人将如何解决此问题或避免CORS?也许代码有问题?
错误消息:
在以下位置访问XMLHttpRequest 'https://sinsmbe1.insepa.net:20106/m3api-rest/execute/CRS610MI/LstByNumber;maxrecs=100;returncols=CUNO,STAT?CUNO=10000' 来自原点“ null”的数据已被CORS政策阻止:否 请求中存在“ Access-Control-Allow-Origin”标头 资源。
从以下位置获取JSON时发生错误 https://sinsmbe1.insepa.net:20106/m3api-rest/execute/CRS610MI/LstByNumber;maxrecs=100;returncols=CUNO,STAT?CUNO=10000
start1();
function start1() {
var userid = 'username';
var password = 'password';
var MAXRECS = 100;
var returnCols = 'CUNO';
var STAT = 10000;
let dropdown = document.getElementById('m3');
dropdown.length = 0;
let defaultOption = document.createElement('option');
defaultOption.text = 'Select product number';
dropdown.add(defaultOption);
dropdown.selectedIndex = 0;
var url = 'https://sinsmbe1.insepa.net:20106/m3api-rest/execute/CRS610MI/LstByNumber';
url += ';maxrecs=' + encodeURIComponent(MAXRECS);
url += ';returncols=' + encodeURIComponent(returnCols);
url += ',STAT?CUNO=' + encodeURIComponent(STAT);
console.log(url);
const request = new XMLHttpRequest();
console.log("0 " + request);
request.open('GET', url, [true, userid, password]);
console.log("1 " + request);
request.setRequestHeader('Accept', 'application/json');
console.log("2 " + request.setRequestHeader);
request.withCredentials = true;
console.log("3 " + request.withCredentials);
request.onload = function() {
if (request.status === 200) {
const data = JSON.parse(request.responseText);
let option;
for (let i = 0; i < data.length; i++) {
option = document.createElement('option');
option.text = data[i].Program;
option.value = data[i].Program;
dropdown.add(option);
}
} else {
// Reached the server, but it returned an error
}
}
request.onerror = function() {
console.error('An error occurred fetching the JSON from ' + url);
};
request.send();
}
.fieldSelect {
width: 300px;
padding: 4px 8px;
margin: 4px 0 8px 0;
display: inline-block;
border: 1px solid #dcdee1;
border-radius: 4px;
box-sizing: border-box;
}
.fieldSelect1 {
width: 300px;
padding: 4px 8px;
margin: 4px 0;
display: inline-block;
border: 1px solid #dcdee1;
border-radius: 4px;
box-sizing: border-box;
}
.btn-download {
margin: 1rem 0 0 0;
width: 300px;
background-color: #408a9a;
color: #fff;
border: none;
cursor: pointer;
transition: 0.3s;
}
.btn-download:hover {
color: #000;
opacity: 0.6;
font-style: border;
}
<div>
<select name="m3--rawMaterial" id="m3" class="fieldSelect1">
</select>
<button class="btn-download">
<p>click me</p>
</button>
</div>