已拦截跨源请求:同源策略禁止读取位于 file:///modify-table 的远程资源。(原因:CORS 请求不是 http)续上一篇文章的解决方法

这个错误是由于CORS(跨源资源共享)策略导致的,因为浏览器不允许前端代码从file:///协议访问http://localhost:3000。为了避免这个问题,你需要使用HTTP服务器来提供HTML文件。

你可以使用Node.js中的Express来同时提供HTML文件和处理API请求。以下是完整的示例,包括提供HTML文件的部分。

1.创建项目目录结构

project

├── server.js

└── public

└── index.html

2.修改 server.js 文件

javascript 复制代码
const express = require('express');
const mysql = require('mysql');
const bodyParser = require('body-parser');
const path = require('path');
const app = express();

app.use(bodyParser.json());
app.use(express.static(path.join(__dirname, 'public'))); // 设置静态文件目录

// 配置MySQL连接
const db = mysql.createConnection({
    host: 'localhost',
    user: 'your_username',
    password: 'your_password',
    database: 'your_database'
});

// 连接到MySQL
db.connect((err) => {
    if (err) {
        throw err;
    }
    console.log('MySQL connected...');
});

// 创建一个简单的API来处理数据库操作
app.post('/modify-table', (req, res) => {
    let sql = req.body.query;
    db.query(sql, (err, result) => {
        if (err) {
            res.status(500).send(err);
        }
        res.send(result);
    });
});

// 启动服务器
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server started on port ${PORT}`);
});

3. 创建 public/index.html 文件

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modify MySQL Table</title>
</head>
<body>
    <h1>Modify MySQL Table</h1>
    <form id="query-form">
        <textarea id="query" placeholder="Enter SQL query" rows="4" cols="50"></textarea><br>
        <button type="submit">Submit</button>
    </form>
    <div id="result"></div>

    <script>
        document.getElementById('query-form').addEventListener('submit', function (e) {
            e.preventDefault();
            const query = document.getElementById('query').value;
            fetch('/modify-table', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ query })
            })
            .then(response => response.json())
            .then(data => {
                document.getElementById('result').textContent = JSON.stringify(data, null, 2);
            })
            .catch(error => {
                document.getElementById('result').textContent = 'Error: ' + error;
            });
        });
    </script>
</body>
</html>

4. 启动Node.js服务器

在项目根目录下运行:

html 复制代码
node server.js

5. 访问页面

打开浏览器,访问http://localhost:3000。现在你应该能够正确地通过表单发送请求并修改MySQL数据库。

备注

  • 确保MySQL服务器正在运行,并且你有一个可用的数据库。
  • your_usernameyour_passwordyour_database替换为实际的MySQL凭据。

这种方法使用了Node.js服务器来提供HTML文件,从而避免了CORS问题。确保在实际应用中加入适当的安全验证和权限控制,以防止SQL注入和其他安全问题。

相关推荐
铅笔侠_小龙虾5 分钟前
深入理解 Vue.js 原理
前端·javascript·vue.js
川石课堂软件测试9 分钟前
自动化测试之 Cucumber 工具
数据库·功能测试·网络协议·测试工具·mysql·单元测试·prometheus
你的眼睛會笑11 分钟前
vue3 使用html2canvas实现网页截图并下载功能 以及问题处理
前端·javascript·vue.js
Hilaku40 分钟前
技术Leader的“第一性原理”:我是如何做技术决策的?
前端·javascript·面试
卓码软件测评41 分钟前
第三方媒体流压力测试:k6插件xk6-webrtc的使用来测试媒体流的性能
网络协议·测试工具·http·https·webrtc·ssl·媒体
悟能不能悟1 小时前
电脑没法ping通某个网段的ip
网络协议·tcp/ip·电脑
渣哥1 小时前
面试高频:Spring 事务传播行为的核心价值是什么?
javascript·后端·面试
星瞰物联2 小时前
RDSS 与 RNSS 定位技术深度解析(二)——系统架构、性能指标
网络·系统架构
九十一2 小时前
websocket的连接原理
前端·javascript
小钻风33662 小时前
HTTPS是如何确保安全的
网络·数据库