如何用JS实现send.html内容在index.html展示及CORS跨域问题解决

首先你原代码里有个拼写错误：credentials: "cement"应该是"include"、"same-origin"或"omit"，但这不是核心问题——前端JS出于安全限制，无法直接写入本地文件，所以靠读取本地txt的思路走不通，下面给几个实用的替代方案：

方案1：用LocalStorage实现单浏览器内的内容同步 #

这是最简单的无后端方案，适合仅在同一浏览器内使用的场景：

send.html 发送逻辑 #

<textarea id="inputContent" rows="5" cols="50"></textarea>
<button onclick="saveContent()">发送内容</button>

<script>
function saveContent() {
  const content = document.getElementById('inputContent').value;
  localStorage.setItem('dailyBlogContent', content);
  alert('内容已保存');
}
</script>

index.html 读取显示逻辑 #

<div id="content"></div>

<script>
window.onload = function() {
  const savedContent = localStorage.getItem('dailyBlogContent');
  if (savedContent) {
    document.getElementById('content').innerText = savedContent;
  }
};
</script>

方案2：用Node.js搭建极简后端（支持跨浏览器/设备） #

如果需要多设备或多浏览器访问，必须依赖后端存储内容，这里给个最简化的实现：

1. 后端服务代码（server.js） #

const express = require('express');
const fs = require('fs');
const app = express();
const port = 3000;

app.use(express.urlencoded({ extended: true }));
app.use(express.static('public')); // 前端文件放在public文件夹

// 保存内容接口
app.post('/save-content', (req, res) => {
  const content = req.body.content;
  fs.writeFile('sus.txt', content, (err) => {
    err ? res.status(500).send('保存失败') : res.send('保存成功');
  });
});

// 获取内容接口
app.get('/get-content', (req, res) => {
  fs.readFile('sus.txt', 'utf8', (err, data) => {
    err ? res.status(404).send('暂无内容') : res.send(data);
  });
});

app.listen(port, () => {
  console.log(`服务运行在 http://localhost:${port}`);
});

2. 前端修改 #

send.html发送逻辑：

<textarea id="inputContent" rows="5" cols="50"></textarea>
<button onclick="sendContent()">发送内容</button>

<script>
async function sendContent() {
  const content = document.getElementById('inputContent').value;
  await fetch('/save-content', {
    method: 'POST',
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    body: `content=${encodeURIComponent(content)}`
  });
  alert('内容已发送');
}
</script>

index.html读取逻辑：

<div id="content"></div>

<script>
async function loadContent() {
  const resp = await fetch('/get-content');
  const text = await resp.text();
  document.getElementById('content').innerText = text;
}
window.onload = loadContent;
</script>

3. 运行步骤 #

• 安装依赖：npm install express
• 把send.html、index.html放入public文件夹
• 启动服务：node server.js
• 访问http://localhost:3000/send.html输入内容，http://localhost:3000/index.html查看内容

方案3：用IndexedDB存储（适合多段历史内容） #

如果需要保存多条历史内容，IndexedDB比LocalStorage更适合，它支持更大存储容量和复杂查询：

通用工具函数（send.html和index.html均可调用） #

// 初始化数据库
function initDB() {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open('BlogDB', 1);
    request.onupgradeneeded = (e) => {
      const db = e.target.result;
      db.createObjectStore('posts', { keyPath: 'id', autoIncrement: true });
    };
    request.onsuccess = (e) => resolve(e.target.result);
    request.onerror = (e) => reject(e.target.error);
  });
}

// 保存内容
async function savePost(content) {
  const db = await initDB();
  const transaction = db.transaction('posts', 'readwrite');
  await transaction.objectStore('posts').add({ content, date: new Date().toLocaleString() });
}

// 获取最新内容
async function getLatestPost() {
  const db = await initDB();
  const transaction = db.transaction('posts', 'readonly');
  const request = transaction.objectStore('posts').openCursor(null, 'prev');
  return new Promise((resolve) => {
    request.onsuccess = (e) => {
      const cursor = e.target.result;
      resolve(cursor ? cursor.value.content : '暂无内容');
    };
  });
}

send.html调用savePost(content)完成保存，index.html调用getLatestPost()获取并显示内容即可。

内容的提问来源于stack exchange，提问作者umsc