CORS错误，无法解决，为什么总是出现Access-Control-Allow-Origin？

Question

我正在使用 axios 和 React。并尝试将 API 调用发送到另一个域（ngnix、laravel）。我已经做了所有的事情来解决 CORS 错误，但我仍然得到这个:

(Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘*, https://www.assamhut.com, *’).

axios代码：

const API_ROUTE = axios.create({
    baseURL: API_URL,
    withCredentials: true,
    headers: {
        'Access-Control-Allow-Origin': '*',
        'Content-type': 'application/json',
        "Key": token,
        "Id": user_id
    }
});

export async function login_user(email, password) {
    await csrf_token();
    var result = await API_ROUTE.post('/login', {
        email: email,
        password: password
    });
    return result.data;
}

Laravel CORS 中间件：

<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;

class Cors
{
    /**
     * Handle an incoming request.
     *
     * @param \Illuminate\Http\Request $request
     * @param \Closure                 $next
     *
     * @return mixed
     */
    public function handle(Request $request, Closure $next)
    {
        return $next($request)->header('Access-Control-Allow-Origin', '*')
                              ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
    }
}

Ngix 服务器：

server {
    server_name api.assamhut.com www.api.assamhut.com;
    root /var/www/api.assamhut.com/public;
    index index.php;
    charset utf-8;
    add_header X-Frame-Options "*";
    add_header X-Content-Type-Options "nosniff";


    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

   location / {
        try_files $uri $uri/ /index.php?$query_string;

    add_header 'Access-Control-Allow-Origin' "*" always;
    add_header 'Access-Control-Allow-Credentials' 'true' always;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
    add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Requested-With' always;
    # required to be able to read Authorization header in frontend
    #add_header 'Access-Control-Expose-Headers' 'Authorization' always;

        }
    error_page 404 /index.php;

    location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        include fastcgi_params;
     }

    location ~ /\.(?!well-known).* {
        deny all;
    }

    location ~ /\.ht {
        deny all;
    }


    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/api.assamhut.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/api.assamhut.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}
server {
    if ($host = api.assamhut.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    listen 80;
    server_name api.assamhut.com www.api.assamhut.com;
    return 404; # managed by Certbot


}

Answer 1

处理cors错误

1. 创建一个名为“Cors”的中间件：php artisan make:middleware Cors
2. 打开内核，添加创建的 cors“\App\Http\Middleware\Cors::class” 作为 $middleware 中的最后一项，而不是 $middlewareGroups
中
3. 在cors中间件中添加以下代码：

public function handle($request, Closure $next)
{
    return $next($request)
        ->header('Access-Control-Allow-Origin', '*')
        ->header('Access-Control-Allow-Methods', '*')
        ->header('Access-Control-Allow-Headers', '*');
}

Answer 2

Access-Control-Allow-Origin

设置在响应标头中，而不是请求中。在您的 Laravel 应用程序（您尝试向其发送请求的应用程序）中，检查

config\cors.php

文件下的 CORS 设置。

对于 Laravel 7 及更高版本，应该是这样的以允许所有来源/方法：

    'paths' => ['*', 'sanctum/csrf-cookie'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['*'],

对于 Laravel 7 之前的版本，您可以使用这个包： https://github.com/fruitcake/laravel-cors（仅供参考，这个包在 laravel 7 和 8 中开箱即用）

您只需使用 Postman 或任何其他浏览器向服务器发送正常请求即可检查响应标头，您应该在响应标头中看到类似

access-control-allow-origin: *

的内容。

如果 Laravel 配置和响应标头不同，请确保应用程序位于反向代理、云防火墙或类似服务后面，它们不会覆盖响应标头。

Answer 3

还允许标头。

例如：

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