ubuntu 中缺少 CORS 标头“Access-Control-Allow-Origin”

Question

我是 laravel-nova 和 vuejs 的新手。我正在向我的private-api swagger 发送请求。我已经尽我所能。我更改了mozailla documentation on cors 此处给出的 apache 服务器的 conf 文件。我试过放

axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*';

在发送请求时。它不起作用。这是我在 laravel-nova Vue 工具中的 vue 代码。

<script>
import VueButtonSpinner from 'vue-button-spinner';
export default {
components: {
    VueButtonSpinner
},
data() {

    return {

        showTable: false,
        token_utente: "7e407066-1c6a-11ec-9bbe-0aae38056063",
        encoding: "na",
        document_type: "na",
        indirizzo: "na",
        toponimo: "na",
        via: "na",
        comune_registro: "na",
        cap: "na",
        provincia_registro: "na",
        codice_fiscale: "na",
        partita_iva: "na",
        ccia: "na",
        nrea: "na",

    };
},
metaInfo() {
    return {
      title: 'RegistroImprese',
    }
},
mounted() {
    //
},
methods: {
    onSubmit() {
        this.isLoading = true
        let param = {};
        param = {
            'token_utente': this.token_utente,
            'codici_servizi': [ this.codici_servizi ],
            'document_type': this.document_type,
            'encoding': this.encoding,
            'partita_iva' : this.partita_iva,
            'ccia' : this.ccia,
            'nrea' : this.nrea,
            'solo_sedi' : this.solo_sedi,
            'escludi_cessate' : this.escludi_cessate,
        }
        Nova.request().post('my-private-api', param).then(response =>
        {
            this.data = response.data;
            this.isLoading = false;
            this.status = true;
            setTimeout(() =>
            {
                this.status = ''
            }, 2000);

        }).catch(error =>
        {
            console.error(error)
            this.isLoading = false
            this.status = false //or error
        })
    },
}
}
</script>

Answer 1

如何在 apache 服务器上启用 cors：https://ubiq.co/tech-blog/enable-cors-apache-web-server/

如果问题仍然存在：

尝试在服务器端（在您的情况下为 laravel）添加一个 Cors 中间件

第 1 步 php artisan make:middleware Cors

第 2 步 进入新的中间件，修改handle方法的返回值如下：

public function handle($request, Closure $next)
{
return $next($request)
    ->header('Access-Control-Allow-Origin', "*")
    ->header('Access-Controll-Allow-Methods', "GET, POST")
    ->header('Access-Controll-Allow-Headers', "Accept,Authorization,Content-Type");
}

第 3 步 将新的 Cors 中间件添加到 Kernel.php 中受保护的成员变量 $middleware：

protected $middleware = [
    \App\Http\Middleware\TrustProxies::class,
    \Fruitcake\Cors\HandleCors::class,
    \App\Http\Middleware\CheckForMaintenanceMode::class,
    \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
    \App\Http\Middleware\TrimStrings::class,
    \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
    \App\Http\Middleware\Cors::class,
];

现在通过将新创建的中间件挂载到内核中来调用每个请求。这具有以下效果：具有以下标头属性的响应标头：Access-Control-Origin、-Methods 和 -Headers 被修改后发送。因此，客户端浏览器知道：“不要惊慌，一切都在绿色区域内。他和我们都可以这样做”。