无法使用 XML 向网址发送请求

Question

我已经开始构建一个 Vue.js网站，将 AWS 放大版用于后端。
在其中一个页面中，我需要访问外部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

（我将实际网址替换为 ，并将文件名替换为 ）。https://~URL~?~DATA~myPage

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

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

当我尝试使用浏览器（谷歌浏览器）访问网址时，它运行良好，没有任何问题。它没有要求我进行任何类型的身份验证或类似的东西。
我也用邮递员尝试过，它工作得很好。
我只在使用我的 Vue.js 网站时才遇到此问题。

当我从主机运行网站时，当我在主机上运行网站时（对无服务器网站使用 AWS Amplify 托管 - S3 存储桶），就会发生此问题。
当网站无法在本地主机上运行时，我仍然收到相同的错误消息。localhost

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

阿克西奥斯

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));

断续器

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 调用时，浏览器首先会向服务器发送预检请求。服务器使用一些标头进行响应，其中一个标头是标头，如果此标头设置为或请求域，则实际请求将通过，否则 api 调用将收到 CORS 策略错误。Access-Control-Allow-Origin*从服务器端可以控制哪些域可以对此服务器执行API调用。您可以从此处阅读有关CORS策略错误的更多信息，一些解决方法以及如何修复它，https://medium.com/@dtkatz/3-ways-to-fix-the-cors-error-and-how-access-control-allow-origin-works-d97d55946d9