构造HTTP请求

构造HTTP请求

一、浏览器自己构造

1）地址栏里写URL，构造出GET请求
2）点击a标签等，也会构造GET请求
3）img、link、script也会构造GET请求

二、通过 form 表单构造

form (表单) 是 HTML 中的一个常用标签。可以用于给服务器发送 GET 或者 POST 请求。

form 的重要参数：

  • action：构造的 HTTP 请求的 URL 是什么
  • method：构造的 HTTP 请求的 方法 是 GET 还是 POST (form 只支持 GET 和 POST)

input 的重要参数：

  • type：表示输入框的类型：text 表示文本；password 表示密码；submit 表示提交按钮
  • name：表示构造出的 HTTP 请求的 query string 的 key；query string 的 value 就是输入框的用户输入的内容
  • value：input 标签的值。对于 type 为 submit 类型来说，value 就对应了按钮上显示的文本

name 也就决定了使用 getParameter 获取键值对的值时，传入的参数是什么 ~~

构造一个GET请求：(在VSCode中编写form.html)

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>formtitle>
head>
<body>
    <form action="http://www.sogou.com" method="get">
        <input type="text" name="aa">
        <input type="text" name="bb">
        <input type="submit" value="提交">
    form>
body>
html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

打开form.html文件，在输入框随便填写数据：
在这里插入图片描述
点击 “提交”，此时就会构造出 HTTP 请求并发送出去~~

此时打开的页面：
在这里插入图片描述

就把参数 (键值对) 构造到 查询字符串 (query string) 中了！！！

在这里插入图片描述

form最关键的作用，就是给服务器传键值对！

同理，构造一个POST请求：(在VSCode中编写form.html)

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>formtitle>
head>
<body>
    <form action="http://www.sogou.com" method="post">
        <input type="text" name="aa">
        <input type="text" name="bb">
        <input type="submit" value="提交">
    form>
body>
html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

输入11、22并用Fiddler进行抓包，得到：

在这里插入图片描述

在这里插入图片描述
就把参数 (键值对) 构造到 请求正文 (body) 中了！！！

三、通过 ajax 构造

从前端角度，除了浏览器地址栏能构造 GET 请求，form 表单能构造 GET 和 POST 之外，还可以通过 ajax 的方式来构造 HTTP 请求，并且功能更强大！

ajax 全称 Asynchronous Javascript And XML，是 2005 年提出的一种 JavaScript 给服务器发送 HTTP 请求的方式。
特点是可以不需要 刷新页面 / 页面跳转 就能进行数据传输。
页面跳转不是一个好事：开销大、时间慢、用户就得等，使用ajax不去触发跳转就可以达到 “局部刷新” 这样的效果 ~~

Asynchronous (异步)：
是不是觉得很眼熟？之前学习多线程时有一个重要的锁：synchronized，同时也是 “同步” 的意思。
"同步"有两层含义，彼此之间没有联系：

  1. 指 “互斥”：多线程锁 synchronized；
  2. 谁发起的请求，谁负责接收结果：在网络通信 / IO操作的时候涉及到。

异步，是与第2个同步相对的，表示的是：发起请求的主体，不负责接受结果，而是由别人主动推送过来。
(举个快餐店的例子：同步相当于我点的单，我自己把饭端走；异步相当于我点的单，服务员把饭端上来了)

在 JavaScript 中可以通过 ajax 的方式构造 HTTP 请求：

ajax API 是属于浏览器原生自带的，但原生的API不太好用。因此，就可以使用第三方库封装好的API来代替原生的API。这里我们使用 jquery (js圈子里最知名的第三方库之一) ~~

可以直接通过网络地址把 jquery 引入到代码中：http://libs.baidu.com/jquery/2.0.0/jquery.min.js

代码示例：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
	
    <script src="https://code.jquery.com/jquery-3.6.1.min.js">script>
    <script>
        $.ajax({
            type: 'get',
            url: 'https://www.sogou.com',
            // data: 'http 请求的 body',    // 参数
            // contentType: 'x-www-form-urlencoded',   // post请求加上
            success: function(body) {
                // 服务器返回一个正确的响应 (200)
                // 就会由浏览器调用这个 success 对应的函数，来处理响应
                // 参数 body 就是响应的正文
                console.log("ok");
            },
            error: function() { 
                // 服务器返回一个错误的响应
                // 就会由浏览器调用这个 error 对应的函数
                console.log("error");
            }
        });
    script>
