Axios 请求已被 cors 阻止，请求的资源上不存在“Access-Control-Allow-Origin”标头

Posted 2023-02-22

【中文标题】Axios 请求已被 cors 阻止，请求的资源上不存在“Access-Control-Allow-Origin”标头

【英文标题】：Axios request has been blocked by cors no 'Access-Control-Allow-Origin' header is present on the requested resource

【发布时间】：2021-04-14 21:20:01

【问题描述】：

我正在尝试向 ERP API 发出请求，我收到了以下响应：

从源“http://connector.test”访问“http://ip:8082/auth”的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：否请求的资源上存在 Access-Control-Allow-Origin' 标头。

虽然在我的请求中有一个标头 Access-Control-Allow-Origin:

        getAuth() 
            axios.post('http://'+this.ip + '/auth/', 
                headers: 
                    "Content-Type": "application/json",
                    "Cookie": this.sessionid,
                    "Access-Control-Allow-Origin": "*",
                    "Access-Control-Allow-Methods": "GET, POST, PATCH, PUT, DELETE, OPTIONS",
                    "Access-Control-Allow-Headers": "Origin, Content-Type, X-Auth-Token, Authorization, Accept,charset,boundary,Content-Length"
                , 
                data: 
                    username: this.username, 
                    password: this.password
                
            ).then(response => 
                this.getItems();
            )
        ,

Cors.php

'paths' => ['*'],

'allowed_methods' => ['*'],

'allowed_origins' => ['*'],

'allowed_origins_patterns' => [],

'allowed_headers' => ['*'],

'exposed_headers' => [],

'max_age' => 0,

'supports_credentials' => true,

js/bootstrap.js

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
window.axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*';
window.axios.defaults.headers.common['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS, PUT, DELETE';

添加了我自己的中间件

中间件/cors.php

  return $next($request)
        ->header('Access-Control-Allow-Origin', '*')
        ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, 
          OPTIONS');

将其添加到 kernel.php $routeMiddleware 然后 web.php

Route::get('/', [App\Http\Controllers\MainController::class, 'index'])->middleware(Cors::class);

请求标头

Request URL: http://ip:8082/auth
Referrer Policy: strict-origin-when-cross-origin
Provisional headers are shown
Accept: application/json, text/plain, */*
Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE
Access-Control-Allow-Origin: *
Content-Type: application/json;charset=UTF-8
Referer: http://connector.test/
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (Khtml, like Gecko) Chrome/87.0.4280.88 Safari/537.36
X-Requested-With: XMLHttpRequest

使用 PHP Curl 在后端进行请求可以正常工作，但我想使用 Vue 使其在前端工作。

【问题讨论】：

您是否允许您的来源在您的config/cros.php 中？或许你可以暂时用通配符 (*) 来测试一下。

在您的示例中，您（如在客户端，通过 axios）正在向服务器发送请求标头。应该反过来，服务器（在192.168.1.67:8082 运行）应该将这些（Access-Control-* 标头）作为响应标头发送。

@JoshuaAngnoe POST 方法通过邮递员完美运行

我认为 Postman 不遵守 CORS 的规定/限制，它是一个开发工具，所以它会忽略它并完成它的工作。另一个示例是使用 curl 执行 api 调用，这将起作用。您可以做的另一件事是查看（并可能与我们分享）服务器通过 Developer Tools > Network Tab > Response headers 发送的实际响应标头

【参考方案1】：

Web 浏览器具有阻止对网站进行大规模 DOS 攻击的安全功能。简而言之，在 X 上运行的任何代码都不能在 Y 上请求资源，除非 Y 明确允许 X 请求它。这是通过 Access-Control-Allow-Origins 标头完成的。

您必须将此添加到您的网络服务器或后端代码。

【参考方案2】：

试试这个。

axios.post('http://yourdomain.com', 
    withCredentials: true,
    // put the rest of your config here
)

我相信这是因为您将它们发送到服务器但没有用 withCredentials 标记它，因此服务器不知道请求来自哪里或只是忽略它。

这也发生在我身上，这种方法对我有用。