fix(web): upgrade http OSS URLs to https to fix mixed-content block
Aliyun OSS sometimes returns presigned URLs as http:// even though every
page here is served over https:// -- the browser silently blocks these
as mixed content, which is why images (e.g. avatar) failed to display
after upload. Added upgradeToHttps() and wired it into fileDownloadUrl()
(the single chokepoint every image/attachment fetch in the app resolves
through) plus the three chat-attachment send paths, so both freshly
fetched and newly-persisted URLs get the scheme fix.
Also fixed ProfileSettingsPage's avatar upload handler, which extracted
the file id by parsing the upload response's `url` with .split('/').pop()
instead of just reading the `file_id` field the response already
provides -- fragile against exactly this kind of full-URL response and
the most likely actual trigger for the reported bug.
vite.config.ts: dev server port now respects $PORT if set, falls back
to 8094 -- unrelated cleanup, needed it to run a second local dev
server for verification alongside another concurrent session's.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Sonnet 5
parent
70cc977e16
commit
e78437cb2a
@@ -85,9 +85,8 @@ export function ProfileSettingsPage() {
|
||||
const avatarMutation = useMutation({
|
||||
mutationFn: async (file: File) => {
|
||||
const uploaded = await uploadFile(file);
|
||||
const fileId = uploaded.url.split('/').pop() || '';
|
||||
if (!query.data) throw new Error('尚未加载');
|
||||
return updateMyProfile({ avatar_file_id: fileId, version: query.data.version });
|
||||
return updateMyProfile({ avatar_file_id: uploaded.file_id, version: query.data.version });
|
||||
},
|
||||
onSuccess: (data) => {
|
||||
queryClient.setQueryData(['my-profile'], (prev: typeof query.data) => (prev ? { ...prev, ...data } : data));
|
||||
|
||||
@@ -72,6 +72,16 @@ export function fileAuthHeaders(): Record<string, string> {
|
||||
return { 'X-MeetingIM-APIKey': API_KEY, Authorization: `Token ${authToken()}` };
|
||||
}
|
||||
|
||||
/**
|
||||
* Some backend-issued absolute URLs (e.g. Aliyun OSS presigned URLs) come back as `http://` even
|
||||
* though every page in this app is served over `https://` -- the browser blocks those as mixed
|
||||
* content before any of our code sees a response. There's no legitimate case where this app needs
|
||||
* to fetch a plain-http resource, so upgrading the scheme here is safe and has no downside.
|
||||
*/
|
||||
export function upgradeToHttps(url: string): string {
|
||||
return url.startsWith('http://') ? `https://${url.slice('http://'.length)}` : url;
|
||||
}
|
||||
|
||||
/**
|
||||
* Absolute download URL for a file reference returned by uploadFile() or a received attachment.
|
||||
* The upload response's `url` (e.g. "/v0/file/s/file123") is already rooted at the tenant's file
|
||||
@@ -79,7 +89,7 @@ export function fileAuthHeaders(): Record<string, string> {
|
||||
* fileBase() down to just its origin before appending, rather than concatenating the two paths.
|
||||
*/
|
||||
export function fileDownloadUrl(refUrl: string): string {
|
||||
if (refUrl.startsWith('http')) return refUrl;
|
||||
if (refUrl.startsWith('http')) return upgradeToHttps(refUrl);
|
||||
const origin = fileBase().replace(/\/v0\/file.*$/, '');
|
||||
return `${origin}${refUrl}`;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { Drafty, type Topic } from 'tinode-sdk';
|
||||
|
||||
import { uploadFile } from '@/lib/api/upload';
|
||||
import { uploadFile, upgradeToHttps } from '@/lib/api/upload';
|
||||
import { MAX_INBAND_ATTACHMENT_SIZE } from '@/lib/config';
|
||||
import { newClientMid } from '@/lib/tinode/send';
|
||||
|
||||
@@ -43,7 +43,7 @@ export async function sendImage(topic: Topic, file: File): Promise<unknown> {
|
||||
? Drafty.insertImage(undefined, 0, { mime: file.type, bits: await fileToBase64(file), width, height, filename: file.name, size: file.size })
|
||||
: Drafty.insertImage(undefined, 0, {
|
||||
mime: file.type,
|
||||
refurl: (await uploadFile(file, topic.name)).url,
|
||||
refurl: upgradeToHttps((await uploadFile(file, topic.name)).url),
|
||||
width,
|
||||
height,
|
||||
filename: file.name,
|
||||
@@ -58,7 +58,7 @@ export async function sendFile(topic: Topic, file: File): Promise<unknown> {
|
||||
const content =
|
||||
file.size <= MAX_INBAND_ATTACHMENT_SIZE
|
||||
? Drafty.attachFile(undefined, { mime: file.type, data: await fileToBase64(file), filename: file.name, size: file.size })
|
||||
: Drafty.attachFile(undefined, { mime: file.type, refurl: (await uploadFile(file, topic.name)).url, filename: file.name, size: file.size });
|
||||
: Drafty.attachFile(undefined, { mime: file.type, refurl: upgradeToHttps((await uploadFile(file, topic.name)).url), filename: file.name, size: file.size });
|
||||
const msg = topic.createMessage(content, false);
|
||||
msg.head = Object.assign(msg.head || {}, { 'x-im-type': 'file', 'x-im-client-mid': newClientMid() });
|
||||
return topic.publishDraft(msg, Promise.resolve());
|
||||
@@ -79,7 +79,7 @@ export async function sendVoice(topic: Topic, blob: Blob, durationMs: number): P
|
||||
? Drafty.insertAudio(undefined, 0, { mime: file.type, bits: await fileToBase64(file), duration: durationMs, size: file.size, filename: file.name })
|
||||
: Drafty.insertAudio(undefined, 0, {
|
||||
mime: file.type,
|
||||
refurl: (await uploadFile(file, topic.name)).url,
|
||||
refurl: upgradeToHttps((await uploadFile(file, topic.name)).url),
|
||||
duration: durationMs,
|
||||
size: file.size,
|
||||
filename: file.name,
|
||||
|
||||
+1
-1
@@ -18,7 +18,7 @@ export default defineConfig({
|
||||
__APP_VERSION__: JSON.stringify(pkg.version),
|
||||
},
|
||||
server: {
|
||||
port: 8094,
|
||||
port: process.env.PORT ? Number(process.env.PORT) : 8094,
|
||||
// Same-origin dev proxy for the REST layer only -- avoids CORS entirely (the browser only ever
|
||||
// sees http://localhost:8094) so a resolved tenant's *relative* endpoints ("/v1/im", "/v0/file")
|
||||
// work unmodified in local dev, same idea as the old app's hand-rolled dev-proxy-server.js, just
|
||||
|
||||
Reference in New Issue
Block a user