在 vue 中使用 axios 的 Cors 和预检错误

Posted 2023-03-10

【中文标题】在 vue 中使用 axios 的 Cors 和预检错误

【英文标题】：Cors and preflight errors with axios in vue

【发布时间】：2018-12-22 07:30:25

【问题描述】：

在我的应用程序中，我将 laravel 作为后端，jwt-auth 作为身份验证，社交名流作为 oauth2 提供者，vue 作为我的前端。

现在我在客户端使用 axios 通过 github 对用户进行授权，例如（https://github.com/login/oauth/authorize），然后通过后端 api 获取访问令牌。

如果我使用 POSTMAN 发出授权请求，一切正常，但如果我使用前端 axio 请求发出请求，我总是会出错。我想我得到它们是因为某些 Header 值不正确。谁能解释一下 axion 请求需要哪些变量来执行授权请求。

亲切的问候。

【问题讨论】：

您遇到了哪个 cors 错误？您对自己的服务器或 github 提出什么请求？如果到 github，那么 api 可能不打算在客户端使用，如果到您的服务器，那么您需要为 OPTIONS 请求添加正确的标头

我可以和邮递员一起使用。我认为，如果 github 不打算被客户端使用，它也不会起作用。我收到此错误：当我执行获取请求时，预检响应无效（重定向）。这是请求：github.com/login/oauth/… 这里解释：developer.github.com/apps/building-oauth-apps/…

Postman 工作是因为它忽略了 CORS，浏览器使用 CORS 标头来确定是否允许请求。

【参考方案1】：

您可以在非常糟糕的浏览器中禁用 cors，或者您必须在后端启用 cors 并检查后端是否启用了 cors 在浏览器网络选项卡中查找 Access-Control-Allow-Origin 标头或您必须使用代理，以便将请求发送到与浏览器看到的相同的来源，但被重定向到其他一些 url。

In create-react-app this works by adding
"proxy":"http://youUrl:portNo."