Question

我正在尝试使用下面的代码与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>

该代码如何与API建立连接以避免CORS？

0 个答案: