I’m using ReactJs in frontend and Laravel in backend and nginx as web server.
When I add multipart/form-data to axios post request I get the cors error:
It’s considerablw that the project is dockerized.
The backend port is 8090 and frontend port is 8080.
const result = await axios(`${backendUrl}/shops`, {
headers: {
'Content-Type': `multipart/form-data; `,
"Accept": "*/*",
"Access-Control-Allow-Origin": "*"
},
method: "post",
data: {
values
},
withCredentials: true,
});
I tried to disable cors policy in larevl core config file.
This is my Laravel cors config file:
'paths' => ['*'],
'allowed_methods' => ['*'],
'allowed_origins' => ['*'],
'allowed_origins_patterns' => [],
'allowed_headers' => ['*'],
'exposed_headers' => [],
'max_age' => 0,
'supports_credentials' => true,
I added client_max_body_size to nginx config file but the error didn’t get resolved.
This is my nginx config file:
# "keys_zone=name:size” --> size: 10MB/0.125kB ~ 80000 cache keys
# levels --> two‑level directory hierarchy, max 3
# inactive --> removed items if not accessed after 7 days
# use_temp_path=off --> write files directly to the cache dir and avoid unnecessary copying of data to a temp storage first
proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=STATIC:10m inactive=7d use_temp_path=off;
# skip header Set-Cookie
proxy_ignore_headers Set-Cookie;
# redirect to upstream with header X-No-Cache
proxy_no_cache $http_x_no_cache;
upstream nextjs_upstream {
server next_appx:3031;
}
server {
client_max_body_size 20M;
# default port 80
listen 80 default_server;
# As this's default server and will handle all requests that aren't matched by other server blocks --> we don’t need a name
server_name _;
# The NGINX version doesn't appear in the response headers
server_tokens off;
# set root
root /var/www/html/frontend;
# set log
error_log /var/log/nginx/error.log;
access_log /var/log/nginx/access.log;
# compressing files before sending, gzip works best on text-heavy file formats such as: css, js, svg, xml, etc.
gzip on;
gzip_proxied any;
gzip_comp_level 4;
gzip_types text/css application/javascript image/svg+xml;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
location /_next/static {
# use cache zone STATIC to cache any file whose path contains the /_next/static dir
proxy_cache STATIC;
# then pass all requests to nextjs_upstream
proxy_pass http://nextjs_upstream;
# For testing cache - remove before deploying to production
add_header X-Cache-Status $upstream_cache_status;
}
location /images/ {
alias /var/www/html/backend/public/uploads/;
}
# location ~ .jpeg {
# root /var/www/html/backend/public/uploads/shop;
# }
location /static {
proxy_cache STATIC;
proxy_ignore_headers Cache-Control;
proxy_cache_valid 60m;
proxy_pass http://nextjs_upstream;
# For testing cache - remove before deploying to production
add_header X-Cache-Status $upstream_cache_status;
}
location /_next/image {
# proxy pass to the above upstream
proxy_pass http://nextjs_upstream;
}
location / {
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,
X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH';
add_header 'Content-Type' 'application/json';
add_header 'Content-Length' 0;
return 204;
}
# proxy pass to the above upstream
proxy_pass http://nextjs_upstream;
}
# laravel backend
# location ~ /api {
# try_files $uri $uri/ /index.php?$query_string;
# }
# location ~ .php$ {
# root /var/www/html/backend/public;
# try_files $uri =404;
# fastcgi_split_path_info ^(.+.php)(/.+)$;
# fastcgi_pass laravel:9000;
# fastcgi_index index.php;
# include fastcgi_params;
# fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
# fastcgi_param PATH_INFO $fastcgi_path_info;
# fastcgi_hide_header X-Powered-By;
# }
location ~ /.ht {
deny all;
}
}
2
Answers
First of all, you should remove the
Access-Control-Allow-Origin
header from youraxios
request since it’s a server-side response header.Second, since you are using credentialed request your backend can’t respond with
Access-Control-Allow-Origin: *
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin#directives
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSNotSupportingCredentials
Please let me know if this resolves your issue. Please also post the specific CORS error if the issue doesn’t go away.
It is common to face with CORS policy error when the testing is being done on the local server even if you allow CORS policy on the backend. You can either use go live feature in VS Code to resolve the issue or create a build of the app and deploy it on the server. Once the front-end and back-end are on the same server you will no longer get the CORS policy error again