{"id":49310,"date":"2023-08-17T13:36:36","date_gmt":"2022-11-14T05:51:39","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e6%9c%89%e5%85%b3react-django%e7%9a%84%e7%99%bb%e5%bd%95%e5%8a%9f%e8%83%bd%e7%9a%84%e5%88%9b%e5%bb%ba%e6%96%b9%e6%b3%95%ef%bc%8c%e8%af%b7%e8%bf%9b%e8%a1%8c%e8%af%a6%e7%bb%86%e8%a7%a3%e9%87%8a\/"},"modified":"2024-04-30T18:56:13","modified_gmt":"2024-04-30T10:56:13","slug":"%e6%9c%89%e5%85%b3react-django%e7%9a%84%e7%99%bb%e5%bd%95%e5%8a%9f%e8%83%bd%e7%9a%84%e5%88%9b%e5%bb%ba%e6%96%b9%e6%b3%95%ef%bc%8c%e8%af%b7%e8%bf%9b%e8%a1%8c%e8%af%a6%e7%bb%86%e8%a7%a3%e9%87%8a","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e6%9c%89%e5%85%b3react-django%e7%9a%84%e7%99%bb%e5%bd%95%e5%8a%9f%e8%83%bd%e7%9a%84%e5%88%9b%e5%bb%ba%e6%96%b9%e6%b3%95%ef%bc%8c%e8%af%b7%e8%bf%9b%e8%a1%8c%e8%af%a6%e7%bb%86%e8%a7%a3%e9%87%8a\/","title":{"rendered":"\u6709\u5173[React + Django]\u7684\u767b\u5f55\u529f\u80fd\u7684\u521b\u5efa\u65b9\u6cd5\uff0c\u8bf7\u8fdb\u884c\u8be6\u7ec6\u89e3\u91ca"},"content":{"rendered":"<h2>\u603b\u7ed3<\/h2>\n<p>\u4f7f\u7528React\u548cDjango\u6765\u521b\u5efa\u767b\u5f55\u9875\u9762\uff0c\u5e76\u4f7f\u7528\u81ea\u5df1\u7f16\u5199\u7684\u767b\u5f55API\u6765\u5b9e\u73b0\u767b\u5f55\u6210\u529f\u540e\u7684\u9875\u9762\u8df3\u8f6c\u5904\u7406\u3002<\/p>\n<h2>\u524d\u63d0 t\u00ed)<\/h2>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">Django\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u6210\u6e08\u307f<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">React\u306e\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u4f5c\u6210\u6e08\u307f<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">Form\u306e\u4f5c\u6210\u306fReact Hook Form\u3092\u4f7f\u7528<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">RestAPI\u3092\u4f5c\u6210\u3059\u308b\u305f\u3081Django Rest Framework\u3092\u4f7f\u7528<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\u4eca\u56de\u306fReact\u30e1\u30a4\u30f3\u3067\u8aac\u660e\u3059\u308b\u306e\u3067Django\u306b\u3064\u3044\u3066\u306fCSRF\u3068CORS\u4ee5\u5916\u8a73\u3057\u304f\u8aac\u660e\u3057\u307e\u305b\u3093<\/ul>\n<h2>\u6587\u4ef6\u67b6\u6784<\/h2>\n<pre class=\"post-pre\"><code>tree\r\n\u30fb\r\n\u251c\u2500\u2500 .gitignore\r\n\u251c\u2500\u2500 README.md\r\n\u251c\u2500\u2500 backend\r\n\u2502   \u251c\u2500\u2500 application\r\n\u2502   \u2502   \u251c\u2500\u2500 __init__.py\r\n\u2502   \u2502   \u251c\u2500\u2500 admin.py\r\n\u2502   \u2502   \u251c\u2500\u2500 apps.py\r\n\u2502   \u2502   \u251c\u2500\u2500 fixtures\r\n\u2502   \u2502   \u2502   \u2514\u2500\u2500 fixture.json\r\n\u2502   \u2502   \u251c\u2500\u2500 migrations\r\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 __init__.py\r\n\u2502   \u2502   \u2502   \u2514\u2500\u2500 0001_initial.py\r\n\u2502   \u2502   \u251c\u2500\u2500 models\r\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 __init__.py\r\n\u2502   \u2502   \u2502   \u2514\u2500\u2500 user.py\r\n\u2502   \u2502   \u251c\u2500\u2500 permissions.py\r\n\u2502   \u2502   \u251c\u2500\u2500 serializers\r\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 __init__.py\r\n\u2502   \u2502   \u2502   \u2514\u2500\u2500 user.py\r\n\u2502   \u2502   \u251c\u2500\u2500 urls.py\r\n\u2502   \u2502   \u2514\u2500\u2500 views\r\n\u2502   \u2502       \u251c\u2500\u2500 __init__.py\r\n\u2502   \u2502       \u251c\u2500\u2500 login.py\r\n\u2502   \u2502       \u2514\u2500\u2500 user.py\r\n\u2502   \u251c\u2500\u2500 manage.py\r\n\u2502   \u251c\u2500\u2500 poetry.lock\r\n\u2502   \u251c\u2500\u2500 project\r\n\u2502   \u2502   \u251c\u2500\u2500 __init__.py\r\n\u2502   \u2502   \u251c\u2500\u2500 asgi.py\r\n\u2502   \u2502   \u251c\u2500\u2500 settings.py\r\n\u2502   \u2502   \u251c\u2500\u2500 urls.py\r\n\u2502   \u2502   \u2514\u2500\u2500 wsgi.py\r\n\u2502   \u2514\u2500\u2500 pyproject.toml\r\n\u251c\u2500\u2500 containers\r\n\u2502   \u251c\u2500\u2500 django\r\n\u2502   \u2502   \u251c\u2500\u2500 Dockerfile\r\n\u2502   \u2502   \u251c\u2500\u2500 Dockerfile.prd\r\n\u2502   \u2502   \u251c\u2500\u2500 entrypoint.prd.sh\r\n\u2502   \u2502   \u2514\u2500\u2500 entrypoint.sh\r\n\u2502   \u251c\u2500\u2500 front\r\n\u2502   \u2502   \u2514\u2500\u2500 Dockerfile\r\n\u2502   \u251c\u2500\u2500 nginx\r\n\u2502   \u2502   \u251c\u2500\u2500 Dockerfile\r\n\u2502   \u2502   \u2514\u2500\u2500 nginx.conf\r\n\u2502   \u2514\u2500\u2500 postgres\r\n\u2502       \u251c\u2500\u2500 Dockerfile\r\n\u2502       \u2514\u2500\u2500 init.sql\r\n\u251c\u2500\u2500 docker-compose.yml\r\n\u251c\u2500\u2500 frontend\r\n\u2502   \u251c\u2500\u2500 README.md\r\n\u2502   \u251c\u2500\u2500 package-lock.json\r\n\u2502   \u251c\u2500\u2500 package.json\r\n\u2502   \u251c\u2500\u2500 pages\r\n\u2502   \u2502   \u251c\u2500\u2500 404\r\n\u2502   \u2502   \u2502   \u2514\u2500\u2500 index.js\r\n\u2502   \u2502   \u251c\u2500\u2500 index.js\r\n\u2502   \u2502   \u251c\u2500\u2500 login_success\r\n\u2502   \u2502   \u2502   \u2514\u2500\u2500 index.js\r\n\u2514\u2500\u2500 static\r\n<\/code><\/pre>\n<p>\u8fd9\u6b21\u6211\u4eec\u8981\u89e3\u91ca\u7684\u662f\u4ee5\u4e0b\u7684\u6587\u4ef6<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">docker-compose.yml<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">nginx.conf<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">settings\/base.py<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">settings\/local.py<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">pages\/index.js<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">pages\/login_success\/index.js<\/ul>\n<p>\u6211\u4f1a\u9010\u4e00\u89e3\u91ca<\/p>\n<h2>Docker\u7684\u914d\u7f6e<\/h2>\n<p>\u8ba9\u524d\u7aef\u548c\u540e\u7aef\u80fd\u591f\u4e92\u76f8\u901a\u4fe1\u3002<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">docker-compose.yml<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">nginx.conf<\/ul>\n<p>\u8fdb\u884c\u521b\u5efa<\/p>\n<p>\u8bf7\u53c2\u8003\u4ee5\u4e0b\u6587\u7ae0\u4ee5\u83b7\u5f97\u6709\u5173\u672c\u6b21\u5173\u4e8e\u521b\u5efa\u767b\u5f55\u529f\u80fd\u7684\u8bf4\u660e\u7684\u8be6\u7ec6\u4fe1\u606f\u3002<\/p>\n<p>&nbsp;<\/p>\n<pre class=\"post-pre\"><code><span class=\"na\">version<\/span><span class=\"pi\">:<\/span> <span class=\"s1\">'<\/span><span class=\"s\">3.9'<\/span>\r\n\r\n<span class=\"na\">services<\/span><span class=\"pi\">:<\/span>\r\n  <span class=\"na\">db<\/span><span class=\"pi\">:<\/span>\r\n    <span class=\"na\">container_name<\/span><span class=\"pi\">:<\/span> <span class=\"s\">db<\/span>\r\n    <span class=\"na\">build<\/span><span class=\"pi\">:<\/span>\r\n      <span class=\"na\">context<\/span><span class=\"pi\">:<\/span> <span class=\"s\">.<\/span>\r\n      <span class=\"na\">dockerfile<\/span><span class=\"pi\">:<\/span> <span class=\"s\">containers\/postgres\/Dockerfile<\/span>\r\n    <span class=\"na\">volumes<\/span><span class=\"pi\">:<\/span>\r\n      <span class=\"pi\">-<\/span> <span class=\"s\">db_data:\/var\/lib\/postgresql\/data<\/span>\r\n    <span class=\"na\">healthcheck<\/span><span class=\"pi\">:<\/span>\r\n      <span class=\"na\">test<\/span><span class=\"pi\">:<\/span> <span class=\"s\">pg_isready -U \"${POSTGRES_USER:-postgres}\" || exit <\/span><span class=\"m\">1<\/span>\r\n      <span class=\"na\">interval<\/span><span class=\"pi\">:<\/span> <span class=\"s\">10s<\/span>\r\n      <span class=\"na\">timeout<\/span><span class=\"pi\">:<\/span> <span class=\"s\">5s<\/span>\r\n      <span class=\"na\">retries<\/span><span class=\"pi\">:<\/span> <span class=\"m\">5<\/span>\r\n    <span class=\"na\">environment<\/span><span class=\"pi\">:<\/span>\r\n      <span class=\"pi\">-<\/span> <span class=\"s\">POSTGRES_NAME<\/span>\r\n      <span class=\"pi\">-<\/span> <span class=\"s\">POSTGRES_USER<\/span>\r\n      <span class=\"pi\">-<\/span> <span class=\"s\">POSTGRES_PASSWORD<\/span>\r\n    <span class=\"na\">ports<\/span><span class=\"pi\">:<\/span>\r\n      <span class=\"pi\">-<\/span> <span class=\"s1\">'<\/span><span class=\"s\">5432:5432'<\/span> <span class=\"c1\"># \u30c7\u30d0\u30c3\u30b0\u7528<\/span>\r\n\r\n  <span class=\"na\">app<\/span><span class=\"pi\">:<\/span>\r\n    <span class=\"na\">container_name<\/span><span class=\"pi\">:<\/span> <span class=\"s\">app<\/span>\r\n    <span class=\"na\">build<\/span><span class=\"pi\">:<\/span>\r\n      <span class=\"na\">context<\/span><span class=\"pi\">:<\/span> <span class=\"s\">.<\/span>\r\n      <span class=\"na\">dockerfile<\/span><span class=\"pi\">:<\/span> <span class=\"s\">containers\/django\/Dockerfile<\/span>\r\n    <span class=\"na\">volumes<\/span><span class=\"pi\">:<\/span>\r\n      <span class=\"pi\">-<\/span> <span class=\"s\">.\/backend:\/code<\/span>\r\n      <span class=\"pi\">-<\/span> <span class=\"s\">.\/static:\/static<\/span>\r\n    <span class=\"na\">ports<\/span><span class=\"pi\">:<\/span>\r\n      <span class=\"pi\">-<\/span> <span class=\"s1\">'<\/span><span class=\"s\">8000:8000'<\/span>\r\n      <span class=\"c1\"># \u30c7\u30d0\u30c3\u30b0\u7528\u30dd\u30fc\u30c8<\/span>\r\n      <span class=\"pi\">-<\/span> <span class=\"s1\">'<\/span><span class=\"s\">8080:8080'<\/span>\r\n    <span class=\"na\">command<\/span><span class=\"pi\">:<\/span> <span class=\"s\">sh -c \"\/usr\/local\/bin\/entrypoint.sh\"<\/span>\r\n    <span class=\"na\">stdin_open<\/span><span class=\"pi\">:<\/span> <span class=\"kc\">true<\/span>\r\n    <span class=\"na\">tty<\/span><span class=\"pi\">:<\/span> <span class=\"kc\">true<\/span>\r\n    <span class=\"na\">env_file<\/span><span class=\"pi\">:<\/span>\r\n      <span class=\"pi\">-<\/span> <span class=\"s\">.env<\/span>\r\n    <span class=\"na\">depends_on<\/span><span class=\"pi\">:<\/span>\r\n      <span class=\"na\">db<\/span><span class=\"pi\">:<\/span>\r\n        <span class=\"na\">condition<\/span><span class=\"pi\">:<\/span> <span class=\"s\">service_healthy<\/span>\r\n\r\n  <span class=\"na\">mail<\/span><span class=\"pi\">:<\/span>\r\n    <span class=\"na\">container_name<\/span><span class=\"pi\">:<\/span> <span class=\"s\">mail<\/span>\r\n    <span class=\"na\">image<\/span><span class=\"pi\">:<\/span> <span class=\"s\">schickling\/mailcatcher<\/span>\r\n    <span class=\"na\">ports<\/span><span class=\"pi\">:<\/span>\r\n      <span class=\"pi\">-<\/span> <span class=\"s1\">'<\/span><span class=\"s\">1080:1080'<\/span>\r\n      <span class=\"pi\">-<\/span> <span class=\"s1\">'<\/span><span class=\"s\">1025:1025'<\/span>\r\n\r\n  <span class=\"na\">nginx<\/span><span class=\"pi\">:<\/span>\r\n    <span class=\"na\">container_name<\/span><span class=\"pi\">:<\/span> <span class=\"s\">web<\/span>\r\n    <span class=\"na\">build<\/span><span class=\"pi\">:<\/span>\r\n      <span class=\"na\">context<\/span><span class=\"pi\">:<\/span> <span class=\"s\">.<\/span>\r\n      <span class=\"na\">dockerfile<\/span><span class=\"pi\">:<\/span> <span class=\"s\">containers\/nginx\/Dockerfile<\/span>\r\n    <span class=\"na\">volumes<\/span><span class=\"pi\">:<\/span>\r\n      <span class=\"pi\">-<\/span> <span class=\"s\">.\/static:\/static<\/span>\r\n    <span class=\"na\">ports<\/span><span class=\"pi\">:<\/span>\r\n      <span class=\"pi\">-<\/span> <span class=\"s\">80:80<\/span>\r\n    <span class=\"na\">depends_on<\/span><span class=\"pi\">:<\/span>\r\n      <span class=\"pi\">-<\/span> <span class=\"s\">app<\/span>\r\n\r\n  <span class=\"na\">front<\/span><span class=\"pi\">:<\/span>\r\n    <span class=\"na\">container_name<\/span><span class=\"pi\">:<\/span> <span class=\"s\">front<\/span>\r\n    <span class=\"na\">build<\/span><span class=\"pi\">:<\/span>\r\n      <span class=\"na\">context<\/span><span class=\"pi\">:<\/span> <span class=\"s\">.<\/span>\r\n      <span class=\"na\">dockerfile<\/span><span class=\"pi\">:<\/span> <span class=\"s\">containers\/front\/Dockerfile<\/span>\r\n    <span class=\"na\">volumes<\/span><span class=\"pi\">:<\/span>\r\n      <span class=\"pi\">-<\/span> <span class=\"s\">.\/frontend:\/code<\/span>\r\n      <span class=\"pi\">-<\/span> <span class=\"s\">node_modules_volume:\/frontend\/node_modules<\/span>\r\n    <span class=\"na\">command<\/span><span class=\"pi\">:<\/span> <span class=\"s\">sh -c \"npm run dev\"<\/span>\r\n    <span class=\"na\">ports<\/span><span class=\"pi\">:<\/span>\r\n      <span class=\"pi\">-<\/span> <span class=\"s1\">'<\/span><span class=\"s\">3000:3000'<\/span>\r\n    <span class=\"na\">environment<\/span><span class=\"pi\">:<\/span>\r\n      <span class=\"pi\">-<\/span> <span class=\"s\">CHOKIDAR_USEPOLLING=true<\/span>\r\n      <span class=\"pi\">-<\/span> <span class=\"s\">NEXT_PUBLIC_RESTAPI_URL=http:\/\/localhost\/back<\/span>\r\n\r\n<span class=\"na\">volumes<\/span><span class=\"pi\">:<\/span>\r\n  <span class=\"na\">db_data<\/span><span class=\"pi\">:<\/span>\r\n  <span class=\"na\">static<\/span><span class=\"pi\">:<\/span>\r\n  <span class=\"na\">node_modules_volume<\/span><span class=\"pi\">:<\/span>\r\n\r\n<span class=\"na\">networks<\/span><span class=\"pi\">:<\/span>\r\n  <span class=\"na\">default<\/span><span class=\"pi\">:<\/span>\r\n    <span class=\"na\">name<\/span><span class=\"pi\">:<\/span> <span class=\"s\">testnet<\/span>\r\n<\/code><\/pre>\n<pre class=\"post-pre\"><code><span class=\"k\">upstream<\/span> <span class=\"s\">front<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"kn\">server<\/span> <span class=\"nf\">host.docker.internal<\/span><span class=\"p\">:<\/span><span class=\"mi\">3000<\/span><span class=\"p\">;<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"k\">upstream<\/span> <span class=\"s\">back<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"kn\">server<\/span> <span class=\"nf\">host.docker.internal<\/span><span class=\"p\">:<\/span><span class=\"mi\">8000<\/span><span class=\"p\">;<\/span>\r\n<span class=\"p\">}<\/span>\r\n \r\n<span class=\"k\">server<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"kn\">listen<\/span>       <span class=\"mi\">80<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"kn\">server_name<\/span>  <span class=\"s\">localhost<\/span><span class=\"p\">;<\/span>\r\n\r\n    <span class=\"kn\">client_max_body_size<\/span> <span class=\"mi\">5M<\/span><span class=\"p\">;<\/span>\r\n    \r\n    <span class=\"kn\">location<\/span> <span class=\"n\">\/<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"kn\">proxy_pass<\/span> <span class=\"s\">http:\/\/front\/<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"p\">}<\/span>\r\n \r\n    <span class=\"kn\">location<\/span> <span class=\"n\">\/back\/<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"kn\">proxy_set_header<\/span> <span class=\"s\">X-Forwarded-Host<\/span> <span class=\"nv\">$host<\/span><span class=\"p\">:<\/span><span class=\"nv\">$server_port<\/span><span class=\"p\">;<\/span>\r\n        <span class=\"kn\">proxy_set_header<\/span> <span class=\"s\">X-Forwarded-Server<\/span> <span class=\"nv\">$host<\/span><span class=\"p\">;<\/span>\r\n        <span class=\"kn\">proxy_set_header<\/span> <span class=\"s\">X-Forwarded-For<\/span> <span class=\"nv\">$proxy_add_x_forwarded_for<\/span><span class=\"p\">;<\/span>\r\n        <span class=\"kn\">proxy_pass<\/span> <span class=\"s\">http:\/\/back\/<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"p\">}<\/span>\r\n\r\n    <span class=\"kn\">location<\/span> <span class=\"n\">\/upload\/<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"kn\">proxy_pass<\/span> <span class=\"s\">http:\/\/back\/upload\/<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"p\">}<\/span>\r\n\r\n    <span class=\"kn\">location<\/span> <span class=\"n\">\/_next\/webpack-hmr<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"kn\">proxy_pass<\/span> <span class=\"s\">http:\/\/front\/_next\/webpack-hmr<\/span><span class=\"p\">;<\/span>\r\n        <span class=\"kn\">proxy_http_version<\/span> <span class=\"mi\">1<\/span><span class=\"s\">.1<\/span><span class=\"p\">;<\/span>\r\n        <span class=\"kn\">proxy_set_header<\/span> <span class=\"s\">Upgrade<\/span> <span class=\"nv\">$http_upgrade<\/span><span class=\"p\">;<\/span>\r\n        <span class=\"kn\">proxy_set_header<\/span> <span class=\"s\">Connection<\/span> <span class=\"s\">\"upgrade\"<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"p\">}<\/span>\r\n\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<h2>Django: \u522b\u7406\u90a3\u4e9b\u7834\u4e8b\u3002<\/h2>\n<h3>\u8de8\u57df\u8d44\u6e90\u5171\u4eab\uff08CORS\uff09\u548c\u8de8\u7ad9\u8bf7\u6c42\u4f2a\u9020\uff08CSRF\uff09\u7684\u914d\u7f6e\u3002<\/h3>\n<p>\u524d\u7aef\u548c\u540e\u7aef\u4e0d\u53ef\u6216\u7f3a\u7684\u534f\u4f5c<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">CORS<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">CSRF<\/ul>\n<p>\u8bf7\u53c2\u8003\u4ee5\u4e0b\u6587\u7ae0\u4ee5\u83b7\u53d6\u5173\u4e8eCORS\u7684\u8be6\u7ec6\u4fe1\u606f\u3002<\/p>\n<p>&nbsp;<\/p>\n<pre class=\"post-pre\"><code><span class=\"n\">ALLOWED_HOSTS<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[<\/span><span class=\"sh\">\"<\/span><span class=\"s\">http:\/\/localhost<\/span><span class=\"sh\">\"<\/span><span class=\"p\">,<\/span> <span class=\"sh\">\"<\/span><span class=\"s\">http:\/\/127.0.0.1<\/span><span class=\"sh\">\"<\/span><span class=\"p\">]<\/span>\r\n\r\n<span class=\"n\">REST_FRAMEWORK<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"sh\">\"<\/span><span class=\"s\">DEFAULT_AUTHENTICATION_CLASSES<\/span><span class=\"sh\">\"<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\r\n        <span class=\"c1\"># \u4eca\u56de\u306f\u30ed\u30b0\u30a4\u30f3\u8a8d\u8a3c\u306e\u65b9\u6cd5\u3068\u3057\u3066Session\u8a8d\u8a3c\u3092\u63a1\u7528\r\n<\/span>        <span class=\"sh\">\"<\/span><span class=\"s\">rest_framework.authentication.SessionAuthentication<\/span><span class=\"sh\">\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"p\">]<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"n\">INSTALLED_APPS<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[<\/span>\r\n    <span class=\"sh\">\"<\/span><span class=\"s\">django.contrib.admin<\/span><span class=\"sh\">\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"sh\">\"<\/span><span class=\"s\">django.contrib.auth<\/span><span class=\"sh\">\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"sh\">\"<\/span><span class=\"s\">django.contrib.contenttypes<\/span><span class=\"sh\">\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"sh\">\"<\/span><span class=\"s\">django.contrib.sessions<\/span><span class=\"sh\">\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"sh\">\"<\/span><span class=\"s\">django.contrib.messages<\/span><span class=\"sh\">\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"sh\">\"<\/span><span class=\"s\">django.contrib.staticfiles<\/span><span class=\"sh\">\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"sh\">\"<\/span><span class=\"s\">rest_framework<\/span><span class=\"sh\">\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"sh\">\"<\/span><span class=\"s\">application.apps.ApplicationConfig<\/span><span class=\"sh\">\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"c1\"># CORS\u7528\u306e\u30d1\u30c3\u30b1\u30fc\u30b8\r\n<\/span>    <span class=\"sh\">\"<\/span><span class=\"s\">corsheaders<\/span><span class=\"sh\">\"<\/span><span class=\"p\">,<\/span>\r\n<span class=\"p\">]<\/span>\r\n\r\n<span class=\"n\">MIDDLEWARE<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[<\/span>\r\n    <span class=\"c1\"># CORS\u7528\u306eMiddleware\r\n<\/span>    <span class=\"sh\">\"<\/span><span class=\"s\">corsheaders.middleware.CorsMiddleware<\/span><span class=\"sh\">\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"sh\">\"<\/span><span class=\"s\">django.middleware.security.SecurityMiddleware<\/span><span class=\"sh\">\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"sh\">\"<\/span><span class=\"s\">django.contrib.sessions.middleware.SessionMiddleware<\/span><span class=\"sh\">\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"sh\">\"<\/span><span class=\"s\">django.middleware.common.CommonMiddleware<\/span><span class=\"sh\">\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"c1\"># CSRF\u7528\u306eMiddleware\r\n<\/span>    <span class=\"sh\">\"<\/span><span class=\"s\">django.middleware.csrf.CsrfViewMiddleware<\/span><span class=\"sh\">\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"sh\">\"<\/span><span class=\"s\">django.contrib.auth.middleware.AuthenticationMiddleware<\/span><span class=\"sh\">\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"sh\">\"<\/span><span class=\"s\">django.contrib.messages.middleware.MessageMiddleware<\/span><span class=\"sh\">\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"sh\">\"<\/span><span class=\"s\">django.middleware.clickjacking.XFrameOptionsMiddleware<\/span><span class=\"sh\">\"<\/span><span class=\"p\">,<\/span>\r\n<span class=\"p\">]<\/span>\r\n\r\n<span class=\"c1\"># \u81ea\u8eab\u4ee5\u5916\u306e\u30aa\u30ea\u30b8\u30f3\u306eHTTP\u30ea\u30af\u30a8\u30b9\u30c8\u5185\u306b\u30af\u30c3\u30ad\u30fc\u3092\u542b\u3081\u308b\u3053\u3068\u3092\u8a31\u53ef\u3059\u308b\r\n<\/span><span class=\"n\">CORS_ALLOW_CREDENTIALS<\/span> <span class=\"o\">=<\/span> <span class=\"bp\">True<\/span>\r\n<span class=\"c1\"># \u30a2\u30af\u30bb\u30b9\u3092\u8a31\u53ef\u3057\u305f\u3044URL\uff08\u30a2\u30af\u30bb\u30b9\u5143\uff09\u3092\u8ffd\u52a0\r\n<\/span><span class=\"n\">CORS_ALLOWED_ORIGINS<\/span> <span class=\"o\">=<\/span> <span class=\"n\">django_settings<\/span><span class=\"p\">.<\/span><span class=\"n\">TRUSTED_ORIGINS<\/span><span class=\"p\">.<\/span><span class=\"nf\">split<\/span><span class=\"p\">()<\/span>\r\n<span class=\"c1\"># \u30d7\u30ea\u30d5\u30e9\u30a4\u30c8(\u4e8b\u524d\u30ea\u30af\u30a8\u30b9\u30c8)\u306e\u8a2d\u5b9a\r\n# 30\u5206\u3060\u3051\u8a31\u53ef\r\n<\/span><span class=\"n\">CORS_PREFLIGHT_MAX_AGE<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">60<\/span> <span class=\"o\">*<\/span> <span class=\"mi\">30<\/span>\r\n\r\n<span class=\"c1\"># CSRF\u306e\u8a2d\u5b9a\r\n# \u3053\u308c\u304c\u306a\u3044\u3068403\u30a8\u30e9\u30fc\u3092\u8fd4\u3057\u3066\u3057\u307e\u3046\r\n# https:\/\/docs.djangoproject.com\/en\/4.2\/ref\/settings\/#csrf-trusted-origins\r\n<\/span><span class=\"n\">CSRF_TRUSTED_ORIGINS<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[<\/span><span class=\"sh\">\"<\/span><span class=\"s\">http:\/\/localhost<\/span><span class=\"sh\">\"<\/span><span class=\"p\">,<\/span> <span class=\"sh\">\"<\/span><span class=\"s\">http:\/\/127.0.0.1<\/span><span class=\"sh\">\"<\/span><span class=\"p\">]<\/span>\r\n<\/code><\/pre>\n<h3>\u521b\u5efa\u767b\u5f55API<\/h3>\n<p>\u6839\u636e\u4ee5\u4e0b\u6587\u7ae0\u7684\u53c2\u8003\uff0c\u6211\u4eec\u5c06\u521b\u5efa\u4e00\u4e2a\u767b\u5f55API\u3002<br \/>\n\u8be5API\u7684\u8def\u5f84\u662f\/api\/login\/\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"kn\">from<\/span> <span class=\"n\">django.contrib.auth<\/span> <span class=\"kn\">import<\/span> <span class=\"n\">authenticate<\/span><span class=\"p\">,<\/span> <span class=\"n\">login<\/span><span class=\"p\">,<\/span> <span class=\"n\">logout<\/span>\r\n<span class=\"kn\">from<\/span> <span class=\"n\">django.http<\/span> <span class=\"kn\">import<\/span> <span class=\"n\">HttpResponse<\/span><span class=\"p\">,<\/span> <span class=\"n\">JsonResponse<\/span>\r\n<span class=\"kn\">from<\/span> <span class=\"n\">rest_framework<\/span> <span class=\"kn\">import<\/span> <span class=\"n\">status<\/span>\r\n<span class=\"kn\">from<\/span> <span class=\"n\">rest_framework.decorators<\/span> <span class=\"kn\">import<\/span> <span class=\"n\">action<\/span>\r\n<span class=\"kn\">from<\/span> <span class=\"n\">rest_framework.permissions<\/span> <span class=\"kn\">import<\/span> <span class=\"n\">AllowAny<\/span>\r\n<span class=\"kn\">from<\/span> <span class=\"n\">rest_framework.viewsets<\/span> <span class=\"kn\">import<\/span> <span class=\"n\">ViewSet<\/span>\r\n\r\n<span class=\"kn\">from<\/span> <span class=\"n\">application.models.user<\/span> <span class=\"kn\">import<\/span> <span class=\"n\">User<\/span>\r\n<span class=\"kn\">from<\/span> <span class=\"n\">application.serializers.user<\/span> <span class=\"kn\">import<\/span> <span class=\"n\">LoginSerializer<\/span>\r\n\r\n\r\n<span class=\"k\">class<\/span> <span class=\"nc\">LoginViewSet<\/span><span class=\"p\">(<\/span><span class=\"n\">ViewSet<\/span><span class=\"p\">):<\/span>\r\n    <span class=\"n\">serializer_class<\/span> <span class=\"o\">=<\/span> <span class=\"n\">LoginSerializer<\/span>\r\n    <span class=\"n\">permission_classes<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[<\/span><span class=\"n\">AllowAny<\/span><span class=\"p\">]<\/span>\r\n\r\n    <span class=\"nd\">@action<\/span><span class=\"p\">(<\/span><span class=\"n\">detail<\/span><span class=\"o\">=<\/span><span class=\"bp\">False<\/span><span class=\"p\">,<\/span> <span class=\"n\">methods<\/span><span class=\"o\">=<\/span><span class=\"p\">[<\/span><span class=\"sh\">\"<\/span><span class=\"s\">POST<\/span><span class=\"sh\">\"<\/span><span class=\"p\">])<\/span>\r\n    <span class=\"k\">def<\/span> <span class=\"nf\">login<\/span><span class=\"p\">(<\/span><span class=\"n\">self<\/span><span class=\"p\">,<\/span> <span class=\"n\">request<\/span><span class=\"p\">):<\/span>\r\n        <span class=\"sh\">\"\"\"<\/span><span class=\"s\">\u30e6\u30fc\u30b6\u306e\u30ed\u30b0\u30a4\u30f3<\/span><span class=\"sh\">\"\"\"<\/span>\r\n        <span class=\"n\">serializer<\/span> <span class=\"o\">=<\/span> <span class=\"nc\">LoginSerializer<\/span><span class=\"p\">(<\/span><span class=\"n\">data<\/span><span class=\"o\">=<\/span><span class=\"n\">request<\/span><span class=\"p\">.<\/span><span class=\"n\">data<\/span><span class=\"p\">)<\/span>\r\n        <span class=\"n\">serializer<\/span><span class=\"p\">.<\/span><span class=\"nf\">is_valid<\/span><span class=\"p\">(<\/span><span class=\"n\">raise_exception<\/span><span class=\"o\">=<\/span><span class=\"bp\">True<\/span><span class=\"p\">)<\/span>\r\n        <span class=\"n\">employee_number<\/span> <span class=\"o\">=<\/span> <span class=\"n\">serializer<\/span><span class=\"p\">.<\/span><span class=\"n\">validated_data<\/span><span class=\"p\">.<\/span><span class=\"nf\">get<\/span><span class=\"p\">(<\/span><span class=\"sh\">\"<\/span><span class=\"s\">employee_number<\/span><span class=\"sh\">\"<\/span><span class=\"p\">)<\/span>\r\n        <span class=\"n\">password<\/span> <span class=\"o\">=<\/span> <span class=\"n\">serializer<\/span><span class=\"p\">.<\/span><span class=\"n\">validated_data<\/span><span class=\"p\">.<\/span><span class=\"nf\">get<\/span><span class=\"p\">(<\/span><span class=\"sh\">\"<\/span><span class=\"s\">password<\/span><span class=\"sh\">\"<\/span><span class=\"p\">)<\/span>\r\n        <span class=\"n\">user<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">authenticate<\/span><span class=\"p\">(<\/span><span class=\"n\">employee_number<\/span><span class=\"o\">=<\/span><span class=\"n\">employee_number<\/span><span class=\"p\">,<\/span> <span class=\"n\">password<\/span><span class=\"o\">=<\/span><span class=\"n\">password<\/span><span class=\"p\">)<\/span>\r\n        <span class=\"k\">if<\/span> <span class=\"ow\">not<\/span> <span class=\"n\">user<\/span><span class=\"p\">:<\/span>\r\n            <span class=\"k\">return<\/span> <span class=\"nc\">JsonResponse<\/span><span class=\"p\">(<\/span>\r\n                <span class=\"n\">data<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"sh\">\"<\/span><span class=\"s\">msg<\/span><span class=\"sh\">\"<\/span><span class=\"p\">:<\/span> <span class=\"sh\">\"<\/span><span class=\"s\">\u793e\u54e1\u756a\u53f7\u307e\u305f\u306f\u30d1\u30b9\u30ef\u30fc\u30c9\u304c\u9593\u9055\u3063\u3066\u3044\u307e\u3059<\/span><span class=\"sh\">\"<\/span><span class=\"p\">},<\/span>\r\n                <span class=\"n\">status<\/span><span class=\"o\">=<\/span><span class=\"n\">status<\/span><span class=\"p\">.<\/span><span class=\"n\">HTTP_400_BAD_REQUEST<\/span><span class=\"p\">,<\/span>\r\n            <span class=\"p\">)<\/span>\r\n        <span class=\"k\">else<\/span><span class=\"p\">:<\/span>\r\n            <span class=\"nf\">login<\/span><span class=\"p\">(<\/span><span class=\"n\">request<\/span><span class=\"p\">,<\/span> <span class=\"n\">user<\/span><span class=\"p\">)<\/span>\r\n            <span class=\"k\">return<\/span> <span class=\"nc\">JsonResponse<\/span><span class=\"p\">(<\/span><span class=\"n\">data<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"sh\">\"<\/span><span class=\"s\">role<\/span><span class=\"sh\">\"<\/span><span class=\"p\">:<\/span> <span class=\"n\">user<\/span><span class=\"p\">.<\/span><span class=\"nc\">Role<\/span><span class=\"p\">(<\/span><span class=\"n\">user<\/span><span class=\"p\">.<\/span><span class=\"n\">role<\/span><span class=\"p\">).<\/span><span class=\"n\">name<\/span><span class=\"p\">})<\/span>\r\n\r\n    <span class=\"nd\">@action<\/span><span class=\"p\">(<\/span><span class=\"n\">methods<\/span><span class=\"o\">=<\/span><span class=\"p\">[<\/span><span class=\"sh\">\"<\/span><span class=\"s\">POST<\/span><span class=\"sh\">\"<\/span><span class=\"p\">],<\/span> <span class=\"n\">detail<\/span><span class=\"o\">=<\/span><span class=\"bp\">False<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"k\">def<\/span> <span class=\"nf\">logout<\/span><span class=\"p\">(<\/span><span class=\"n\">self<\/span><span class=\"p\">,<\/span> <span class=\"n\">request<\/span><span class=\"p\">):<\/span>\r\n        <span class=\"sh\">\"\"\"<\/span><span class=\"s\">\u30e6\u30fc\u30b6\u306e\u30ed\u30b0\u30a2\u30a6\u30c8<\/span><span class=\"sh\">\"\"\"<\/span>\r\n        <span class=\"nf\">logout<\/span><span class=\"p\">(<\/span><span class=\"n\">request<\/span><span class=\"p\">)<\/span>\r\n        <span class=\"k\">return<\/span> <span class=\"nc\">HttpResponse<\/span><span class=\"p\">()<\/span>\r\n<\/code><\/pre>\n<p>&nbsp;<\/p>\n<h2>\u56de\u5e94<\/h2>\n<h3>\u6839\u9875\u9762<\/h3>\n<p>\u5728\u6839\u9875\u9762\u4e0a\u8bbe\u7f6e\u7528\u4e8e\u767b\u5f55\u7684\u7ec4\u4ef6\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">Link<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">next\/link<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">Login<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">..\/components\/elements\/Form\/Login<\/span><span class=\"dl\">'<\/span>\r\n\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">Login<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n\r\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\r\n    <span class=\"p\">&lt;&gt;<\/span>\r\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n        <span class=\"p\">&lt;<\/span><span class=\"nc\">Login<\/span><span class=\"p\">\/&gt;<\/span>\r\n      <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n    <span class=\"p\">&lt;\/&gt;<\/span>\r\n  <span class=\"p\">);<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">Login<\/span><span class=\"p\">;<\/span>\r\n<\/code><\/pre>\n<h3>\u767b\u5f55\u529f\u80fd<\/h3>\n<p>\u8bf7\u53c2\u8003\u4e0b\u9762\u7684\u6587\u7ae0\uff0c\u6211\u4f7f\u7528\u4e86ReactHookForm\u6765\u521b\u5efa\u4e86\u767b\u5f55\u8868\u5355\u3002<\/p>\n<p>&nbsp;<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useForm<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react-hook-form<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">Cookies<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">js-cookie<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">router<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">next\/router<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"kd\">function<\/span> <span class=\"nf\">Login<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n\r\n  <span class=\"nx\">type<\/span> <span class=\"nx\">LoginDataType<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"na\">employee_number<\/span><span class=\"p\">:<\/span> <span class=\"nx\">string<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"nl\">password<\/span><span class=\"p\">:<\/span> <span class=\"nx\">string<\/span><span class=\"p\">;<\/span>\r\n  <span class=\"p\">};<\/span>\r\n\r\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> \r\n    <span class=\"nx\">register<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"nx\">handleSubmit<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"na\">formState<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">errors<\/span> <span class=\"p\">},<\/span>\r\n  <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useForm<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">LoginDataType<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">({<\/span>\r\n    <span class=\"c1\">\/\/ \u30ed\u30b0\u30a4\u30f3\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u305f\u6642\u306e\u307f\u30d0\u30ea\u30c7\u30fc\u30b7\u30e7\u30f3\u3092\u884c\u3046<\/span>\r\n    <span class=\"na\">reValidateMode<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">onSubmit<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"p\">});<\/span>\r\n\r\n  <span class=\"kd\">const<\/span> <span class=\"nx\">onSubmit<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async <\/span><span class=\"p\">(<\/span><span class=\"nx\">data<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"c1\">\/\/ Nginx\u3068docker-compose.yml\u3067\u8a2d\u5b9a\u3057\u305fAPI\u306e\u30d1\u30b9<\/span>\r\n    <span class=\"c1\">\/\/ http:\/\/localhost\/back\/api\/login\/<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">apiUrl<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">process<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span><span class=\"p\">.<\/span><span class=\"nx\">NEXT_PUBLIC_RESTAPI_URL<\/span> <span class=\"o\">+<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">http:\/\/localhost\/back\/api\/login\/<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">csrftoken<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">Cookies<\/span><span class=\"p\">.<\/span><span class=\"nf\">get<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">csrftoken<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span> <span class=\"o\">||<\/span> <span class=\"dl\">''<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"c1\">\/\/ \u30ed\u30b0\u30a4\u30f3\u60c5\u5831\u3092\u30b5\u30fc\u30d0\u30fc\u306b\u9001\u4fe1<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">response<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nf\">fetch<\/span><span class=\"p\">(<\/span><span class=\"nx\">apiUrl<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\r\n      <span class=\"na\">method<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">POST<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\r\n      <span class=\"na\">headers<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"dl\">'<\/span><span class=\"s1\">Content-Type<\/span><span class=\"dl\">'<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">application\/json<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\r\n        <span class=\"dl\">'<\/span><span class=\"s1\">X-CSRFToken<\/span><span class=\"dl\">'<\/span><span class=\"p\">:<\/span> <span class=\"nx\">csrftoken<\/span><span class=\"p\">,<\/span>\r\n      <span class=\"p\">},<\/span>\r\n      <span class=\"c1\">\/\/ \u30e6\u30fc\u30b6\u30fc\u540d\uff08\u793e\u54e1\u756a\u53f7\uff09\u3068\u30d1\u30b9\u30ef\u30fc\u30c9\u3092JSON\u5f62\u5f0f\u3067\u9001\u4fe1<\/span>\r\n      <span class=\"na\">body<\/span><span class=\"p\">:<\/span> <span class=\"nx\">JSON<\/span><span class=\"p\">.<\/span><span class=\"nf\">stringify<\/span><span class=\"p\">(<\/span><span class=\"nx\">data<\/span><span class=\"p\">),<\/span> \r\n    <span class=\"p\">});<\/span>\r\n\r\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nx\">ok<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n      <span class=\"c1\">\/\/ \u30ed\u30b0\u30a4\u30f3\u6210\u529f\u6642\u306b\/login_success\u3078\u9077\u79fb<\/span>\r\n      <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">\u30ed\u30b0\u30a4\u30f3\u6210\u529f<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\r\n      <span class=\"nx\">router<\/span><span class=\"p\">.<\/span><span class=\"nf\">push<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">\/login_success<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\r\n      <span class=\"c1\">\/\/ \u30ea\u30c0\u30a4\u30ec\u30af\u30c8\u306a\u3069\u3001\u30ed\u30b0\u30a4\u30f3\u5f8c\u306e\u51e6\u7406\u3092\u8ffd\u52a0<\/span>\r\n    <span class=\"p\">}<\/span> <span class=\"k\">else<\/span> <span class=\"p\">{<\/span>\r\n      <span class=\"c1\">\/\/ \u30ed\u30b0\u30a4\u30f3\u5931\u6557\u6642\u306b\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u306e\u30a8\u30e9\u30fc\u3092\u30a2\u30e9\u30fc\u30c8\u3067\u8868\u793a(\"\u793e\u54e1\u756a\u53f7\u307e\u305f\u306f\u30d1\u30b9\u30ef\u30fc\u30c9\u304c\u9593\u9055\u3063\u3066\u3044\u307e\u3059\")<\/span>\r\n      <span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nf\">json<\/span><span class=\"p\">()<\/span>\r\n      <span class=\"p\">.<\/span><span class=\"nf\">then<\/span><span class=\"p\">(<\/span><span class=\"nx\">data<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"kd\">const<\/span> <span class=\"nx\">msg<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nx\">msg<\/span><span class=\"p\">;<\/span>\r\n        <span class=\"nf\">alert<\/span><span class=\"p\">(<\/span><span class=\"nx\">msg<\/span><span class=\"p\">)<\/span>\r\n      <span class=\"p\">})<\/span>\r\n    <span class=\"p\">}<\/span>\r\n  <span class=\"p\">};<\/span>\r\n\r\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\r\n    <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"Login\"<\/span><span class=\"p\">&gt;<\/span>\r\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>\u30ed\u30b0\u30a4\u30f3<span class=\"p\">&lt;\/<\/span><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>\r\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">form<\/span> <span class=\"na\">onSubmit<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nf\">handleSubmit<\/span><span class=\"p\">(<\/span><span class=\"nx\">onSubmit<\/span><span class=\"p\">)<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>\r\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">input<\/span>\r\n            <span class=\"na\">id<\/span><span class=\"p\">=<\/span><span class=\"s\">\"employee_number\"<\/span>\r\n            <span class=\"na\">name<\/span><span class=\"p\">=<\/span><span class=\"s\">\"employee_number\"<\/span>\r\n            <span class=\"na\">placeholder<\/span><span class=\"p\">=<\/span><span class=\"s\">\"\u793e\u54e1\u756a\u53f7\"<\/span>\r\n            <span class=\"si\">{<\/span><span class=\"p\">...<\/span><span class=\"nf\">register<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">employee_number<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\r\n              <span class=\"na\">required<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n                <span class=\"na\">value<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span> \r\n                <span class=\"na\">message<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">\u793e\u54e1\u756a\u53f7\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\r\n              <span class=\"p\">},<\/span>\r\n              <span class=\"na\">pattern<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n                <span class=\"na\">value<\/span><span class=\"p\">:<\/span> <span class=\"sr\">\/^<\/span><span class=\"se\">[<\/span><span class=\"sr\">0-9<\/span><span class=\"se\">]{8}<\/span><span class=\"sr\">$\/<\/span><span class=\"p\">,<\/span>\r\n                <span class=\"na\">message<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">8\u6841\u306e\u6570\u5b57\u306e\u307f\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\r\n              <span class=\"p\">},<\/span>\r\n            <span class=\"p\">})<\/span><span class=\"si\">}<\/span> \r\n          <span class=\"p\">\/&gt;<\/span>\r\n            <span class=\"si\">{<\/span><span class=\"nx\">errors<\/span><span class=\"p\">.<\/span><span class=\"nx\">employee_number<\/span><span class=\"p\">?.<\/span><span class=\"nx\">message<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span><span class=\"si\">{<\/span><span class=\"nx\">errors<\/span><span class=\"p\">.<\/span><span class=\"nx\">employee_number<\/span><span class=\"p\">.<\/span><span class=\"nx\">message<\/span><span class=\"si\">}<\/span><span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span><span class=\"si\">}<\/span>\r\n        <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">input<\/span>\r\n            <span class=\"na\">id<\/span><span class=\"p\">=<\/span><span class=\"s\">\"password\"<\/span>\r\n            <span class=\"na\">name<\/span><span class=\"p\">=<\/span><span class=\"s\">\"password\"<\/span>\r\n            <span class=\"na\">placeholder<\/span><span class=\"p\">=<\/span><span class=\"s\">\"\u30d1\u30b9\u30ef\u30fc\u30c9\"<\/span>\r\n            <span class=\"na\">type<\/span><span class=\"p\">=<\/span><span class=\"s\">\"password\"<\/span>\r\n            <span class=\"si\">{<\/span><span class=\"p\">...<\/span><span class=\"nf\">register<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">password<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> \r\n              <span class=\"na\">required<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n                <span class=\"na\">value<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span>\r\n                <span class=\"na\">message<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">\u30d1\u30b9\u30ef\u30fc\u30c9\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044<\/span><span class=\"dl\">'<\/span>\r\n              <span class=\"p\">},<\/span>\r\n          <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\r\n<\/span>            <span class=\"p\">{<\/span><span class=\"nx\">errors<\/span><span class=\"p\">.<\/span><span class=\"nx\">password<\/span><span class=\"p\">?.<\/span><span class=\"nx\">message<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span><span class=\"si\">{<\/span><span class=\"nx\">errors<\/span><span class=\"p\">.<\/span><span class=\"nx\">password<\/span><span class=\"p\">.<\/span><span class=\"nx\">message<\/span><span class=\"si\">}<\/span><span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;}<\/span>\r\n        <span class=\"p\">&lt;<\/span><span class=\"err\">\/<\/span><span class=\"na\">div<\/span><span class=\"p\">&gt;<\/span>\r\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">button<\/span> <span class=\"na\">type<\/span><span class=\"p\">=<\/span><span class=\"s\">\"submit\"<\/span><span class=\"p\">&gt;<\/span>\u30ed\u30b0\u30a4\u30f3<span class=\"p\">&lt;\/<\/span><span class=\"nt\">button<\/span><span class=\"p\">&gt;<\/span>\r\n      <span class=\"p\">&lt;\/<\/span><span class=\"nt\">form<\/span><span class=\"p\">&gt;<\/span>\r\n    <span class=\"p\">&lt;<\/span><span class=\"err\">\/<\/span><span class=\"na\">div<\/span><span class=\"p\">&gt;<\/span>\r\n  );\r\n}\r\n\r\nexport default Login;\r\n<\/code><\/pre>\n<p>\u6211\u5c06\u9010\u4e2a\u89e3\u91ca\u3002 (W\u01d2 zh\u00fa g\u00e8 ji\u011b sh\u00ec.)<\/p>\n<h3>FetchAPI \u53d6\u5f97API<\/h3>\n<p>\u4f7f\u7528FetchAPI\u5c06\u6570\u636ePOST\u5230\u81ea\u5b9a\u4e49\u7684\u767b\u5f55API\u4e0a\u3002<br \/>\n\u5728\u8fdb\u884c\u767b\u5f55\u4e4b\u524d\uff0c\u6ca1\u6709SessionID\u548cCSRF\u4ee4\u724c\u3002<br \/>\ncsrftoken\u7684\u503c\u5c06\u4e3a\u7a7a\u3002<br \/>\nContent-Type\u5c06\u8bbe\u7f6e\u4e3aapplication\/json\u3002<br \/>\n\u8bf7\u6c42\u7684BODY\u5c06\u662fJSON\u683c\u5f0f\u7684\u3002<\/p>\n<pre class=\"post-pre\"><code>    <span class=\"c1\">\/\/ Nginx\u3068docker-compose.yml\u3067\u8a2d\u5b9a\u3057\u305fAPI\u306e\u30d1\u30b9<\/span>\r\n    <span class=\"c1\">\/\/ http:\/\/localhost\/back\/api\/login\/<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">apiUrl<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">process<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span><span class=\"p\">.<\/span><span class=\"nx\">NEXT_PUBLIC_RESTAPI_URL<\/span> <span class=\"o\">+<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">\/api\/login\/<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">csrftoken<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">Cookies<\/span><span class=\"p\">.<\/span><span class=\"nf\">get<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">csrftoken<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span> <span class=\"o\">||<\/span> <span class=\"dl\">''<\/span><span class=\"p\">;<\/span>\r\n    <span class=\"c1\">\/\/ \u30ed\u30b0\u30a4\u30f3\u60c5\u5831\u3092\u30b5\u30fc\u30d0\u30fc\u306b\u9001\u4fe1<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">response<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nf\">fetch<\/span><span class=\"p\">(<\/span><span class=\"nx\">apiUrl<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\r\n      <span class=\"na\">method<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">POST<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\r\n      <span class=\"na\">headers<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"dl\">'<\/span><span class=\"s1\">Content-Type<\/span><span class=\"dl\">'<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">application\/json<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\r\n        <span class=\"dl\">'<\/span><span class=\"s1\">X-CSRFToken<\/span><span class=\"dl\">'<\/span><span class=\"p\">:<\/span> <span class=\"nx\">csrftoken<\/span><span class=\"p\">,<\/span>\r\n      <span class=\"p\">},<\/span>\r\n      <span class=\"c1\">\/\/ \u30e6\u30fc\u30b6\u30fc\u540d\uff08\u793e\u54e1\u756a\u53f78\u6841\uff09\u3068\u30d1\u30b9\u30ef\u30fc\u30c9\u3092JSON\u5f62\u5f0f\u3067\u9001\u4fe1<\/span>\r\n      <span class=\"na\">body<\/span><span class=\"p\">:<\/span> <span class=\"nx\">JSON<\/span><span class=\"p\">.<\/span><span class=\"nf\">stringify<\/span><span class=\"p\">(<\/span><span class=\"nx\">data<\/span><span class=\"p\">),<\/span> \r\n    <span class=\"p\">});<\/span>\r\n<\/code><\/pre>\n<h3>\u5904\u7406\u54cd\u5e94<\/h3>\n<p>\u5f53\u56de\u590d\u6536\u5230\u65f6\uff0c\u5c06\u4f7f\u7528\u72b6\u6001\u7801\u8fdb\u884c\u5904\u7406\u3002<br \/>\n\u5982\u679c\u6536\u5230200\u7cfb\u5217\u7684\u54cd\u5e94\uff0c\u5c06\u4f7f\u7528next\/router\u5c06\u9875\u9762push\u5230\/login_success\u3002<br \/>\n\u5982\u679c\u767b\u5f55\u5931\u8d25\uff08\u6536\u5230\u7684\u4e0d\u662f200\u7cfb\u5217\u7684\u54cd\u5e94\uff09\uff0c\u5c06\u901a\u8fc7\u8b66\u62a5\u63d0\u793a\u663e\u793a\u9519\u8bef\u6d88\u606f\u3002<\/p>\n<pre class=\"post-pre\"><code>    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nx\">ok<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n      <span class=\"c1\">\/\/ \u30ed\u30b0\u30a4\u30f3\u6210\u529f\u6642\u306b\/login_success\u3078\u9077\u79fb<\/span>\r\n      <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">\u30ed\u30b0\u30a4\u30f3\u6210\u529f<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\r\n      <span class=\"nx\">router<\/span><span class=\"p\">.<\/span><span class=\"nf\">push<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">\/login_success<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\r\n      <span class=\"c1\">\/\/ \u30ea\u30c0\u30a4\u30ec\u30af\u30c8\u306a\u3069\u3001\u30ed\u30b0\u30a4\u30f3\u5f8c\u306e\u51e6\u7406\u3092\u8ffd\u52a0<\/span>\r\n    <span class=\"p\">}<\/span> <span class=\"k\">else<\/span> <span class=\"p\">{<\/span>\r\n      <span class=\"c1\">\/\/ \u30ed\u30b0\u30a4\u30f3\u5931\u6557\u6642\u306b\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u306e\u30a8\u30e9\u30fc\u3092\u30a2\u30e9\u30fc\u30c8\u3067\u8868\u793a(\"\u793e\u54e1\u756a\u53f7\u307e\u305f\u306f\u30d1\u30b9\u30ef\u30fc\u30c9\u304c\u9593\u9055\u3063\u3066\u3044\u307e\u3059\")<\/span>\r\n      <span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nf\">json<\/span><span class=\"p\">()<\/span>\r\n      <span class=\"p\">.<\/span><span class=\"nf\">then<\/span><span class=\"p\">(<\/span><span class=\"nx\">data<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"kd\">const<\/span> <span class=\"nx\">msg<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nx\">msg<\/span><span class=\"p\">;<\/span>\r\n        <span class=\"nf\">alert<\/span><span class=\"p\">(<\/span><span class=\"nx\">msg<\/span><span class=\"p\">)<\/span>\r\n      <span class=\"p\">})<\/span>\r\n    <span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<h3>\u6210\u529f\u767b\u5f55\u540e\u7684\u5bfc\u822a\u76ee\u6807<\/h3>\n<p>\u76ee\u7684\u5730\u662f\u4e0b\u5217\u7b80\u5355\u7684\u9009\u9879<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"nx\">Link<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">next\/link<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">LoginSuccess<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n\r\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\r\n    <span class=\"p\">&lt;&gt;<\/span>\r\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>\u30ed\u30b0\u30a4\u30f3\u6210\u529f!<span class=\"p\">&lt;\/<\/span><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>\r\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n        <span class=\"p\">&lt;<\/span><span class=\"nc\">Link<\/span> <span class=\"na\">href<\/span><span class=\"p\">=<\/span><span class=\"s\">\"\/\"<\/span><span class=\"p\">&gt;&lt;<\/span><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>Home\u3078<span class=\"p\">&lt;\/<\/span><span class=\"nt\">h1<\/span><span class=\"p\">&gt;&lt;\/<\/span><span class=\"nc\">Link<\/span><span class=\"p\">&gt;<\/span>\r\n      <span class=\"p\">&lt;\/<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\r\n    <span class=\"p\">&lt;\/&gt;<\/span>\r\n  <span class=\"p\">);<\/span>\r\n<span class=\"p\">};<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">LoginSuccess<\/span><span class=\"p\">;<\/span>\r\n<\/code><\/pre>\n<h2>\u8ba9\u6211\u4eec\u4eb2\u8eab\u5c1d\u8bd5\u767b\u5f55\u5427\uff01<\/h2>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d8a5b913a08637a6c9757\/48-0.png\" alt=\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8 2023-10-22 20.02.29.png\" \/><\/div>\n<p>\u6210\u529f\u767b\u5f55\u540e\uff0c\u5c06\u4f1a\u663e\u793a\u4ee5\u4e0b\u9875\u9762\uff0c\u5e76\u5c06SessionID\u548cCSRF\u4ee4\u724c\u4fdd\u5b58\u5728Cookie\u4e2d\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d8a5b913a08637a6c9757\/50-0.png\" alt=\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8 2023-10-22 15.38.25.png\" \/><\/div>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d8a5b913a08637a6c9757\/51-0.png\" alt=\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8 2023-10-22 21.15.38.png\" \/><\/div>\n<pre class=\"post-pre\"><code>postgres=# \\d django_session\r\n session_key  | character varying(40)    |           | not null | \r\n session_data | text                     |           | not null | \r\n expire_date  | timestamp with time zone |           | not null | \r\npostgres=# select * from django_session;\r\n fjnp91385waomnbjeyrj9d5xv1yghwhu |.eJxtjEsOAiEQRO_CWgm_6UGX7j0DaWiQUQPJfFbGuzskLDSxFpVKql69mMNtzW5b4uwmYmcmuo5_rEuywzfmMTxiaSzdsdwqD7Ws8-R5m_DeLvxaKT4vfftzkHHJjSZAYEkDAqyQfuYRhIBtA0K9iohyFGBMkNKSRjac7RehkErTxI8e38AJ_E-gQ:1quXMh:m_UZbRXoULHFeFe6lyeb52dJw0Cpuq6VxCr8U8eOWCk | 2023-11-05 12:15:31.119386+00\r\n<\/code><\/pre>\n<p>\u5982\u679c\u767b\u5f55\u5931\u8d25\uff0c\u4f1a\u663e\u793a\u4ee5\u4e0b\u63d0\u793a\u6846\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d8a5b913a08637a6c9757\/54-0.png\" alt=\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8 2023-10-22 15.44.05.png\" \/><\/div>\n<p>\u4ee5\u4e0a\u662f\u4e0a\u9762\u6240\u63d0\u5230\u7684\u3002<\/p>\n<h2>\u8bf7\u53c2\u8003<\/h2>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u603b\u7ed3 \u4f7f\u7528React\u548cDjango\u6765\u521b\u5efa\u767b\u5f55\u9875\u9762\uff0c\u5e76\u4f7f\u7528\u81ea\u5df1\u7f16\u5199\u7684\u767b\u5f55API\u6765\u5b9e\u73b0\u767b\u5f55\u6210\u529f\u540e\u7684\u9875\u9762\u8df3\u8f6c\u5904\u7406\u3002  [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-49310","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>\u6709\u5173[React + Django]\u7684\u767b\u5f55\u529f\u80fd\u7684\u521b\u5efa\u65b9\u6cd5\uff0c\u8bf7\u8fdb\u884c\u8be6\u7ec6\u89e3\u91ca - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/zh\/blog\/\u6709\u5173react-django\u7684\u767b\u5f55\u529f\u80fd\u7684\u521b\u5efa\u65b9\u6cd5\uff0c\u8bf7\u8fdb\u884c\u8be6\u7ec6\u89e3\u91ca\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u6709\u5173[React + Django]\u7684\u767b\u5f55\u529f\u80fd\u7684\u521b\u5efa\u65b9\u6cd5\uff0c\u8bf7\u8fdb\u884c\u8be6\u7ec6\u89e3\u91ca\" \/>\n<meta property=\"og:description\" content=\"\u603b\u7ed3 \u4f7f\u7528React\u548cDjango\u6765\u521b\u5efa\u767b\u5f55\u9875\u9762\uff0c\u5e76\u4f7f\u7528\u81ea\u5df1\u7f16\u5199\u7684\u767b\u5f55API\u6765\u5b9e\u73b0\u767b\u5f55\u6210\u529f\u540e\u7684\u9875\u9762\u8df3\u8f6c\u5904\u7406\u3002 [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/\u6709\u5173react-django\u7684\u767b\u5f55\u529f\u80fd\u7684\u521b\u5efa\u65b9\u6cd5\uff0c\u8bf7\u8fdb\u884c\u8be6\u7ec6\u89e3\u91ca\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-14T05:51:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-30T10:56:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d8a5b913a08637a6c9757\/48-0.png\" \/>\n<meta name=\"author\" content=\"\u79d1, \u96c5\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u79d1, \u96c5\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e6%9c%89%e5%85%b3react-django%e7%9a%84%e7%99%bb%e5%bd%95%e5%8a%9f%e8%83%bd%e7%9a%84%e5%88%9b%e5%bb%ba%e6%96%b9%e6%b3%95%ef%bc%8c%e8%af%b7%e8%bf%9b%e8%a1%8c%e8%af%a6%e7%bb%86%e8%a7%a3%e9%87%8a\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e6%9c%89%e5%85%b3react-django%e7%9a%84%e7%99%bb%e5%bd%95%e5%8a%9f%e8%83%bd%e7%9a%84%e5%88%9b%e5%bb%ba%e6%96%b9%e6%b3%95%ef%bc%8c%e8%af%b7%e8%bf%9b%e8%a1%8c%e8%af%a6%e7%bb%86%e8%a7%a3%e9%87%8a\/\",\"name\":\"\u6709\u5173[React + Django]\u7684\u767b\u5f55\u529f\u80fd\u7684\u521b\u5efa\u65b9\u6cd5\uff0c\u8bf7\u8fdb\u884c\u8be6\u7ec6\u89e3\u91ca - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2022-11-14T05:51:39+00:00\",\"dateModified\":\"2024-04-30T10:56:13+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/41e222757cdd2a3365361328bd79970a\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e6%9c%89%e5%85%b3react-django%e7%9a%84%e7%99%bb%e5%bd%95%e5%8a%9f%e8%83%bd%e7%9a%84%e5%88%9b%e5%bb%ba%e6%96%b9%e6%b3%95%ef%bc%8c%e8%af%b7%e8%bf%9b%e8%a1%8c%e8%af%a6%e7%bb%86%e8%a7%a3%e9%87%8a\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/%e6%9c%89%e5%85%b3react-django%e7%9a%84%e7%99%bb%e5%bd%95%e5%8a%9f%e8%83%bd%e7%9a%84%e5%88%9b%e5%bb%ba%e6%96%b9%e6%b3%95%ef%bc%8c%e8%af%b7%e8%bf%9b%e8%a1%8c%e8%af%a6%e7%bb%86%e8%a7%a3%e9%87%8a\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e6%9c%89%e5%85%b3react-django%e7%9a%84%e7%99%bb%e5%bd%95%e5%8a%9f%e8%83%bd%e7%9a%84%e5%88%9b%e5%bb%ba%e6%96%b9%e6%b3%95%ef%bc%8c%e8%af%b7%e8%bf%9b%e8%a1%8c%e8%af%a6%e7%bb%86%e8%a7%a3%e9%87%8a\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/zh\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u6709\u5173[React + Django]\u7684\u767b\u5f55\u529f\u80fd\u7684\u521b\u5efa\u65b9\u6cd5\uff0c\u8bf7\u8fdb\u884c\u8be6\u7ec6\u89e3\u91ca\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/\",\"name\":\"Blog - Silicon Cloud\",\"description\":\"\",\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/41e222757cdd2a3365361328bd79970a\",\"name\":\"\u79d1, \u96c5\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1b2d3e00a7df03689797ebd4af8c5827ba5af936849a71050ec331f4cf902c5d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1b2d3e00a7df03689797ebd4af8c5827ba5af936849a71050ec331f4cf902c5d?s=96&d=mm&r=g\",\"caption\":\"\u79d1, \u96c5\"},\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/author\/keya\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e6%9c%89%e5%85%b3react-django%e7%9a%84%e7%99%bb%e5%bd%95%e5%8a%9f%e8%83%bd%e7%9a%84%e5%88%9b%e5%bb%ba%e6%96%b9%e6%b3%95%ef%bc%8c%e8%af%b7%e8%bf%9b%e8%a1%8c%e8%af%a6%e7%bb%86%e8%a7%a3%e9%87%8a\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u6709\u5173[React + Django]\u7684\u767b\u5f55\u529f\u80fd\u7684\u521b\u5efa\u65b9\u6cd5\uff0c\u8bf7\u8fdb\u884c\u8be6\u7ec6\u89e3\u91ca - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/zh\/blog\/\u6709\u5173react-django\u7684\u767b\u5f55\u529f\u80fd\u7684\u521b\u5efa\u65b9\u6cd5\uff0c\u8bf7\u8fdb\u884c\u8be6\u7ec6\u89e3\u91ca\/","og_locale":"zh_CN","og_type":"article","og_title":"\u6709\u5173[React + Django]\u7684\u767b\u5f55\u529f\u80fd\u7684\u521b\u5efa\u65b9\u6cd5\uff0c\u8bf7\u8fdb\u884c\u8be6\u7ec6\u89e3\u91ca","og_description":"\u603b\u7ed3 \u4f7f\u7528React\u548cDjango\u6765\u521b\u5efa\u767b\u5f55\u9875\u9762\uff0c\u5e76\u4f7f\u7528\u81ea\u5df1\u7f16\u5199\u7684\u767b\u5f55API\u6765\u5b9e\u73b0\u767b\u5f55\u6210\u529f\u540e\u7684\u9875\u9762\u8df3\u8f6c\u5904\u7406\u3002 [&hellip;]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/\u6709\u5173react-django\u7684\u767b\u5f55\u529f\u80fd\u7684\u521b\u5efa\u65b9\u6cd5\uff0c\u8bf7\u8fdb\u884c\u8be6\u7ec6\u89e3\u91ca\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2022-11-14T05:51:39+00:00","article_modified_time":"2024-04-30T10:56:13+00:00","og_image":[{"url":"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d8a5b913a08637a6c9757\/48-0.png"}],"author":"\u79d1, \u96c5","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u79d1, \u96c5","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"6 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e6%9c%89%e5%85%b3react-django%e7%9a%84%e7%99%bb%e5%bd%95%e5%8a%9f%e8%83%bd%e7%9a%84%e5%88%9b%e5%bb%ba%e6%96%b9%e6%b3%95%ef%bc%8c%e8%af%b7%e8%bf%9b%e8%a1%8c%e8%af%a6%e7%bb%86%e8%a7%a3%e9%87%8a\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/%e6%9c%89%e5%85%b3react-django%e7%9a%84%e7%99%bb%e5%bd%95%e5%8a%9f%e8%83%bd%e7%9a%84%e5%88%9b%e5%bb%ba%e6%96%b9%e6%b3%95%ef%bc%8c%e8%af%b7%e8%bf%9b%e8%a1%8c%e8%af%a6%e7%bb%86%e8%a7%a3%e9%87%8a\/","name":"\u6709\u5173[React + Django]\u7684\u767b\u5f55\u529f\u80fd\u7684\u521b\u5efa\u65b9\u6cd5\uff0c\u8bf7\u8fdb\u884c\u8be6\u7ec6\u89e3\u91ca - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2022-11-14T05:51:39+00:00","dateModified":"2024-04-30T10:56:13+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/41e222757cdd2a3365361328bd79970a"},"breadcrumb":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e6%9c%89%e5%85%b3react-django%e7%9a%84%e7%99%bb%e5%bd%95%e5%8a%9f%e8%83%bd%e7%9a%84%e5%88%9b%e5%bb%ba%e6%96%b9%e6%b3%95%ef%bc%8c%e8%af%b7%e8%bf%9b%e8%a1%8c%e8%af%a6%e7%bb%86%e8%a7%a3%e9%87%8a\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/%e6%9c%89%e5%85%b3react-django%e7%9a%84%e7%99%bb%e5%bd%95%e5%8a%9f%e8%83%bd%e7%9a%84%e5%88%9b%e5%bb%ba%e6%96%b9%e6%b3%95%ef%bc%8c%e8%af%b7%e8%bf%9b%e8%a1%8c%e8%af%a6%e7%bb%86%e8%a7%a3%e9%87%8a\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e6%9c%89%e5%85%b3react-django%e7%9a%84%e7%99%bb%e5%bd%95%e5%8a%9f%e8%83%bd%e7%9a%84%e5%88%9b%e5%bb%ba%e6%96%b9%e6%b3%95%ef%bc%8c%e8%af%b7%e8%bf%9b%e8%a1%8c%e8%af%a6%e7%bb%86%e8%a7%a3%e9%87%8a\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/zh\/blog\/"},{"@type":"ListItem","position":2,"name":"\u6709\u5173[React + Django]\u7684\u767b\u5f55\u529f\u80fd\u7684\u521b\u5efa\u65b9\u6cd5\uff0c\u8bf7\u8fdb\u884c\u8be6\u7ec6\u89e3\u91ca"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website","url":"https:\/\/www.silicloud.com\/zh\/blog\/","name":"Blog - Silicon Cloud","description":"","inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/41e222757cdd2a3365361328bd79970a","name":"\u79d1, \u96c5","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1b2d3e00a7df03689797ebd4af8c5827ba5af936849a71050ec331f4cf902c5d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1b2d3e00a7df03689797ebd4af8c5827ba5af936849a71050ec331f4cf902c5d?s=96&d=mm&r=g","caption":"\u79d1, \u96c5"},"url":"https:\/\/www.silicloud.com\/zh\/blog\/author\/keya\/"},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e6%9c%89%e5%85%b3react-django%e7%9a%84%e7%99%bb%e5%bd%95%e5%8a%9f%e8%83%bd%e7%9a%84%e5%88%9b%e5%bb%ba%e6%96%b9%e6%b3%95%ef%bc%8c%e8%af%b7%e8%bf%9b%e8%a1%8c%e8%af%a6%e7%bb%86%e8%a7%a3%e9%87%8a\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/49310","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/comments?post=49310"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/49310\/revisions"}],"predecessor-version":[{"id":93688,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/49310\/revisions\/93688"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=49310"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=49310"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=49310"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}