StructBERT中文通用相似度模型保姆级教程：API跨域调用配置说明

StructBERT中文通用相似度模型保姆级教程API跨域调用配置说明1. 什么是StructBERT相似度服务这是一个基于百度StructBERT大模型的中文句子相似度计算工具。它能帮你判断两句话的意思有多接近相似度范围从0到1数值越接近1表示越相似。举个例子就很明白了今天天气很好 和 今天阳光明媚 → 相似度大概0.85意思很接近今天天气很好 和 我喜欢吃苹果 → 相似度大概0.12完全不相关这个工具特别适合用在客服系统中自动匹配用户问题和标准答案检查文章或评论是否有重复内容问答系统中找到最相关的问题和答案判断句子改写后是否保持了原意2. 环境准备与快速启动2.1 确认服务状态首先检查服务是否已经在运行# 检查进程 ps aux | grep python.*app.py # 测试健康状态 curl http://127.0.0.1:5000/health正常应该返回{ status: healthy, model_loaded: true }2.2 访问Web界面服务运行后直接在浏览器打开http://gpu-pod698386bfe177c841fb0af650-5000.web.gpu.csdn.net/你会看到一个紫色渐变的界面支持电脑和手机访问可以实时计算句子相似度。3. API跨域调用完整配置3.1 理解跨域问题当你在浏览器中用JavaScript调用不同域名的API时会遇到跨域限制。比如你的网页在example.com但API服务在另一个域名浏览器会阻止这种请求。常见的错误信息Access to fetch at http://api-service:5000/similarity from origin http://your-site.com has been blocked by CORS policy3.2 服务端CORS配置需要在Flask应用中启用CORS支持修改app.py文件from flask import Flask, request, jsonify from flask_cors import CORS # 导入CORS模块 app Flask(__name__) # 配置CORS允许所有域名访问 CORS(app, resources{r/*: {origins: *}}) # 或者更安全的配置只允许特定域名 # CORS(app, resources{r/api/*: {origins: [https://your-domain.com, http://localhost:3000]}}) app.route(/similarity, methods[POST]) def calculate_similarity(): data request.get_json() sentence1 data.get(sentence1, ) sentence2 data.get(sentence2, ) # 计算相似度的逻辑 similarity_score calculate_similarity_score(sentence1, sentence2) return jsonify({ similarity: similarity_score, sentence1: sentence1, sentence2: sentence2 }) if __name__ __main__: app.run(host0.0.0.0, port5000, threadedTrue)3.3 安装CORS依赖如果还没有安装flask-cors需要先安装pip install flask-cors或者如果使用requirements.txt确保包含flask-cors4.0.04. 前端调用示例4.1 使用JavaScript Fetch API// 相似度计算函数 async function calculateSimilarity(sentence1, sentence2) { try { const response await fetch(http://gpu-pod698386bfe177c841fb0af650-5000.web.gpu.csdn.net/similarity, { method: POST, headers: { Content-Type: application/json, }, body: JSON.stringify({ sentence1: sentence1, sentence2: sentence2 }) }); if (!response.ok) { throw new Error(HTTP error! status: ${response.status}); } const data await response.json(); return data; } catch (error) { console.error(计算相似度失败:, error); throw error; } } // 使用示例 calculateSimilarity(今天天气很好, 今天阳光明媚) .then(result { console.log(相似度结果:, result); document.getElementById(result).innerText 相似度: ${result.similarity.toFixed(4)}; }) .catch(error { console.error(出错:, error); });4.2 使用jQuery调用function calculateSimilarity(sentence1, sentence2) { return $.ajax({ url: http://gpu-pod698386bfe177c841fb0af650-5000.web.gpu.csdn.net/similarity, type: POST, contentType: application/json, data: JSON.stringify({ sentence1: sentence1, sentence2: sentence2 }), dataType: json }); } // 使用示例 $(#calculate-btn).click(function() { const s1 $(#sentence1).val(); const s2 $(#sentence2).val(); calculateSimilarity(s1, s2) .done(function(result) { $(#result).text(相似度: ${result.similarity}); }) .fail(function(error) { console.error(请求失败:, error); }); });4.3 批量计算调用示例// 批量计算相似度 async function batchCalculateSimilarity(source, targets) { try { const response await fetch(http://gpu-pod698386bfe177c841fb0af650-5000.web.gpu.csdn.net/batch_similarity, { method: POST, headers: { Content-Type: application/json, }, body: JSON.stringify({ source: source, targets: targets }) }); const data await response.json(); return data.results.sort((a, b) b.similarity - a.similarity); } catch (error) { console.error(批量计算失败:, error); throw error; } } // 使用示例智能客服问题匹配 const userQuestion 怎么修改密码; const faqQuestions [ 如何重置登录密码, 密码忘记了怎么办, 怎样注册新账号, 如何修改个人信息 ]; batchCalculateSimilarity(userQuestion, faqQuestions) .then(results { console.log(最相关问题:, results[0]); if (results[0].similarity 0.7) { showAnswer(results[0].sentence); } });5. 跨域调用常见问题解决5.1 处理预检请求OPTIONS对于复杂请求浏览器会先发送OPTIONS请求需要在服务端处理app.route(/similarity, methods[OPTIONS]) def handle_options(): response jsonify() response.headers.add(Access-Control-Allow-Origin, *) response.headers.add(Access-Control-Allow-Headers, Content-Type) response.headers.add(Access-Control-Allow-Methods, POST) return response5.2 配置Nginx反向代理如果通过Nginx访问可以配置反向代理解决跨域server { listen 80; server_name your-domain.com; location /api/similarity/ { proxy_pass http://localhost:5000/similarity; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; # CORS headers add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods GET, POST, OPTIONS; add_header Access-Control-Allow-Headers DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range; if ($request_method OPTIONS) { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods GET, POST, OPTIONS; add_header Access-Control-Allow-Headers DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range; add_header Access-Control-Max-Age 1728000; add_header Content-Type text/plain; charsetutf-8; add_header Content-Length 0; return 204; } } }5.3 处理跨域错误在前端代码中添加错误处理// 增强的调用函数 async function safeApiCall(url, options) { try { const response await fetch(url, options); if (response.status 403) { throw new Error(跨域请求被拒绝请检查CORS配置); } if (response.status 404) { throw new Error(API接口不存在请检查URL); } if (!response.ok) { throw new Error(HTTP错误: ${response.status}); } return await response.json(); } catch (error) { if (error.name TypeError error.message.includes(Failed to fetch)) { throw new Error(网络连接失败请检查服务是否运行); } throw error; } }6. 完整的前后端集成示例6.1 HTML页面示例!DOCTYPE html html head title句子相似度计算/title style .container { max-width: 800px; margin: 0 auto; padding: 20px; } .input-group { margin-bottom: 15px; } textarea { width: 100%; height: 60px; padding: 10px; } button { padding: 10px 20px; background: #007bff; color: white; border: none; cursor: pointer; } .result { margin-top: 20px; padding: 15px; background: #f8f9fa; border-radius: 5px; } /style /head body div classcontainer h1中文句子相似度计算/h1 div classinput-group label句子1:/label textarea idsentence1 placeholder输入第一句话.../textarea /div div classinput-group label句子2:/label textarea idsentence2 placeholder输入第二句话.../textarea /div button onclickcalculate()计算相似度/button div classresult idresult 结果将显示在这里... /div /div script async function calculate() { const s1 document.getElementById(sentence1).value; const s2 document.getElementById(sentence2).value; if (!s1 || !s2) { alert(请输入两个句子); return; } try { const result await calculateSimilarity(s1, s2); displayResult(result); } catch (error) { document.getElementById(result).innerHTML div stylecolor: red;错误: ${error.message}/div; } } // 这里使用前面定义的calculateSimilarity函数 /script /body /html6.2 React组件示例import React, { useState } from react; import ./SimilarityCalculator.css; function SimilarityCalculator() { const [sentence1, setSentence1] useState(); const [sentence2, setSentence2] useState(); const [result, setResult] useState(null); const [loading, setLoading] useState(false); const [error, setError] useState(); const calculateSimilarity async () { setLoading(true); setError(); try { const response await fetch(http://gpu-pod698386bfe177c841fb0af650-5000.web.gpu.csdn.net/similarity, { method: POST, headers: { Content-Type: application/json, }, body: JSON.stringify({ sentence1, sentence2 }) }); if (!response.ok) { throw new Error(请求失败: ${response.status}); } const data await response.json(); setResult(data); } catch (err) { setError(err.message); } finally { setLoading(false); } }; return ( div classNamesimilarity-calculator h2句子相似度计算/h2 div classNameinput-group textarea value{sentence1} onChange{(e) setSentence1(e.target.value)} placeholder输入第一句话... / /div div classNameinput-group textarea value{sentence2} onChange{(e) setSentence2(e.target.value)} placeholder输入第二句话... / /div button onClick{calculateSimilarity} disabled{loading} {loading ? 计算中... : 计算相似度} /button {error div classNameerror{error}/div} {result ( div classNameresult h3计算结果/h3 p相似度: strong{result.similarity.toFixed(4)}/strong/p div classNamesimilarity-bar div classNamesimilarity-fill style{{ width: ${result.similarity * 100}% }} /div /div /div )} /div ); } export default SimilarityCalculator;7. 安全配置建议7.1 生产环境CORS配置在生产环境中不建议使用*允许所有域名应该配置具体的允许域名# 生产环境配置 ALLOWED_ORIGINS [ https://your-production-domain.com, https://www.your-domain.com, http://localhost:3000, # 开发环境 ] CORS(app, resources{ r/api/*: { origins: ALLOWED_ORIGINS, methods: [GET, POST, OPTIONS], allow_headers: [Content-Type] } })7.2 添加API密钥验证对于生产环境建议添加API密钥验证from functools import wraps def require_api_key(f): wraps(f) def decorated_function(*args, **kwargs): api_key request.headers.get(X-API-Key) if api_key ! os.getenv(API_KEY): return jsonify({error: Invalid API key}), 401 return f(*args, **kwargs) return decorated_function app.route(/similarity, methods[POST]) require_api_key def calculate_similarity(): # 处理逻辑前端调用时添加API密钥fetch(/similarity, { method: POST, headers: { Content-Type: application/json, X-API-Key: your-api-key-here }, body: JSON.stringify(data) })8. 总结通过本文的配置你现在应该能够正确配置CORS让前端应用可以跨域调用StructBERT相似度API理解跨域原理知道如何解决常见的跨域问题在前端各种框架中集成相似度计算功能配置生产环境的安全设置保护你的API服务关键要点回顾使用flask-cors模块简化CORS配置前端调用时注意错误处理和用户体验生产环境要限制允许的域名和添加认证通过Nginx反向代理可以进一步优化跨域配置现在你的应用可以无缝集成中文句子相似度计算功能了无论是客服系统、内容去重还是智能问答都能轻松实现获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。