Question

现在，我正在使用Vue.js向外部主机发送GET请求并收到臭名昭著的错误：

无法加载 EXTERNAL_SERVICE_JSON_OBJECT_URL：否请求中存在“ Access-Control-Allow-Origin”标头资源。因此，不允许原点“ http://localhost:8080” 访问。

我的源代码如下：

Vue.$http
  .get(EXTERNAL_SERVER_JSON_OBJECT_URL)
  .then(response => {
    ...
    });
    ...
  });

只是检查我是否可以通过在Chrome地址栏中输入EXTERNAL_SERVER_JSON_OBJECT_URL来获取json对象，所以我尝试并没有任何错误地获取了对象。

因此我打开了开发人员工具，并比较了HTTP GET请求标头。

当我在上面运行VueJS脚本时，请求标头看起来像：

Caution Provisional headers are shown
Accept: application/json, text/plain, */*
Origin: http://localhost:8080
Referer: http://localhost:8080/
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36

但是当我通过Chrome地址栏发送请求时，请求标头看起来像：

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding: gzip, deflate, br
Accept-Language: ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7
Cache-Control: max-age=0
Connection: keep-alive
Host: HOST_NAME (<-- blacked on purpose)
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36

通过比较这两个标头，我猜Vue HTTP GET请求中的“ Origin”或“ Referer”字段可能会导致跨源错误，因此，我需要在脚本中处理标头字段。

我想知道这个猜测是否正确，否则，我想知道我可以尝试哪些前端解决方案。在那里，我可以找到许多有关此跨域错误的问题，但是很难找到适合我的情况的正确答案。

使用Vue HTTP GET请求时，如何避免出现“不允许访问-控制-允许-起源”错误？

0 个答案: