I have the same problem too. Request to API with the postman works fine, but when sent request with Axios from browser get cors error. please help me Note: I have added '*' for allow origin and allow header setting in cors.php
Cors Issue In Laravel 9 / Axios working fine with postman
I'm trying to upload a file using Axios but I'm getting an error I tried everything, It works fine on Postman ( I can upload ), the problem only in the browser it gives 500 and console with error
// cors.php
'paths' => ['*'],
'allowed_methods' => ['*'],
'allowed_origins' => [env('FRONTEND_URL', 'http://localhost:3000')],
'allowed_origins_patterns' => [],
'allowed_headers' => ['*'],
'exposed_headers' => [],
'max_age' => 0,
'supports_credentials' => true,
when i
dd($request->all());
Postman Result: https://snipboard.io/AkDFoH.jpg
This is my Route inside Api.php Protected by sanctum:
Route::middleware(['auth:sanctum'])->post('/add/property', [PropertyController::class, 'store'])->name('property_store');
console error: https://snipboard.io/SsKued.jpg
Network 500: https://snipboard.io/sdG940.jpg
Network Headers
General
Request URL: http://localhost:8000/api/add/property
Request Method: POST
Status Code: 500
Referrer Policy: strict-origin-when-cross-origin
Response Headers
Connection: close
Content-type: text/html; charset=UTF-8
Date: Sat, 23 Jul 2022 21:46:38 GMT
Host: localhost:8000
X-Powered-By: PHP/8.1.2
Request Headers
Accept: /
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9,ru;q=0.8,bg;q=0.7
Access-Control-Allow-Origin: *
Connection: keep-alive
Content-Length: 3587583
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryEBBLoFfrEdSnEAT9
Cookie: OCSESSID=e03f850c9a0144a757d28d9d32; _ga=GA1.1.405377927.1647323518; _ga_5GLWGV42KV=GS1.1.1647323517.1.1.1647324993.0; __atuvc=3%7C11; Phpstorm-575b40c8=991c9535-8cd8-428d-a0bf-a84ef028d6e9; XSRF-TOKEN=eyJpdiI6Ikx0K25aRktWVGVEWi9BNlRMVnBkeEE9PSIsInZhbHVlIjoiQ3AwajBBd09VNUtJck1zM0k2SnNlRHNwZC9MVmphZ0NLM29OK1Y2Mk1ZS1R5SXJHaXQ5RVBiek1ldXhkbHpaZFJnekNqbU9RcGo5Q2U5ckUwU213V050WEovSGcrZnhlSEZaZkpNRHNMVkVhVUhKckZWYmZ5TGpZSlk5Q0RvNmoiLCJtYWMiOiIwMDQ2N2M5OTQ3ODc3NTE1YTBkZDE4ODYxMzU0NDE1Njc5MWRjMzIxZjZhMTZhZjhkNmNmOTYzZjc1YTgwYjliIiwidGFnIjoiIn0%3D; laravel_session=eyJpdiI6Ijdwd1RQQkFXTEg0WndnY1J2NnhJM1E9PSIsInZhbHVlIjoiRzV2ZnBJbjBLZjk0QzU2U1pWcXU5RmtPR1pOTUZHbUk2TjNFUFhLajE3NzQ2U3FFLy9kcjQ4R0VwbWswMG9Rck9jRUVYaC96Qk43Q1FwU2F0eE94MXF0K0hNdjRQOWRDdlg2L2RSWVV0RDZjdTNMMUpLMFZWSGZKc1BTdnQvVHciLCJtYWMiOiI4MDIxMjBiYTE4YzRkNGIyZjg2MWQ0NWRiN2ZiODZmZDI5YjhlOGUxN2Y1MTU5Y2RiMjkyMmExZWRiZGQ0NTI0IiwidGFnIjoiIn0%3D
Host: localhost:8000
Origin: http://localhost:3000
Referer: http://localhost:3000/
sec-ch-ua: ".Not/A)Brand";v="99", "Google Chrome";v="103", "Chromium";v="103"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36
X-Requested-With: XMLHttpRequest
X-XSRF-TOKEN: eyJpdiI6Ikx0K25aRktWVGVEWi9BNlRMVnBkeEE9PSIsInZhbHVlIjoiQ3AwajBBd09VNUtJck1zM0k2SnNlRHNwZC9MVmphZ0NLM29OK1Y2Mk1ZS1R5SXJHaXQ5RVBiek1ldXhkbHpaZFJnekNqbU9RcGo5Q2U5ckUwU213V050WEovSGcrZnhlSEZaZkpNRHNMVkVhVUhKckZWYmZ5TGpZSlk5Q0RvNmoiLCJtYWMiOiIwMDQ2N2M5OTQ3ODc3NTE1YTBkZDE4ODYxMzU0NDE1Njc5MWRjMzIxZjZhMTZhZjhkNmNmOTYzZjc1YTgwYjliIiwidGFnIjoiIn0=
By the Way All my normal forms works fine but that one because I'm uploading a file And It works fine when I use Postman, the problem only in the browser
// Axios Call in Nextjs
console.log('image data', imageData)
const formData = new FormData()
formData.append('images', imageData)
formData.append('data', JSON.stringify(addform))
console.log(formData)
console.log('last data ', formData)
const res = await axios.post('/api/add/property', formData, {
headers: {
"Content-Type": "multipart/form-data",
"Accept": "*/*",
"Access-Control-Allow-Origin": "*"
},
})
console.log(res)
Please or to participate in this conversation.