无法使用 XMLHttpRequest 向 url 发送请求

Question

我已经开始构建一个 Vue.js 网站，后端使用 AWS Amplify。
在其中一个页面中，我需要访问外部 url 地址，从中获取响应，并查看对用户的响应。
重要的是要说 url 没有链接到我的网站，与我无关。它完全是外部的，不受我的控制。

我已经尝试访问 url 很多次，使用了很多方法，但到目前为止，每次我尝试访问 url 时，我都会收到以下错误消息：

:8080/#/myPage:1 Access to XMLHttpRequest at 'https://~URL~?~DATA~' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
xhr.js?b50d:178 GET https://~URL~?~DATA~ net::ERR_FAILED

（我把真正的url换成了https://~URL~?~DATA~，文件名换成了myPage）。

当我尝试打印从函数接收到的错误时。我收到以下消息：

myPage.vue?3266:161 Error: Network Error
                        at createError (createError.js?2d83:16)
                        at XMLHttpRequest.handleError (xhr.js?b50d:83)

当我尝试使用我的浏览器 (Google Chrome) 访问 url 时，它运行良好并且没有任何问题。它没有要求我提供任何类型的身份验证或类似的东西。
我也使用 Postman 尝试过，效果很好。
我只在使用 Vue.js 网站时遇到过这个问题。

当我从运行从 localhost 连接网站以及在主机上运行连接它时（使用无服务器网站的 AWS Amplify 托管 - S3），就会出现此问题桶）。
当网站不在本地主机上运行时，我仍然收到相同的错误消息。

以下是我尝试访问 url 的一些方法：

Axios

var config = {
  method: 'get',
  url: 'https://~URL~?~DATA~',
  headers: {
    'Access-Control-Allow-Credentials': true
  }
};

axios(config)
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

获取

var requestOptions = {
  method: 'GET',
  redirect: 'follow'
};

fetch("https://~URL~?~DATA~", requestOptions)
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log('error', error));

XHR

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

xhr.addEventListener("readystatechange", function() {
  if(this.readyState === 4) {
    console.log(this.responseText);
  }
});

xhr.open("GET", "https://~URL~?~DATA~");

xhr.send();

请求

var request = require('request');
var options = {
  'method': 'GET',
  'url': 'https://~URL~?~DATA~',
  'headers': {
  }
};
request(options, function (error, response) {
  if (error) throw new Error(error);
    console.log(response.body);
});

我真的需要你的帮助，因为到目前为止我在网上找不到任何解决方案。

Answer 1

据我了解，这是一个 CORS 策略错误，应该从服务器端修复。当您执行 API 调用时，浏览器首先向服务器发送 pre-flight 请求。服务器响应一些 headers，其中一个 headers 是 Access-Control-Allow-Origin header，如果这个 header 设置为 * 或者请求域，则实际请求将通过，否则 api 调用将出现 CORS 策略错误。

从服务器端可以控制哪些域可以对该服务器执行 API 调用。

您可以在此处阅读有关 CORS 策略错误的一些变通方法以及如何修复它的更多信息，https://medium.com/@dtkatz/3-ways-to-fix-the-cors-error-and-how-access-control-allow-origin-works-d97d55946d9

无法使用 XMLHttpRequest 向 url 发送请求

Couldn't send request to url using XMLHttpRequest

javascript

header

xmlhttprequest

vue.js

aws-amplify