如何解决cors在vue js和laravel应用中允许访问控制问题

composer require fruitcake/laravel-cors

protected $middleware = [
    // ...
    \Fruitcake\Cors\HandleCors::class,
];

return [
    'paths' => ['api/*'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['*'],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => false,
];

npm install axios

import axios from 'axios';

axios.defaults.baseURL = 'http://your-laravel-app-url/api/';
axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*';

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://your-laravel-app-url',
                changeOrigin: true,
                pathRewrite: { '^/api': '' },
            },
        },
    },
};

server {
    listen 80;
    server_name your-domain.com;

    location /api {
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'Origin, Content-Type, Accept, Authorization';
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            add_header 'Content-Length' 0;
            return 204;
        }

        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
        add_header 'Access-Control-Allow-Headers' 'Origin, Content-Type, Accept, Authorization';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';

        # 其他配置...
    }
}