{"id":551,"date":"2025-12-06T16:12:01","date_gmt":"2025-12-06T08:12:01","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=551"},"modified":"2025-12-06T16:12:01","modified_gmt":"2025-12-06T08:12:01","slug":"%e5%89%8d%e7%ab%af%e9%aa%8c%e8%af%81%e4%b8%8b%e8%b7%a8%e5%9f%9f%e9%97%ae%e9%a2%98%e8%a7%a3%e5%86%b3%e6%96%b9%e6%a1%88npm%e9%aa%8c%e8%af%81","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2025\/12\/06\/%e5%89%8d%e7%ab%af%e9%aa%8c%e8%af%81%e4%b8%8b%e8%b7%a8%e5%9f%9f%e9%97%ae%e9%a2%98%e8%a7%a3%e5%86%b3%e6%96%b9%e6%a1%88npm%e9%aa%8c%e8%af%81\/","title":{"rendered":"\u524d\u7aef\u9a8c\u8bc1\u4e0b\u8de8\u57df\u95ee\u9898\u89e3\u51b3\u65b9\u6848(npm\u9a8c\u8bc1)"},"content":{"rendered":"\n

\u4e0b\u9762\u7ed9\u4f60\u4e00\u4efd \u300a\u524d\u7aef\u9a8c\u8bc1\u4e0b\u8de8\u57df\u95ee\u9898\u7684\u89e3\u51b3\u65b9\u6848\uff08\u542b npm \u672c\u5730\u9a8c\u8bc1\u65b9\u5f0f\uff09\u300b<\/strong>\u2014\u2014\u6700\u65b0\u3001\u5b8c\u6574\u3001\u53ef\u76f4\u63a5\u5b9e\u64cd\u3002<\/p>\n\n\n\n

\u5982\u679c\u4f60\u6b63\u5728\u672c\u5730\u5f00\u53d1\u63a5\u53e3\u548c\u524d\u7aef\uff0c\u8fd9\u5957\u6d41\u7a0b\u53ef\u4ee5 \u5feb\u901f\u6a21\u62df\u8de8\u57df<\/em>\u3001\u9a8c\u8bc1\u8de8\u57df\u5931\u8d25\u573a\u666f<\/em>\u3001\u9a8c\u8bc1 CORS \u89e3\u51b3\u65b9\u6848\u662f\u5426\u751f\u6548<\/em>\u3002<\/p>\n\n\n\n

\n\n\n\n

\ud83d\ude80 \u4e00\u3001\u524d\u7aef\u9a8c\u8bc1\u8de8\u57df\u95ee\u9898\uff08CORS\uff09\u7684\u539f\u7406<\/h1>\n\n\n\n

\u8de8\u57df\u4ea7\u751f\u4e8e\u6d4f\u89c8\u5668 \u540c\u6e90\u7b56\u7565<\/strong>\uff1a<\/p>\n\n\n\n

\n

\u534f\u8bae\u3001\u57df\u540d\u3001\u7aef\u53e3\u4efb\u610f\u4e00\u4e2a\u4e0d\u540c \u2192 \u90fd\u7b97\u8de8\u57df\u3002<\/p>\n<\/blockquote>\n\n\n\n

\u793a\u4f8b\uff1a<\/p>\n\n\n\n

\u524d\u7aef<\/th>\u540e\u7aef<\/th>\u662f\u5426\u8de8\u57df<\/th><\/tr><\/thead>
http:\/\/localhost:5173<\/a><\/td>http:\/\/localhost:3000<\/a><\/td>\u8de8\u57df<\/strong><\/td><\/tr>
http:\/\/abc.com<\/a><\/td>https:\/\/abc.com<\/a><\/td>\u8de8\u57df<\/strong><\/td><\/tr>
https:\/\/abc.com<\/a><\/td>https:\/\/api.abc.com<\/a><\/td>\u8de8\u57df<\/strong><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

\u8de8\u57df\u672c\u8d28\u4e0a\u662f\u6d4f\u89c8\u5668\u62e6\u622a\u8bf7\u6c42\uff0c\u4e0d\u662f\u670d\u52a1\u5668\u9519\u8bef\u3002<\/p>\n\n\n\n

\n\n\n\n

\u2b50 \u4e8c\u3001\u6700\u5feb\u901f\u9a8c\u8bc1\u8de8\u57df\u9519\u8bef\u7684\u529e\u6cd5\uff08npm \u65b9\u5f0f\uff09<\/h1>\n\n\n\n

1\ufe0f\u20e3 \u4f7f\u7528\u4efb\u4f55\u672c\u5730\u524d\u7aef\u670d\u52a1\u5668<\/h2>\n\n\n\n

\uff08\u5982 Vite\u3001webpack\u3001http-server\uff09<\/p>\n\n\n\n

\u542f\u52a8\uff1a<\/p>\n\n\n

\nnpm create vite@latest my-app\ncd my-app\nnpm install\nnpm run dev\n\n<\/pre><\/div>\n\n\n
\u524d\u7aef \u5730\u5740\u4f8b\u5982\uff1a<\/p>\n\n\n
\nhttp:\/\/localhost:5173\n\n<\/pre><\/div>\n\n\n
\n\n\n\n
2\ufe0f\u20e3 \u672c\u5730\u968f\u4fbf\u5199\u4e00\u4e2a\u63a5\u53e3\uff08Node Express\uff09<\/h2>\n\n\n
\nnpm init -y\nnpm i express\n\n<\/pre><\/div>\n\n\n
\u5efa\u7acb\uff1aserver.js<\/code><\/p>\n\n\n
\nconst express = require("express");\nconst app = express();\n\napp.get("\/api\/data", (req, res) => {\n  res.json({ msg: "hello" });\n});\n\napp.listen(3000, () => console.log("API running on 3000"));\n\n<\/pre><\/div>\n\n\n
\u542f\u52a8\uff1a<\/p>\n\n\n
\nnode server.js\n\n<\/pre><\/div>\n\n\n
\u540e\u7aef\u5730\u5740\uff1a<\/p>\n\n\n
\nhttp:\/\/localhost:3000\n\n<\/pre><\/div>\n\n\n
\u8bbf\u95ee\u65f6\u4f1a\u62a5\uff1a<\/p>\n\n\n
\nAccess to fetch at 'http:\/\/localhost:3000\/api\/data'\nfrom origin 'http:\/\/localhost:5173' has been blocked by CORS policy\n\n<\/pre><\/div>\n\n\n
\u8fd9\u6837\u4f60 \u6210\u529f\u7528 npm \u9a8c\u8bc1\u8de8\u57df\u95ee\u9898<\/strong>\u3002<\/p>\n\n\n\n
\n\n\n\n
\u2b50 \u4e09\u3001\u89e3\u51b3\u8de8\u57df\u7684 5 \u5927\u65b9\u6cd5\uff08\u9644\u53ef\u8fd0\u884c\u4ee3\u7801\uff09<\/h1>\n\n\n\n
\n\n\n\n
\u2705 \u65b9\u6848 1\uff1a\u540e\u7aef\u5141\u8bb8 CORS\uff08\u6700\u4f73\u65b9\u6848\uff09<\/h1>\n\n\n\n
\u5b89\u88c5 CORS \u4e2d\u95f4\u4ef6\uff08Express\uff09\uff1a<\/p>\n\n\n
\nnpm i cors\n\n<\/pre><\/div>\n\n\n
\u4f7f\u7528\uff1a<\/p>\n\n\n
\nconst cors = require("cors");\napp.use(cors());\n\n<\/pre><\/div>\n\n\n
\u53ef\u6307\u5b9a\u5141\u8bb8\u7684\u524d\u7aef\u57df\u540d\uff1a<\/p>\n\n\n
\napp.use(\n  cors({\n    origin: "http:\/\/localhost:5173",\n    credentials: true\n  })\n);\n\n<\/pre><\/div>\n\n\n
\u8fd9\u662f\u8de8\u57df\u7684\u6700\u6807\u51c6\u3001\u6700\u5b89\u5168\u505a\u6cd5\u3002<\/p>\n\n\n\n
\n\n\n\n
\u2705 \u65b9\u6848 2\uff1a\u4f7f\u7528 Node \u53cd\u5411\u4ee3\u7406\uff08\u524d\u7aef\u4e0d\u8de8\u57df\uff09<\/h1>\n\n\n\n
\uff08\u9002\u7528\u4e8e Vue\u3001React\u3001Vite \u9879\u76ee\uff09<\/p>\n\n\n\n
Vite \u914d\u7f6e\u4ee3\u7406\uff1a<\/h3>\n\n\n\n
vite.config.js<\/code><\/p>\n\n\n
\nexport default {\n  server: {\n    proxy: {\n      "\/api": {\n        target: "http:\/\/localhost:3000",\n        changeOrigin: true,\n        rewrite: path => path.replace(\/^\\\/api\/, "")\n      }\n    }\n  }\n};\n\n<\/pre><\/div>\n\n\n
\u6240\u6709\u8bf7\u6c42\uff1a<\/p>\n\n\n
\nhttp:\/\/localhost:5173\/api\/data\n\n<\/pre><\/div>\n\n\n
\u81ea\u52a8\u88ab\u4ee3\u7406\u5230\uff1a<\/p>\n\n\n
\nhttp:\/\/localhost:3000\/data\n\n<\/pre><\/div>\n\n\n
\u6d4f\u89c8\u5668\u4e0d\u4f1a\u89e6\u53d1\u8de8\u57df\u3002<\/p>\n\n\n\n
\n\n\n\n
\u2705 \u65b9\u6848 3\uff1aNginx \u53cd\u5411\u4ee3\u7406\uff08\u751f\u4ea7\u73af\u5883\u5e38\u7528\uff09<\/h1>\n\n\n\n
nginx.conf<\/code><\/p>\n\n\n
\nlocation \/api\/ {\n    proxy_pass http:\/\/localhost:3000\/;\n}\n\n<\/pre><\/div>\n\n\n
\u540c\u57df\u8f6c\u53d1\uff0c\u4ece\u6839\u6e90\u4e0a\u89e3\u51b3\u8de8\u57df\u3002<\/p>\n\n\n\n
\n\n\n\n
\u2705 \u65b9\u6848 4\uff1aJSONP\uff08\u4ec5 GET\u3001\u8001\u65b9\u6848\uff09<\/h1>\n\n\n
\n&lt;script>\n  function cb(data) { console.log(data); }\n&lt;\/script>\n\n&lt;script src="http:\/\/localhost:3000\/jsonp?callback=cb">&lt;\/script>\n\n<\/pre><\/div>\n\n\n
\u540e\u7aef\u8fd4\u56de\uff1a<\/p>\n\n\n
\nres.send(`cb(${JSON.stringify(data)})`)\n\n<\/pre><\/div>\n\n\n
\u5df2\u4e0d\u63a8\u8350\uff0c\u4f46\u9762\u8bd5\u53ef\u63d0\u3002<\/p>\n\n\n\n
\n\n\n\n
\u2705 \u65b9\u6848 5\uff1a\u6d4f\u89c8\u5668\u5173\u95ed\u8de8\u57df\u5b89\u5168\uff08\u4ec5\u7528\u4e8e\u8c03\u8bd5\uff09<\/h1>\n\n\n\n
Chrome\uff1a<\/p>\n\n\n
\n--disable-web-security --user-data-dir\n\n<\/pre><\/div>\n\n\n
\u26a0\ufe0f \u4ec5\u9650\u672c\u5730\u8c03\u8bd5\uff0c\u4e0d\u53ef\u7528\u4e8e\u6b63\u5f0f\u73af\u5883\u3002<\/p>\n\n\n\n
\n\n\n\n
\u2b50 \u56db\u3001\u5982\u4f55\u9a8c\u8bc1\u8de8\u57df\u89e3\u51b3\u662f\u5426\u6210\u529f\uff1f<\/h1>\n\n\n\n
\u4f60\u53ef\u4ee5\u7528 npm \u521b\u5efa\u4e00\u4e2a\u7b80\u5355\u524d\u7aef\u9875\u9762\uff1a<\/p>\n\n\n\n
src\/App.vue<\/code>\uff08\u4ee5 Vue \u4e3a\u4f8b\uff09<\/p>\n\n\n
\n&lt;script setup>\nasync function test() {\n  const res = await fetch("\/api\/data");\n  console.log(await res.json());\n}\n&lt;\/script>\n\n&lt;template>\n  &lt;button @click="test">\u6d4b\u8bd5\u8de8\u57df&lt;\/button>\n&lt;\/template>\n\n<\/pre><\/div>\n\n\n
\u70b9\u51fb\u6309\u94ae\uff1a<\/p>\n\n\n\n
    \n
  • \u6ca1\u6709\u62a5 CORS \u9519\u8bef<\/strong>\u8bf4\u660e\u8de8\u57df\u95ee\u9898\u89e3\u51b3 \u2714\ufe0f<\/li>\n\n\n\n
  • \u8fd4\u56de\u6b63\u5e38\u6570\u636e<\/strong>\u8bf4\u660e\u4ee3\u7406\u6216 CORS \u8bbe\u7f6e\u6210\u529f \u2714\ufe0f<\/li>\n<\/ul>\n\n\n\n
    \n\n\n\n
    \u2b50 \u4e94\u3001\u5bf9\u6bd4\u603b\u7ed3\uff08\u6e05\u6670\u6613\u7406\u89e3\uff09<\/h1>\n\n\n\n
    \u65b9\u6848<\/th>\u9002\u7528\u573a\u666f<\/th>\u4f18\u70b9<\/th>\u7f3a\u70b9<\/th><\/tr><\/thead>
    \u540e\u7aef CORS<\/td>\u6700\u6807\u51c6<\/td>\u5b89\u5168\u3001\u6b63\u89c4<\/td>\u9700\u540e\u7aef\u914d\u5408<\/td><\/tr>
    \u524d\u7aef\u4ee3\u7406\uff08Vite devServer\uff09<\/td>\u672c\u5730\u5f00\u53d1<\/td>\u65e0\u8de8\u57df<\/td>\u4ec5\u5f00\u53d1\u73af\u5883<\/td><\/tr>
    Nginx \u53cd\u5411\u4ee3\u7406<\/td>\u751f\u4ea7\u73af\u5883<\/td>\u9ad8\u6027\u80fd\u3001\u7a33\u5b9a<\/td>\u8981\u914d\u7f6e\u670d\u52a1\u5668<\/td><\/tr>
    JSONP<\/td>\u517c\u5bb9\u65e7\u7cfb\u7edf<\/td>\u7b80\u5355<\/td>\u53ea\u652f\u6301 GET<\/td><\/tr>
    \u6d4f\u89c8\u5668\u5173\u95ed\u5b89\u5168<\/td>\u8c03\u8bd5<\/td>\u5feb<\/td>\u4e0d\u5b89\u5168<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    \u597d\uff0c\u6211\u7ed9\u4f60\u6574\u7406\u4e00\u4efd \u300a\u524d\u7aef\u8de8\u57df\u89e3\u51b3\u65b9\u6848\u5408\u96c6\uff08Vue2\/Vue3\/React + Node.js\/Vite \u5168\u5957\u53ef\u8fd0\u884c\u793a\u4f8b\uff09\u300b<\/strong>\uff0c\u5e76\u9644 npm \u672c\u5730\u9a8c\u8bc1\u6b65\u9aa4\uff0c2025 \u6700\u65b0\u6700\u5168\u3002<\/p>\n\n\n\n
    \n\n\n\n
    \ud83d\ude80 \u524d\u7aef\u8de8\u57df\u89e3\u51b3\u65b9\u6848\u5408\u96c6\uff082025 \u5b8c\u6574\u7248\uff09<\/h1>\n\n\n\n
    \u8de8\u57df\u95ee\u9898\u4ea7\u751f\u4e8e\u6d4f\u89c8\u5668\u7684 \u540c\u6e90\u7b56\u7565<\/strong>\uff1a<\/p>\n\n\n\n
      \n
    • \u534f\u8bae\u3001\u57df\u540d\u3001\u7aef\u53e3\u4efb\u610f\u4e00\u4e2a\u4e0d\u540c \u2192 \u90fd\u7b97\u8de8\u57df<\/li>\n\n\n\n
    • \u524d\u7aef\u8bf7\u6c42\u8de8\u57df\u8d44\u6e90\u4f1a\u88ab\u6d4f\u89c8\u5668\u62e6\u622a\uff0c\u4e0d\u662f\u7f51\u7edc\u9519\u8bef<\/li>\n<\/ul>\n\n\n\n
      \n\n\n\n
      \u4e00\u3001\u73af\u5883\u51c6\u5907\uff08npm \u672c\u5730\u9a8c\u8bc1\uff09<\/h1>\n\n\n\n
      1\ufe0f\u20e3 \u524d\u7aef\u9879\u76ee\uff08Vue3 \u793a\u4f8b\uff09<\/h3>\n\n\n
      \nnpm create vite@latest my-app\ncd my-app\nnpm install\nnpm run dev\n\n<\/pre><\/div>\n\n\n
        \n
      • \u5730\u5740\u793a\u4f8b\uff1ahttp:\/\/localhost:5173<\/code><\/li>\n<\/ul>\n\n\n\n
        \n\n\n\n
        2\ufe0f\u20e3 \u540e\u7aef Node.js \u6a21\u62df\u63a5\u53e3<\/h3>\n\n\n
        \nnpm init -y\nnpm install express cors\n\n<\/pre><\/div>\n\n\n
        server.js<\/code>:<\/p>\n\n\n
        \nconst express = require("express");\nconst cors = require("cors");\nconst app = express();\n\n\/\/ \u5141\u8bb8\u6240\u6709\u6765\u6e90\uff08\u53ef\u6539\u4e3a\u7279\u5b9a\u57df\u540d\uff09\napp.use(cors());\n\napp.get("\/api\/data", (req, res) => {\n  res.json({ msg: "hello from server" });\n});\n\napp.listen(3000, () => console.log("API running on http:\/\/localhost:3000"));\n\n<\/pre><\/div>\n\n\n
        \n\n\n\n
        3\ufe0f\u20e3 npm \u672c\u5730\u9a8c\u8bc1\u8de8\u57df<\/h3>\n\n\n\n
        \u524d\u7aef\u8bf7\u6c42\uff1a<\/p>\n\n\n
        \nfetch("http:\/\/localhost:3000\/api\/data")\n  .then(res => res.json())\n  .then(console.log)\n  .catch(console.error);\n\n<\/pre><\/div>\n\n\n