javascript - 从 HTML 页面发起 CORS 请求

Question

所以我一直在尝试使用 JavaScript 为客户端实现 CORS。我遇到了一个我根本不明白的奇怪问题。请原谅我将我要访问的服务器名称保密。

因此，如果我将代码作为脚本运行到浏览器中并观察控制台(在 Firefox 和 chrome 上测试)，它就可以工作。但是，一旦我将代码合并到用户驱动的按钮中，它就不会发出请求。在 Firefox 中，我可以看到连接不安全，因此它不会发送它。

这里是仅使用 JavaScript 代码的示例:

<script language="javascript">
var request = new XMLHttpRequest();

request.open('POST', 'https://api.somewhere.com');

request.setRequestHeader('Content-Type', 'application/json');
request.setRequestHeader('Authorization', 'Basic 123456ABCDE');
request.setRequestHeader('Access-Control-Allow-Origin', 'https://api.somewhere.com');

request.onreadystatechange = function () {
  if (this.readyState === 4) {
    console.log('Status:', this.status);
    console.log('Headers:', this.getAllResponseHeaders());
    console.log('Body:', this.responseText);
  }
};

var body = {
  'testBody': "somedata"
};

request.send(JSON.stringify(body));

</script>

下面是使用 javascript 按钮的示例

<SCRIPT LANGUAGE="javascript">
<!--

var authcode = 'Basic 1ab1b2b2b4km='

function response () 
{
  if (this.readyState === 4) 
  {
    console.log('readyState:', this.readyState);  
    console.log('Headers:', this.getAllResponseHeaders());
    console.log('Response:', this.responseText);
  }
};

function errorError()
{
    console.log('Error Status:', this.status);
}

function GetData()
{

  var request = new XMLHttpRequest();
  request.open('POST', 'https://api.somewhere.com');

  request.onreadystatechange = response;
  request.onerror = errorError;


  var body = {
    'testdata': "data"
  };

  console.log('Request Body:', body);

  request.setRequestHeader('Content-Type', 'application/json');
  request.setRequestHeader('Authorization', authcode );
  request.setRequestHeader('Access-Control-Allow-Origin', 'https://api.somewhere.com'); 
  request.send(JSON.stringify(body));  

};



-->
</SCRIPT>


      <div class="w3-row-padding w3-half">
        <p>Weight (LBS)</p>
        <div class="w3-quarter">
           <input type="text" class="w3-input w3-border" type="text" placeholder="1">
        </div>
         <div class="w3-third">
           <input type="submit" class="w3-btn w3-red" value="Get Quote" onClick="GetDAta();">
        </div>
      </div>

Answer 1

'Access-Control-Allow-Origin'不是请求 header ，而是响应 header 。如果源端不更改或删除此 header ，您将无能为力。

也许你的其余代码没问题，例如检查Chrome浏览器的日志，如果存在权威问题，它会显示“警告标记”。