Web dev 討論區 [1]

The response "Access-Control-Allow-Origin" must match your request "Origin" header. "*" is used for config only. And you missing both Access-Control-Allow-Methods and Access-Control-Allow-Header.

read the preflight doc example.

好似得左



想問多個問題，我見Access-Control-Allow-Origin好似只可以set一個，而家只係加左個vm ip which is the frontend web page on the vm at port 80，有無可能同時allow兩個？ 因為我想外面連到個網站之餘，dev個陣仲會用localhost連，係咪只係可以dev個時轉做localhost?

update:
我將Access-Control-Allow-Origin個part改做咁就work 感激巴打

const allowedOrigins = ['http://34.41.xxx.xxx, 'http://localhost:5173'];

app.use((req, res, next) => {
  const origin = req.headers.origin;
  if (allowedOrigins.includes(origin)) {
    res.setHeader('Access-Control-Allow-Origin', origin);
  }

  // Add the rest of the CORS headers here as needed
  res.setHeader('Access-Control-Allow-Methods', 'GET,POST,DELETE,OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  res.setHeader('Access-Control-Allow-Credentials', 'true');

  // Pass to next layer of middleware
  next();
});

Great!
But I would suggest you use the cors middleware and try to get the configuration right, as your implement is very prelim:
1) You should also check if the method is OPTIONS, and DO NOT call next() and response an 204 without content.
2) Add Access-Control-Max-Age for browser to cache your response and reduce preflight requests.

Now that you have a better understanding of CORS headers, try reading the cors middleware implementation, it's only 1 file.
https://github.com/expressjs/cors/blob/master/lib/index.js

nodejs係一個用黎喺browser以外嘅地方run js嘅environment 入面都係用chrome V8 engine
負責去控制event loop, timer, i/o個啲嘢
而近幾個node version有嘅worker thread都係nodejs去幫手實現multithreading 避免某啲function block住個event loop太耐

npm npx個啲係一個package manager去處理你package入面啲嘢

即係用node.js 就可以取替寫web 時瀏覽器既角色

再了解多d 先

多謝Ching指點

咁樣講 你用nextjs 即係有個web server 而呢樣嘢唔係喺browser入面行 所以需要有node js 去負責行呢啲js嘅code

而web page入面有add event listener/dom個類嘢係需要client side (browser) 去行 所以個一部分就可以係broswer嘅環境直接行web page入面js啲code

想問下，點解平時就咁cors() default settings(without option method)又會得？

If you do not need browser to include Credentials (e.g. cookies) or any Custom headers, default setting should work fine.

係咪即係我其實nom run dev 既時候

已經不經不覺用左node js?

一個行js 既server runtime environment

唔一定, 但係通常npm run dev即係node/next index.js, 你可以係package.json入面睇返dev係行咩command

係
npm run dev其實係用緊npm-cli呢個command line tool，run係呢個tool嘅其中1個available command (仲有install, help等等好多)，dev係run command接受嘅argument
咁因為npm-cli係用js寫的，同埋入面有用到node.js提供嘅API，換言之node.js係佢嘅dependencies，所以要裝node.js先可以運行到npm-cli

好清晰
多謝ching 指點

npm係package manager
node係js interpreter，純粹要嚟run js
browser係包含一個js interpreter，但佢唔只係咁，佢亦都有css render、html render，gui、etc...

你行npm run dev嘅時候，好多時就用咗node，但唔一定，因為而家已經有其他interpreter

樓上講到你用嘅tools會涉及nodejs, 即係你會行command嘅時候「用nodejs執行左JS code」
但多數僱主想知道嘅係你有無用nodejs嘅環境做過development
最簡單黎講就係你識唔識寫frontend以外嘅JS
一般黎講就係寫backend application, 例如用express/nestjs整http server
或者用javascript寫script去做file input/output, 寫cli 等等

nodejs雖然都係用javascript嘅syntax,但個環境自帶左好多desktop先有而browser無嘅function(package)(API), 最常見有path, fs (file system), stream, http, child-process 等等
呢d 就係d人所謂嘅「nodejs知識」，係同browser 嘅API完全唔同

所以總括而言，你用javascript嘅時候係會遇到兩種特別functions, 一係ECMAScript spec定義左嘅功能，例如 array methods, setTimeout, Promise, 二係platform specific嘅function, 例如browser 有document, window, fetch, 而nodejs有process, path, fs, (而家都有fetch了)

呢個角度真係第一次知

又明多左

呢個post d ching 真係連登清泉

學到好多野

多謝

expressjs 寫api, cms 有冇現成野可以用，好似唔係好搵到，由頭寫cms又好晒時間。

唔介意寫php既話，其實仲多選擇過Nodejs
好似OctoberCMS咁

再唔係用headless CMS都得，連backend 都唔駛寫，只要喺client side call番API就可以

近排係reddit好似見到InertiaJS, 係laravel+react/vue/svelte，要識少少php

好似幾好咁

題外話，大家有興趣可以花一個鐘睇下nodejs documentary
open source嘅drama次次都好精彩
https://youtu.be/LB8KwiiUGy0?si=XZ59r2zB3jRXYomH

想知大家做full stack會用邊隻orm 或者點handle db啲野
暫時我嘅方案有兩個for之後可能做下freelance
1. nextjs(full stack) + drizzle/prisma
2. nextjs做frontend + .net做backend

因為本身做緊full stack react + .net + ef
1516個位係我一定係用react做front-end
如果用返js orm就唔洗maintain多個server 就算之後要放api nextjs都做到
但係又慣左用ef 加上我睇返js嘅orm又有各色各樣嘅問題 例如type safety, performance
如果比大家會點揀?或者有無啲concern位/經驗可以參考下?

懶就用prisma就得，但又唔少問題，例如deploy上serverless麻煩d(個binary好大)，同埋佢個native join仲係唔喺好成熟，變相會做左好多個DB query。

講多少少prisma背景，佢地係graphql爆紅時期(2017-2018)彈起嘅一個project，做左好多sneaky嘅舉動去宣傳自己，例如完全無mention prisma嘅情況開左個graphql-boilerplates嘅account同埋howtographql網站，扮community project support by prisma但係其實全部自己友。直到3年前先扮晒嘢加返d mention。所以成個prisma team專職係做marketing，整d野出黎好似好有噱頭，但一個唔覺意就abandon/deprecate。graphql-nexus / nexus-prisma又係另一個例子。

其實而家已經有好多typesafe嘅query builder，最出名應該係drizzle同kysely，你唔介意唔typesafe嘅話knex都幾好。同埋唔好比d人睇死話“JS dev has 1000 ways to avoid SQL”，學下SQL其實都唔係咁難，唔好太依賴包裝好嘅ORM

延伸閲讀：
https://github.com/howtographql/howtographql/commit/9aa844d7e554c54994e5fe5e4a46e23028481155
https://www.prisma.io/blog/series/what-is-nexus-wsobadcm7oju
https://github.com/graphql-nexus/nexus
https://nexusjs.org/docs/plugins/prisma/removing-the-nexus-plugin-prisma
https://github.com/graphql-nexus/nexus-prisma/graphs/contributors?from=2023-03-15&to=2024-03-31&type=c

[rant]
我想講嘅係，我只係一個prisma hater，但佢哋係一班騙子，呃完funding去做左基本野之後無能力再improve，所以早走早着
[/rant]

唔該晒ching