Axios请求已被阻止，因为请求的资源上没有访问控制允许起源头

Question

我试图向ERP API发出请求，得到以下响应：

访问位于“”的XMLHttpRequesthttp://ip:8082/auth“起源”http://connector.test'已被CORS策略阻止：对飞行前请求的响应未通过访问控制检查：请求的资源上不存在'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$routeMiddlewareweb.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使其在前端工作。

Answer 1

试试这个。

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

我认为这是因为您将它们发送到服务器，但没有使用凭据标记它，因此服务器不知道请求来自何处，或者干脆忽略它。

这种情况也发生在我身上，这种方法对我很有效。

Answer 2

Web浏览器具有一种安全功能，可以阻止对网站的大规模DOS攻击。简而言之，任何在X上运行的代码都不能请求Y上的资源，除非Y特别允许X请求它。这是通过访问控制允许源标题完成的。

您必须将此添加到您的Webserver或您的后端代码。