localhost 不允许从 CORS-API 获取

Question

我正在开发一个需要从 Api 获取数据的 React 应用程序。 我让它与假数据一起工作。

fetch('https://jsonplaceholder.typicode.com/posts')
      .then((response) => {
          console.log(response);
          return response.json();
      })
      .then((json) => {
          return json;
      })

现在我想使用 Apigility 从我们的本地 Api 获取数据。

fetch('http://localserver:8081/news')
      .then((response) => {
          console.log(response);
          return response.json();
      })
      .then((json) => {
          return json;
      })

但我得到net::ERR_ABORTED 403 (The origin "http://localho.st:5000" is not authorized)。该应用是使用 create-react-app 创建的，并由其运行脚本提供服务。

现在它可以工作了，当我在 Firefox 和 Edge 中输入 http://localserver:8081/news 时。我收到 json 数据。用我的手机、curl 或 api 测试器尝试时也是如此。

这是尝试从应用中获取时的答案：

HTTP/1.1 403 The origin "http://localhost:3000" is not authorized
Content-Type: text/html; charset=UTF-8
Server: Microsoft-IIS/10.0
X-Powered-By: PHP/7.0.30
Access-Control-Allow-Origin: *
Date: Thu, 07 Oct 2021 12:59:08 GMT
Content-Length: 0

当从浏览器调用时：

HTTP/1.1 200 OK
Content-Type: application/hal+json
Vary: Origin
Server: Microsoft-IIS/10.0
X-Powered-By: PHP/7.0.30
WWW-Authenticate: Bearer realm="Service"
Access-Control-Allow-Origin: *
Date: Thu, 07 Oct 2021 13:03:08 GMT
Content-Length: 133933

我已阅读有关设置代理以获取 CORS 调用的信息，但我想知道是否有其他解决方案来解决此问题。

编辑： 本地服务器：

GET /news HTTP/1.1
Host: 10.254.2.10:8081
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:93.0) Gecko/20100101 Firefox/93.0
Accept: */*
Accept-Language: de,en-US;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate
Origin: http://localhost:3000
Referer: http://localhost:3000/
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache

HTTP/1.1 403 The origin "http://localhost:3000" is not authorized
Content-Type: text/html; charset=UTF-8
Server: Microsoft-IIS/10.0
X-Powered-By: PHP/7.0.30
Access-Control-Allow-Origin: *
Date: Thu, 07 Oct 2021 14:15:22 GMT
Content-Length: 0

https://jsonplaceholder.typicode.com/posts

Host: jsonplaceholder.typicode.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:93.0) Gecko/20100101 Firefox/93.0
Accept: */*
Accept-Language: de,en-US;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate, br
Origin: http://localhost:3000
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site
Referer: http://localhost:3000/
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache

HTTP/3 200 OK
date: Thu, 07 Oct 2021 14:17:37 GMT
content-type: application/json; charset=utf-8
x-powered-by: Express
x-ratelimit-limit: 1000
x-ratelimit-remaining: 999
x-ratelimit-reset: 1633547463
access-control-allow-origin: http://localhost:3000
vary: Origin, Accept-Encoding
access-control-allow-credentials: true
cache-control: max-age=43200
pragma: no-cache
expires: -1
x-content-type-options: nosniff
etag: W/"6b80-Ybsq/K6GwwqrYkAsFxqDXGC7DoM"
via: 1.1 vegur
cf-cache-status: HIT
age: 4307
expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
report-to: {"endpoints":[{"url":"https:\/\/a.nel.cloudflare.com\/report\/v3?s=qYfd07Dc%2BG9NUgzVp1DHMPuBcDx8UOvlbWfDD51OGSN8s74yaJFooN99m7nG4NSHV%2BeqY78Qw%2Bb7ozFdWCmF8ngPRnQPc3tlVdrSwGy8TKWYLwWSEYI4YE88GU5yyErQ8P5jLa5tUkPnB4FA6mg7"}],"group":"cf-nel","max_age":604800}
nel: {"success_fraction":0,"report_to":"cf-nel","max_age":604800}
server: cloudflare
cf-ray: 69a7c10bdbf66d8f-MUC
content-encoding: br
alt-svc: h3=":443"; ma=86400, h3-29=":443"; ma=86400, h3-28=":443"; ma=86400, h3-27=":443"; ma=86400

Answer 1

Create-React-App 提供了一种简单的方法来处理这个问题：在你的 package.json 文件中添加一个代理字段，如下所示。在这种情况下，从服务器 A 向服务器 B 发出请求

"proxy": "http://localserver:8081/",

Answer 2

您可以运行本地反向代理来获取来自同一来源的 API 调用（例如将 localhost:3000/api/news 映射到 localhost:8081/news），但是设置 CORS 代理可能会更容易.

您可以尝试使 API JSONP 并以这种方式规避同源策略，但这也可能比设置 CORS 代理更麻烦。

长话短说：每当您跨来源发出请求时，都需要设置 CORS。