Benounnas Oussama's avatar

Cors error when uploading file

Hello, i'm facing again the cors error when i'm trying to upload file with axios my cors.php:

<?php
return [
    'paths' => [],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['http://localhost:8080'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => true,
];

i have a shared file in my Services folder which gets repeated and this one works because it has no file in the request

import axios from "axios";
import store from "../store/index";

export const apiClient = axios.create({
  baseURL: `http://127.0.0.1:8001/`,
  // baseURL: "http://www.api.example.local/",

  withCredentials: true, // This is the default
  headers: {
    Accept: "application/json",

    "Content-Type": "application/json",
  },
  timeout: 10000,
});
apiClient.interceptors.request.use((config) => {
  // Get token from auth.js store
  const token = store.state.auth.token;

  if (token) {
    config.headers.common["Authorization"] = "Bearer " + token;
  }
  return config;
});

but when i'm using this one it doesn't work, it gives me the error of Access to XMLHttpRequest at 'http://127.0.0.1:8001/store-file' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. thank you in advance

0 likes
1 reply
Serhii75's avatar

I faced with the same issue. We use laravel 8 for the backend and React/Next.js for the frontend in our project. It seemed like everything worked ok, but when I tried to upload a file more than 1Mb, I got the error like yours:

Access to XMLHttpRequest at 'https://api.my-domain.com/api/messages' from origin 'https://my-domain.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Actually, the problem was not in cors, it was about client_max_body_size You can check it in nginx docs

So, I've just add this line:

client_max_body_size 5m;

to the server block of my /etc/nginx/sites-available/my-domain.com and it solved the issue. If you need it for all your projects, you should add it to your /etc/nginx/nginx.conf

Hope, it helps.

2 likes

Please or to participate in this conversation.