为什么此端点会出现 Access-Control-Allow-Origin 错误？ [复制]答案

【问题标题】：Why is this endpoint getting a Access-Control-Allow-Origin error? [duplicate]为什么此端点会出现 Access-Control-Allow-Origin 错误？ [复制]
【发布时间】：2020-01-23 09:29:05
【问题描述】：

我很难理解为什么这个请求给了我一个 CORS 错误。我相信我有服务器和客户端设置来正确使用端点。我可以向邮递员提出相同的请求并且它可以工作，所以我认为我在使用 JS 时做错了什么。服务器使用的是 Python 框架 Fastapi。客户端是 Vue，但请求使用 Axios（即 Javascript）。任何见解将不胜感激。

服务器设置

app = FastAPI(title="OptionStrats",
    description="For fun fin-trial",
    version="0.0.1",)

origins = ["*", "http://localhost:8080/"]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

客户请求

axios({
  method: "post",
  url: "http://optionstrats.com/backtest",
  headers: {
    common: {
      "Accept": "application/json",
      "Content-Type": "application/x-www-form-urlencoded"
    },
    "Access-Control-Allow-Origin": "*"
  },
  data: request_dict,
  crossDomain: true
})
.then(response => {
  console.log("backtest response", response);
})
.catch(error => {
  console.log(error);
});

日志

Starting Request 
Object { url: "http://optionstrats.com/backtest", method: "post", data: {…}, headers: {…}, transformRequest: (1) […], transformResponse: (1) […], timeout: 0, adapter: xhrAdapter()
, xsrfCookieName: "XSRF-TOKEN", xsrfHeaderName: "X-XSRF-TOKEN", … }
Backtest.vue:464
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://optionstrats.com/backtest. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Error: "Network Error"
createError createError.js:16
handleError xhr.js:81

我在 axios 请求标头中明确包含 Access-Control-Allow-Origin，但似乎无法理解。我究竟做错了什么？谢谢。

【问题讨论】：

错误显示你正在尝试访问optionstrats.com/backtest而不是localhost:8080
“我在 axios 请求标头中明确包含 Access-Control-Allow-Origin，但似乎无法理解。” - 似乎无法理解 CORS到目前为止 - 你。这是一个需要在response中设置的header；用 request 发送它一开始是零意义的。
好的，谢谢。是的，我误解了它对我的要求。我会试着用这种方式纠正它。

标签： javascript cors axios fastapi

【解决方案1】：

您提到的错误是服务器端错误，无法在客户端修复。它是来自服务器响应的标头值。

访问控制是一种安全技术，可用于控制谁或什么可以查看或使用计算环境中的资源。

需要在您尝试访问的服务器上设置标头以允许您执行此操作。

浏览器为发起的跨站点请求发送特定的 HTTP 标头来自 XMLHttpRequest 或 Fetch API。他们也期待看到与跨站点响应一起发回的特定 HTTP 标头。概述这些标头，包括启动的示例 JavaScript 代码请求和处理来自服务器的响应，以及每个标头的讨论，可以在 HTTP 访问控制中找到 (CORS) 文章，应作为本文的配套文章阅读。本文涵盖处理访问控制请求和制定 PHP 中的访问控制响应。本文的目标受众是服务器程序员或管理员。虽然代码示例这里显示的是 PHP，类似的概念适用于 ASP.net、Perl、 Python、Java等；一般来说，这些概念可以应用于任何处理 HTTP 请求的服务器端编程环境和动态制定 HTTP 响应。

在 apache 中启用 CORS 就像

RewriteRule ^/api(.*)\.json$ /api$1.json [CORS=True]
Header set Access-Control-Allow-Origin "*" env=CORS
Header set Access-Control-Allow-Methods "GET" env=CORS
Header set Access-Control-Allow-Credentials "false" env=CORS

每种语言都有自己的配置。所以你可以搜索“如何启用cors in web api”或任何其他语言。

要在 FastAPI 中启用 CORS，请尝试查看此文档：

https://github.com/tiangolo/full-stack-fastapi-postgresql/blob/master/%7B%7Bcookiecutter.project_slug%7D%7D/backend/app/app/main.py#L20-L26

【讨论】：