为什么来自本地主机的 HTTP GET 会被 CORS 阻止？

问题描述 投票：0回答：1

我知道有很多这样的问题，我尝试阅读它们，但没有一个非常适合我被 CORS 阻止的症状。这是我的简单 HTML，其中包含发出 HTTP GET 请求的脚本。我使用 

Live Server
提供此 index.html。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Testing</title>
  </head>
  <body>
    <script>
      let url1 = 'https://api.dictionaryapi.dev/api/v2/entries/en/hello' // works fine
      let url2 = 'https://evilinsult.com/generate_insult.php?type=json' // CORS Error
      fetch(url2)
        .then(r => r.json())
        .then(json => console.log(json))
    </script>
  </body>
</html>

请注意，当我将它们粘贴到浏览器地址栏中时，这两个 URL 都可以正常工作。然而，虽然 

url1
工作正常，但 
url2
被

阻塞

127.0.0.1/:1 从源“http://127.0.0.1:8080”获取“https://evilinsult.com/generate_insult.php?type=json”的访问已被 CORS 策略阻止：否“ Access-Control-Allow-Origin'标头存在于所请求的资源上。如果不透明响应满足您的需求，请将请求模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。

我知道我可以做类似

Access-Control-Allow-Origin: *
的事情，但为什么我有？我检查了当
url2
粘贴到地址栏中时浏览器设置的标题，而这个特定的键甚至不存在在那里。

有人可以帮助我理解为什么一个获取成功，另一个失败，并且都在浏览器地址栏中工作吗？

cors
1个回答
0
投票

将 URL 粘贴到地址栏中时，您只是打开一个新网页，并且此处不强制执行 CORS，因此您可以正常打开它。

但是，当您从前端发出请求时，您基本上是在尝试从强制执行 CORS 的不同来源获取资源。 目标资源需要指定 CORS 标头，例如：

Access-Control-Allow-Origin: *

查看您尝试获取的 URL，我们可以看到它们的响应标头：

https://api.dictionaryapi.dev/api/v2/entries/en/hello

curl -I 'https://api.dictionaryapi.dev/api/v2/entries/en/hello'
HTTP/2 200 
date: Mon, 13 Jan 2025 08:38:06 GMT
content-type: application/json; charset=utf-8
x-powered-by: Express
access-control-allow-origin: *
x-ratelimit-limit: 450
x-ratelimit-remaining: 449
x-ratelimit-reset: 1736757561
etag: W/"7d7-AsMfdIELzoWWA6vv1HBPg2dLoi8"
vary: Accept-Encoding
cache-control: max-age=14400
cf-cache-status: MISS
report-to: {"endpoints":[{"url":"https:\/\/a.nel.cloudflare.com\/report\/v4?s=h5O507AX82aZK%2B7aKTMvJOGapEgGYPiSAugQQsvFZRM%2FnyGAS9i%2FkrAeH96FYUWIUIutuXqrGCKaNdkMhEbBv7tfjVLfqw1mcoqYT3ecNftSAxNxy3RrHn%2B7HdGFXTqhwYtq%2FCzW8Ls%3D"}],"group":"cf-nel","max_age":604800}
nel: {"success_fraction":0,"report_to":"cf-nel","max_age":604800}
server: cloudflare
cf-ray: 9014116eaf10df7c-CGK
alt-svc: h3=":443"; ma=86400
server-timing: cfL4;desc="?proto=TCP&rtt=6674&min_rtt=5774&rtt_var=1911&sent=8&recv=11&lost=0&retrans=0&sent_bytes=2931&recv_bytes=601&delivery_rate=631104&cwnd=254&unsent_bytes=0&cid=a6ae7dd05e8af21c&ts=928&x=0"

https://evilinsult.com/generate_insult.php?type=json

curl -I 'https://evilinsult.com/generate_insult.php?type=json'
HTTP/2 200 
server: nginx
date: Mon, 13 Jan 2025 08:38:21 GMT
content-type: application/json
vary: Accept-Encoding
x-powered-by: PHP/7.4.33
strict-transport-security: max-age=31536000; includeSubDomains; preload
x-frame-options: SAMEORIGIN
x-content-type-options: nosniff
cache-control: max-age=172800
expires: Wed, 15 Jan 2025 08:38:21 GMT
vary: Accept-Encoding,User-Agent

请注意，只有第一个 URL 可以从任何来源 (*) 访问，而第二个 URL 没有指定允许来源，这意味着它无法从任何来源访问，因此会出现 CORS 错误。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.