Level 102
Can you show the complete error? It should mention both domains
What url are you running laravel on?
Sep 1, 2022
26
Level 11
Vite and valet PHP 8.1.8 and LARAVEL 9.27
Hi! I had a problem with vite and valet, when I changed my vite.config.js file and followed the code of Freek.dev Making Vite and Valet play nice together https://freek.dev/2276-making-vite-and-valet-play-nice-together I got cors error Blocking a cross-origin request: the “Same Origin” policy does not allow consulting the remote resource located at https://project.laravel.test:5173/@vite/client. and no style in my login page
Level 11
Blocking of a multi-origin request (Cross-Origin Request): the “Same Origin” policy does not allow viewing of the remote resource located at https://project.laravel.test:5173/@vite/client. Reason: CORS request failed. Status code: (null). I used valet secure and I am in local env
Level 102
@$omar what exact url do you visit when developing?
Level 11
projet.laravel.test
Level 102
@0mar that's a hostname. The full url? :) is it perhaps http instead of https?
Level 11
Level 102
@0mar the vite url is missing a c in project
Level 11
Sorry Fat-finger error
Level 102
@0mar no worries. If it was solved, you can close the thread by marking a best answer
Level 11
I meant fat finger in my previous post :)
Level 102
@0mar so you are typing the full error message instead of copy pasting it?
Level 11
Yes it's the full error. When I change my vite.config.js without free.dev code I got this error : [vite] failed to connect to websocket. your current setup: (browser) 127.0.0.1:5173/ <--[HTTP]--> 127.0.0.1:(5173/ (server) (browser) 127.0.0.1:5173/ <--[WebSocket (failing)]--> 127.0.0.1:5173/ (server) Check out your Vite / network configuration and https://vitejs.dev/config/server-options.html#server-hmr .
Level 102
@0mar But you manually typed it? If not, how could the domain be misspelled? Can you use the "valet guide" and then paste the actual error, instead of typing it
1 like
Level 11
Firefox cannot establish a connection to the server at wss://127.0.0.1:5173/.
[vite] failed to connect to websocket.
your current setup: (browser) 127.0.0.1:5173/ <--[HTTP]--> 127.0.0.1:5173/ (server) (browser) 127.0.0.1:5173/ <--[WebSocket (failing)]--> 127.0.0.1:5173/ (server) Check out your Vite / network configuration and https://vitejs.dev/config/server-options.html#server-hmr .
socket client.ts:48
setupWebSocket client.ts:99
(Async: EventListener.handleEvent)
setupWebSocket client.ts:95
fallback client.ts:43
setupWebSocket client.ts:99
Level 102
@0mar Can you show the vite config?
Level 11
import fs from 'fs';
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import {homedir} from 'os'
import {resolve} from 'path'
let host = 'project.laravel.test'
export default defineConfig({
plugins: [
laravel({
input: [
'resources/css/app.css',
'resources/js/app.js',
],
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
server: detectServerConfig(host),
});
function detectServerConfig(host) {
let keyPath = resolve(homedir(), `.config/valet/Certificates/${host}.key`)
let certificatePath = resolve(homedir(), `.config/valet/Certificates/${host}.crt`)
if (!fs.existsSync(keyPath)) {
return {}
}
if (!fs.existsSync(certificatePath)) {
return {}
}
return {
hmr: {host},
host,
https: {
key: fs.readFileSync(keyPath),
cert: fs.readFileSync(certificatePath),
},
}
}
Level 11
Now I got this
Blocking of a multi-origin request (Cross-Origin Request): the "Same Origin" policy does not allow consulting the remote resource located at https://project.laravel.test:5173/resources/js/app.js. Reason: CORS request failed. Status code: (null).
and without style my login page
Level 102
@0mar this generally happens if the protocol (Http vs https) or domain differs
When you get the error, you have https://project.laravel.test in the address bar in the browser?
Level 11
@Sinnbeck Yes https I don't have this problem when I run valet unsecure project.laravel.test and then run it on http
Level 102
@0mar ok then I'm unsure. Maybe another Mac user with valet has a solution
Level 11
@Sinnbeck Ok thank you so much
Level 11
It was the same when I added
server: {
https: true,
host: 'project.laravel.test',
},
before I found freek.dev code
Level 11
@sinnbeck Hey again
I went to https://project.laravel.test:5173/resources/js/app.js and then I have accepted the security warning from there. Everything works fine now. Thank you so much
1 like
Please or to participate in this conversation.