0

我很难理解为什么这个请求给了我一个 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 ，但似乎无法理解。我究竟做错了什么？谢谢。

4

1 回答 1

-1

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

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

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

浏览器为从 XMLHttpRequest 或 Fetch API 中发起的跨站点请求发送特定的 HTTP 标头。他们还希望看到特定的 HTTP 标头与跨站点响应一起发回。这些标头的概述，包括启动请求和处理来自服务器的响应的示例 JavaScript 代码，以及对每个标头的讨论，可以在 HTTP 访问控制 (CORS) 文章中找到，应作为配套文章阅读这个。本文介绍了在 PHP 中处理访问控制请求和制定访问控制响应。本文的目标读者是服务器程序员或管理员。尽管此处显示的代码示例是用 PHP 编写的，但类似的概念也适用于 ASP.net、Perl、Python、Java 等；一般来说，

在 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

每种语言都有自己的配置。因此您可以搜索“如何在 web api 中启用 cors”或任何其他语言。

要在 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

于 2020-01-23T10:01:01.980 回答