Question

我正在努力理解为什么此请求给我一个CORS错误。我相信我同时拥有服务器和客户端设置，可以正确使用端点。我可以向邮递员提出相同的请求，并且该请求有效，因此我认为JS出了点问题。服务器正在使用Fastapi（Python框架）。客户端是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，但似乎无法理解。我究竟做错了什么？谢谢。

Answer 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 网络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

为什么此端点会出现Access-Control-Allow-Origin错误？

1 个答案: