最近学习的一些内容，包括跨域问题及其解决方案，安卓开发的简单探索，OpenAI的api做了个小插件

额，把原来用Hexo托管在Github上的博客重新搞了一下，本来我是想坚持每天写博客的，但一直苦于没有时间~~（其实就是懒），腾出时间把服务器和备案给搞了（又找借口）~~，本来想用Vue和Spring自己写的，但还没学完（ ）

一、跨域问题及其解决方案

1.概念

跨域问题是指在浏览器的同源策略下，不同域名、端口或协议之间的网页请求受到限制，导致某些跨域请求被浏览器阻止。同源策略是一种安全机制，防止恶意网站获取到用户的敏感信息。

源：协议+域名+端口

1. 不同域名：比如从 domain1.com 发起请求到 domain2.com。
2. 不同端口：比如从 domain.com:3000 发起请求到 domain.com:4000。
3. 不同协议：比如从 http://domain.com 发起请求到 https://domain.com。

2.解决方案

1. CORS（跨域资源共享）：服务器端设置响应头，允许特定来源的请求。通过设置 Access-Control-Allow-Origin 头部来指定允许访问的域名，但是建议不要设置 Access-Control-Allow-Origin: *，在某些情况下只设置通配符会被理解为暂未配置。

比如使用nodejs处理一个简单的请求

JS
1const express = require('express');
2const app = express();
3app.get('/', (req, res) => {
4    res.header('Access-Control-Allow-Origin', '127.0.0.1');
5    res.status(200).sendFile('XXX.html');
6});

此时你能够在浏览器开发人员工具——网络选项卡看到这个响应头的一部分

这里注意，是只有在响应头中看到这段语句浏览器才能正常请求，找不到语句（没有默认是拒绝）或者没有请求所在的域名均不会成功

2. JSONP（JSON with Padding）：通过 <script> 标签的方式实现跨域请求。JSONP利用了 <script> 标签可以跨域加载的特性，不过只支持GET请求，并且存在安全性问题。

是早期的工程师们的非常天才的想法！这东西的原理是请求URL会返回类似callbackFunction(data)的字段，也就是一段js代码，这样可以使浏览器执行，从而实现预期效果

HTML
1<script src="https://otherdomain.com/data?callback=myFunction"></script>
2function myFunction(data) {
3  console.log(data);
4}

3. 代理服务器：在同源策略下，通过在同一个域名下创建API代理，让客户端请求自己的服务器，再由服务器转发请求到目标地址。这样可以绕过浏览器的限制。

JS
1// 在服务器端发起请求
2const resp = await axios.get('https://pvp.qq.com/web2 herolist.json');
3// 将获取的数据返回给客户端
4app.get('/', (req, res) => {
5    res.header('Access-Control-Allow-Origin', '127.0.0.1');
6    res.send(resp.data);
7});

二、安卓开发的浅探索

这个其实是一个迫不得已的学习内容，起因是班级同学拽上我去参加一个嵌入式比赛，作品当然是大一专属的小车（蚌埠住了），他们希望亮点是软件，所以我就现学的安卓开发，本来还学了Kotlin一瘸一拐地写了点内容，但后来搞一些复杂的内容用一个不熟悉的语言还是太痛苦，所以还是回到了Java

 GitHub

grtsinry43/stm32-project-smartcontrol

项目包括以下几个类：

• MainActivity.java：应用的主界面，实现手动控制，扫码反序列化，关于页面等功能
• BluetoothActivity.java：实现蓝牙的连接和通信
• ControlActivity.java：实现小车的控制指令的发送和接收
• QRCodeActivity.java：实现二维码的扫描和解析
• AboutActivity.java：显示应用的相关信息

所有都是现学的，我就大概说一下我学到了什么吧：

安卓开发是标准舒服的行为样式相分离，开发的单位是Java/Kotlin的类，每个界面是Activity，每个图形元素有对应的xml样式布局文件。大体上开发时候先用Adobe XD或者sigma（国内也可以即时设计啥的）设计好界面，然后为每个元素写xml文件，Activity里面通过id找到元素，可以添加、修改元素，可以监听元素动作（比如Button），但是通知线程服务啥的必须得学明白，别像我啥都不会，写的时候很痛苦

三、OpenAI的api简单使用

就是用js调用一个api，把回应显示出来，没什么复杂的，现在以我的技术只能做出这样（捂脸），前端有太多需要学的了......

JS
1// ==UserScript==
2// @name         GPT Answer
3// @namespace    http://tampermonkey.net/
4// @version      0.1
5// @description  Get GPT answer for selected text
6// @author       You
7// @match        *://*/*
8// @grant        none
9// ==/UserScript==
10
11(function() {
12    'use strict';
13
14    // 创建悬浮提示框
15    var tooltip = document.createElement('div');
16    tooltip.style.position = 'fixed';
17    tooltip.style.zIndex = '9999';
18    tooltip.style.display = 'none';
19    tooltip.innerHTML = '<button id="gpt-answer">GPT回答</button>';
20
21    // 创建GPT回答显示区域
22    var answerArea = document.createElement('div');
23    answerArea.style.position = 'fixed';
24    answerArea.style.zIndex = '9999';
25    answerArea.style.display = 'none';
26    answerArea.style.outline = '1px solid';
27
28    document.body.appendChild(tooltip);
29    document.body.appendChild(answerArea);
30
31    // 监听文本选择事件
32    document.addEventListener('mouseup', function(e) {
33        var selectedText = window.getSelection().toString().trim();
34        if (selectedText) {
35            var selectedElement = window.getSelection().anchorNode.parentNode;
36            var rect = selectedElement.getBoundingClientRect();
37            tooltip.style.left = (rect.right + 10) + 'px';
38            tooltip.style.top = rect.top + 'px';
39            tooltip.style.display = 'block';
40        } else {
41            tooltip.style.display = 'none';
42        }
43    });
44
45    // 监听GPT回答按钮点击事件
46    document.getElementById('gpt-answer').addEventListener('click', function() {
47        var selectedText = window.getSelection().toString().trim();
48        if (selectedText) {
49            // 调用OpenAI API
50            fetch('https://api.openai.com/v1/chat/completions', {
51                method: 'POST',
52                headers: {
53                    'Content-Type': 'application/json',
54                    'Authorization': 'Bearer API_KEY'
55                },
56                body: JSON.stringify({
57                    model: "gpt-3.5-turbo",
58                    messages: [
59                        {"role": "system", "content": "你是一个耐心回答问题的助手，请解答这个问题，谢谢！"},
60                        {"role": "user", "content": selectedText}
61                    ]
62                })
63            }).then(response => response.json())
64            .then(data => {
65                // 在固定位置显示GPT的回答
66                var gptResponse = data['choices'][0]['message']['content'];
67                answerArea.textContent = gptResponse;
68                var selectedElement = window.getSelection().anchorNode.parentNode;
69                var rect = selectedElement.getBoundingClientRect();
70                answerArea.style.left = (rect.right + 10) + 'px';
71                answerArea.style.top = (rect.bottom + 10) + 'px';
72                answerArea.style.display = 'block';
73            });
74        }
75    });
76
77    // 监听页面点击事件，隐藏GPT回答显示区域
78    document.addEventListener('click', function(e) {
79        if (e.target !== answerArea && e.target !== tooltip && e.target !== document.getElementById('gpt-answer')) {
80            answerArea.style.display = 'none';
81        }
82    });
83})();