JS 中的 HTTP JSON 请求 - CORS 问题

Posted

技术标签:

【中文标题】JS 中的 HTTP JSON 请求 - CORS 问题【英文标题】：HTTP JSON request in JS - CORS issue 【发布时间】：2020-07-08 04:42:50 【问题描述】：

该项目的目标是使用 IBM 的 Watson 及其自然语言理解 AI。

当我使用 Insomnia（一个 REST 客户端）时，我可以获得一个 POST 请求以通过并获得 JSON 响应。

但是，当我尝试使用 javascript 时，我无法发布请求并收到以下错误： “从源 'null' 访问 'WEBSITE-I'M-TRYING-TO-REACH' 处的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：重定向不允许用于预检请求。”

这是我正在使用的代码：

var url = "http://newsroom.ibm.com/Guerbet-and-IBM-Watson-Health-Announce-Strategic-Partnership-for-Artificial-Intelligence-in-Medical-Imaging-Liver"

getData(url);

function getData(url)
  var data = JSON.stringify(
    "url": url,
    "features": 
      "sentiment": ,
      "categories": ,
      "concepts": ,
      "entities": ,
      "keywords": 
    
  );

  var postURL = "https://api.us-south.natural-language-understanding.watson.cloud.ibm.com/instances/9d2bd18a-8017-4e44-8de9-acc01a9f0795/v1/analyze?version=2019-07-12"

  var xml = new XMLHttpRequest();
  xml.withCredentials = true;

  xml.addEventListener("readystatechange", function () 
    if (this.readyState === this.DONE) 
      console.log(this.responseText);
    
  );

  var username = "myUsername";
  var password = "myPassword";
  xml.open("POST", postURL);
  xml.setRequestHeader("content-type", "application/json");
  xml.setRequestHeader("Authorization", "Basic " + username + ":" + password)

  xml.send(data);

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JSON Requests</title>
  <script src="main.js"></script>
</head>

<body>
  <h1>JSON Requests</h1>

</body>

</html>

【问题讨论】：

【参考方案1】：

如前所述，将原始密钥放在标题中：

xml.setRequestHeader("Origin", "https://the-great.site");

【讨论】：

以上是关于JS 中的 HTTP JSON 请求 - CORS 问题的主要内容，如果未能解决你的问题，请参考以下文章

CORS 中的POST and OPTIONS 请求

Vue.js 对 API 的 GET 请求被 CORS 阻止

Javascript CORS JSON/JSONP 请求

Js 跨域CORS报错 Response for preflight has invalid HTTP status code 405

转 Js 跨域CORS报错 Response for preflight has invalid HTTP status code 405

REST API、删除请求、CORS 规范或查询错误？