body>
html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32

需要传参的情况：
在这里插入图片描述

这里先由服务器返回 正确 / 错误，然后才由浏览器调用相对应的函数 (回调函数)，就做到了 “异步”。

$ 是 jquery 中特殊的变量名，是 jquery 里的全局对象 (但是更推荐使用 jQuery.)。通过这个对象，就可以调用里面的一些方法，这些方法就是 jquery 的 API。虽然 ajax 方法的参数只有一个，但是里面是个对象 ~~

直接将代码在浏览器中运行，会报错：
在这里插入图片描述

跨域：一个页面在域名A之下，尝试通过ajax访问域名B里的资源。
这种情况，浏览器默认是禁止的。除非B网站返回的响应明确告诉浏览器说允许跨域访问。
市面上看到的大部分网站 / 服务器基本都是不允许跨域的 ~~

在这里插入图片描述

针对跨域，最好的办法就是 自己写一个服务器，页面放到自己的服务器上，访问咱们自己服务器的资源。(后面讲解servlet~)

四、通过 Postman 构造

官网下载即可，操作简单又方便 ~~

Ollama本地服务无法通过IP访问的终极解决方案

问题描述

在 Mac 系统上启动 Ollama 服务后，通过 localhost 可以正常访问 API，但通过本地 IP（如 192.168.1.106）访问时却报错 Connection refused。

1. 问题现象

  • 正常访问：curl http://localhost:11434/api/generate 可正常返回结果。
  • 异常访问：curl http://192.168.1.106:11434/api/generate 报错 Connection refused。

2. 排查步骤与解决方案

2.1 检查ollama 配置`

Ollama 默认仅监听 localhost，需配置为监听 0.0.0.0。

执行以下命令检查 ollama 监听的 ip

bash
 代码解读
复制代码
lsof -i :11434

若返回

bash
 代码解读
复制代码
COMMAND   PID   USER   FD   TYPE             DEVICE SIZE/OFF NODE NAME
ollama  99664  user    3u  IPv6 0xb5d825d19a65fcd3      0t0  TCP localhost:11434 (LISTEN)

其中localhost:11434说明 ollama 只监听了localhost，这样当你使用 ip 访问 ollama 服务的时候就会被 refused

正常返回应如下

bash
 代码解读
复制代码
COMMAND   PID   USER   FD   TYPE             DEVICE SIZE/OFF NODE NAME
ollama  99664  user    3u  IPv6 0xb5d825d19a65fcd3      0t0  TCP *:11434 (LISTEN)

2.2 环境变量强制覆盖配置（关键解决方案）

临时方案：
通过设置当前终端会话环境变量 OLLAMA_HOST 强制临时指定监听地址：

bash
 代码解读
复制代码
# 临时生效（当前终端会话）  
export OLLAMA_HOST="0.0.0.0:11434"  
ollama serve

永久生效方案：
将环境变量添加到 Shell 配置文件（如 ~/.bashrc 或 ~/.zshrc）：

bash
 代码解读
复制代码
echo 'export OLLAMA_HOST="0.0.0.0:11434"' >> ~/.zshrc  
source ~/.zshrc

2.3 其他排查项

  1. 检查端口占用： 
    bash
     代码解读
    复制代码
    lsof -i :11434
    若其他进程占用端口，终止进程： 
    bash
     代码解读
    复制代码
    kill -9

3. 最终验证

执行以下命令测试：

bash
 代码解读
复制代码
curl http://192.168.1.106:11434/api/generate \  
  -d '{"model": "deepseek-r1:8b", "prompt": "为什么天空是蓝色的？"}'

若返回正常结果，问题解决！

4. 总结

  • 核心问题：Ollama 默认仅监听 localhost，需通过配置或环境变量开启外部访问。
  • 关键步骤：
    1. 使用环境变量 OLLAMA_HOST 强制覆盖配置（优先级最高）。
    2. 检查防火墙和端口占用。

通过以上方法，即使配置文件未生效，也能通过环境变量快速解决问题。希望本文能帮助你顺利部署 Ollama 服务！

注：本文转载自blog.csdn.net的yyhgo_的文章"https://blog.csdn.net/yyhgo_/article/details/128454930"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。
复制链接
相关推荐
发表评论

评论记录：

未查询到任何数据！